/* ==========================================================================
   Section: The Dragster Effect — homepage variant (Figma 6058:7744)
   Reuses the About page's .dragster-effect head (page-about.css) and adds the
   impact grid: 4 slots × 250px rows, 20px gaps; a card's Size (set in the
   editor) is its footprint — Small 1×1, Wide 2×1, Large 2×2.
   ========================================================================== */

.dragster-effect--home {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-100);                 /* Figma: title at 100, grid ends 102 from the bottom */
}
.dragster-effect--home > .container { position: relative; z-index: 1; }   /* above the curve */

/* Head: title left (cols 1–2), intro right (cols 3–4, 610px), 110px to the grid */
.dragster-effect--home .dragster-effect__head { margin-bottom: 110px; }
.dragster-effect--home .dragster-effect__lead {
  max-width: 610px;
  letter-spacing: var(--body-lg-ls);
  color: rgba(255, 255, 255, 0.96);
}
/* Gradient title — the same diamond gradient as the services heading */
.dragster-effect__title--glow {
  letter-spacing: var(--title-lg-ls);
  background: var(--bg-diamond-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* The title reveals letter by letter like every other heading. A letter with its own opacity
   or transform drops out of the h2's background-clip:text, so main.js (rv--glow) sets --gw/--gh
   (half the h2 box) and each letter's --gx/--gy (its offset), and every letter paints the SAME
   four-quadrant diamond gradient at that offset: together they read as one continuous gradient. */
.dragster-effect__title--glow.rv--glow { position: relative; background: none; }
.dragster-effect__title--glow.rv--glow .rv__c {
  background: var(--bg-diamond-gradient);
  background-size: var(--gw, 50%) var(--gh, 50%);
  background-position:
    calc(var(--gw, 0px) - var(--gx, 0px)) calc(var(--gh, 0px) - var(--gy, 0px)),
    calc(0px - var(--gx, 0px)) calc(var(--gh, 0px) - var(--gy, 0px)),
    calc(0px - var(--gx, 0px)) calc(0px - var(--gy, 0px)),
    calc(var(--gw, 0px) - var(--gx, 0px)) calc(0px - var(--gy, 0px));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Decorative curve — Figma vector 1584×781 placed 1526×723 at (-43, 211) and
   rotated 180°. Scales with the viewport past 1440px; drawn in on scroll
   (main.js scrollCurves), fully drawn under reduced motion. */
.dragster-effect__curve {
  position: absolute;
  left: -43px;
  top: 211px;
  /* One width variable drives both axes, so the mobile override below only has
     to restate the width. The height is EXPLICIT rather than height:auto +
     aspect-ratio: WebKit has long-standing trouble resolving an svg's auto
     height from aspect-ratio, and this curve's whole draw window is measured
     off that box — a wrong height there is a wrong animation. The factor is the
     viewBox's own ratio, 781.002 / 1584.01. */
  --curve-w: max(1526px, calc(100vw + 86px));
  width: var(--curve-w);
  height: calc(var(--curve-w) * 0.493054);
  pointer-events: none;
  z-index: 0;
}
/* Wide screens: the curve stops growing. Above the Figma frame the narrow SVG
   is swapped for one carrying the same body with longer tails, drawn at a
   FIXED height — so a bigger screen reveals more tail instead of a taller
   curve. 1441px is the one width where the two are the same height (752 vs
   752.4), so the swap itself is invisible. */
.dragster-effect__curve--wide { display: none; }
@media (min-width: 1441px) {
  .dragster-effect__curve:not(.dragster-effect__curve--wide) { display: none; }
  .dragster-effect__curve--wide {
    display: block;
    /* At this height the artwork is 2646px wide (viewBox 2748.01 × 781.002).
       max() keeps it at least as wide as the viewport, so a screen wider than
       the tails reach never shows a gap where the curve simply stops; past
       2560 it scales again, far more gently than the narrow one did. */
    --curve-w: max(2646px, calc(100vw + 86px));
    width: var(--curve-w);
    height: calc(var(--curve-w) * 0.284207);   /* 781.002 / 2748.01 */
    left: 50%;
    transform: translateX(-50%);
  }
}

.dragster-effect__curve-path {
  stroke-dasharray: 9000;
  stroke-dashoffset: 9000;
}

/* ── Impact grid ─────────────────────────────────────────────────────────── */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  gap: 20px;
}

/* Rows GROW with the grid on wide screens (Kajsa 2026-10-15), like an image grid keeps its ratio. 250px is Figma's row at 1440, where a column measures 315px (container 1320 at a 60px gutter), so the row is 250/315 = 0.794 of a column. max() keeps 250 as the floor; the cap stops the cards stretching past what their fixed-size type can fill. cqw is the .container content width, which is why that element is a size container below. 4 columns only (>=1025); tablet and phone keep their own rows. (First calibrated at 0.862 on an old 290px column, which made 1440 come out at 272.) */
.dragster-effect--home > .container { container-type: inline-size; }
@media (min-width: 1025px) {
  .impact-grid { grid-auto-rows: max(250px, min(360px, calc((100cqw - 60px) / 4 * 0.794))); }
}

/* Card — glass on the dark ground. Figma: white 20% fill, background blur 100
   (Figma states blur as the diameter, CSS blur() takes the radius — hence 50),
   24px corners, and a 1px rim that is a GRADIENT from #6F2CFF to transparent,
   not a flat purple line. A gradient cannot go in `border`, so the rim is a
   masked ::before — the same technique .glass-card uses for its specular edge. */
.impact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 24px 20px;   /* +1px: the rim no longer eats into the box */
  border-radius: 24px;
  /* The glass itself is the case-hero tags' (Kajsa 2026-11-02): the card carries
     .glass-card + their --fx-filter, so glassfilter.js lays the same liquid-glass
     backdrop under it. No own backdrop-filter - it would blur on top of it.
     The fill is the tags' 0.08 white. */
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-light);
  text-decoration: none;
  overflow: hidden;
  transition: background 0.3s ease;
}
/* The rim. inset:0 + a content-box/border-box mask leaves exactly the 1px edge
   painted, so the gradient reads as a border. Above the card's own content, as
   a real border would be, but inset well clear of the corner arrow. */
.impact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  /* 215deg is the mirror of 145: the purple sits at the TOP RIGHT and fades out
     towards the lower left. Only the side changes — the falloff is identical. */
  /* Same specular shape as the tags' rim (glass-card.css: brightest top-left,
     faint sides, a catch on the lower-right edge), drawn in the card's purple. */
  background: linear-gradient(145deg,
    #6F2CFF 0%,
    rgba(111, 44, 255, 0.30) 22%,
    rgba(111, 44, 255, 0.08) 52%,
    rgba(111, 44, 255, 0.15) 80%,
    rgba(111, 44, 255, 0.50) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 1;   /* glass-card.css dims its white rim to 0.9; the purple stays full */
}

.impact-card--small { grid-column: span 1; }
.impact-card--wide  { grid-column: span 2; }
.impact-card--large { grid-column: span 2; grid-row: span 2; padding: 27px 27px 40px; }

.impact-card__eyebrow {
  margin: 0;
  padding-right: 32px;                  /* room for the arrow */
  font-size: var(--body-xxs);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--text-light);
}
.impact-card--large .impact-card__eyebrow {
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  letter-spacing: -0.01em;
}
.impact-card__arrow {
  position: absolute;
  top: 22px;
  right: 23px;
  display: block;
  width: 16px;
  height: 16px;
  color: var(--text-light);
}
.impact-card__arrow svg { display: block; width: 16px; height: 16px; }

.impact-card__number {
  margin: 16px 0 0;
  font-size: var(--title-lg);
  line-height: var(--title-lg-lh);
  letter-spacing: -0.03em;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;   /* Figma pins the text cut on the figures */
  color: var(--text-light);
}
.impact-card--large .impact-card__number {
  margin-top: 28px;
  font-size: var(--figure-xl);
  line-height: var(--figure-xl-lh);
}

.impact-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;                     /* title + note sit at the bottom */
  padding-top: 16px;
}
.impact-card--large .impact-card__body { gap: 27px; }
.impact-card__title {
  margin: 0;
  font-size: var(--body-lg);
  line-height: 32px;
  letter-spacing: -0.01em;
  color: var(--text-light);
}
.impact-card--large .impact-card__title,
.impact-card--wide  .impact-card__title {
  font-size: var(--title-xs);
  line-height: var(--title-xs-lh);
}
.impact-card__note {
  margin: 0;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: rgba(255, 255, 255, 0.65);
}
.impact-card--large .impact-card__note,
.impact-card--wide  .impact-card__note {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(255, 255, 255, 0.72);
}

/* Wide card: figure left, title + note beside it (Figma 6058:7763) */
.impact-card--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 36px;
}
.impact-card--wide .impact-card__eyebrow { grid-column: 1 / -1; }
.impact-card--wide .impact-card__number  { grid-column: 1; margin-top: 14px; font-size: var(--title-xl); line-height: var(--title-xl-lh); }
.impact-card--wide .impact-card__body    { grid-column: 2; margin-top: 14px; padding-top: 0; align-self: start; }

/* Linked cards */
@media (hover: hover) {
  a.impact-card:hover { background: rgba(255, 255, 255, 0.16); }
}
a.impact-card:focus-visible {
  outline: 2px solid var(--text-light);
  outline-offset: 3px;
}

/* ── Tablet: two slots per row; Large fills the row (2×2 → 520px tall) ───── */
@media (max-width: 1024px) {
  .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact-card--large .impact-card__number { font-size: var(--figure-xl); line-height: var(--figure-xl-lh); }
  .dragster-effect--home .dragster-effect__head { margin-bottom: 80px; }
}

/* ── Phone: one column, natural heights, every card the small layout ─────── */
@media (max-width: 767px) {
  .dragster-effect--home { padding-block: 60px; }
  .dragster-effect--home .dragster-effect__head { margin-bottom: 40px; }
  .impact-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .impact-card,
  .impact-card--wide,
  .impact-card--large { grid-column: span 1; grid-row: auto; min-height: 220px; padding: 21px 23px 19px; }
  .impact-card--wide { display: flex; column-gap: 0; }
  .impact-card--wide .impact-card__body { margin-top: auto; padding-top: 16px; }
  .impact-card__number,
  .impact-card--wide  .impact-card__number,
  .impact-card--large .impact-card__number { margin-top: 16px; font-size: var(--title-xl); line-height: var(--title-xl-lh); }
  .impact-card--large .impact-card__body { gap: 16px; }
  .impact-card--large .impact-card__title,
  .impact-card--wide  .impact-card__title { font-size: var(--body-lg); line-height: 32px; }
  .dragster-effect__curve { left: -20%; top: 30%; --curve-w: 200vw; }
}