/* ============================================================
   DataReportQuoteSection — Figma 6JdV8D0ZGECx2whzGAnTrs, node 6797:2154.
   Spec: DataReportQuoteSection.figma.md.
   ============================================================ */

/* Figma draws this panel's 16px inset as a 16px SOLID WHITE BORDER on the
   node itself (`border-16 border-[var(--card,white)]`), not as a margin —
   and that is worth keeping rather than "tidying" into margin/padding:

   - The border participates in `border-radius`, so the 48px outer radius and
     the 32px inner radius both fall out of one declaration.
   - A border cannot collapse against the section above or below it, which a
     vertical margin would.
   - The section stays full-bleed, so it needs no wrapper to be centred.

   The white matches the page ground (see ../data-report.css), so the border
   reads as a gutter, not as an outline. */
.data-report-quote {
  background:     var(--dr-panel);
  border:         16px solid var(--dr-ground);
  border-radius:  48px;            /* Figma rounded-6xl; no 48px radius token */
  box-sizing:     border-box;
  font-family:    var(--font-family-default);
}

/* The content sits on the page's WIDE container track (1384px content + 48px
   sides), so the quote and the form card line up with every other wide block
   on this page — `.data-report-findings__inner` and the footer row inside the
   CTA panel — instead of on a per-section padding of their own.

   Only the BLOCK padding is section-owned; the inline track comes from the
   container. That relies on this file being imported after `container.css`
   (it is — see the imports in the .tsx), since `.container-wide`'s `padding`
   shorthand would otherwise zero the block padding back out. */
.data-report-quote__inner {
  display:       flex;
  align-items:   center;
  gap:           4rem;   /* 64px */
  padding-block: 5rem;   /* 80px + the 16px border = Figma's 96px */
}

/* The panel's 16px border has ALREADY inset this container from the viewport,
   so a stock `.container-wide` would sit 16px inside the page's wide track —
   the findings spreads would start at 48px from the viewport while this
   content started at 64px. Handing the border back to the container fixes it
   at every width, because both the cap and the padding shrink by it:

     viewport 1512 — track 1448 wide, 16px auto margin + 32px pad -> 64px in,
                     same as findings' 16px margin + 48px pad
     viewport 1440 — track fills 1408, 32px pad -> 48px in, same as findings

   Adjusting only the padding would fix one of those and break the other,
   since `max-width` on `.container-wide` includes its padding. */
.data-report-quote__inner.container-wide {
  max-width:      calc(1384px + 64px);   /* 1480 - 16px of border per side */
  padding-inline: 2rem;                  /* 48px - 16px of border */
}


/* ---- Quote column (6797:2155) ----------------------------- */

.data-report-quote__copy {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             2.25rem;          /* 36px */
  flex:            1 1 0;
  min-width:       0;
  /* Figma: cyan-700 #186581 — the repo's --color-brand-blue-700 is the same
     value. Both the quote and its attribution take it. */
  color:           var(--color-brand-blue-700);
}

.data-report-quote__quote {
  margin:      0;
  font-family: var(--dr-font-display);
  font-style:  italic;
  font-weight: var(--font-weight-light);   /* Rowan Light Italic */
  font-size:   2.25rem;                    /* 36px */
  line-height: 3rem;                       /* 48px */
  /* Figma's text node (6797:2158) is 760 wide. Its Copy frame is 792, but
     that includes a 32px right padding — the column here has none (the row's
     gap separates it from the form), so the measure is capped on the text
     itself. Without it the quote ran 792 wide and wrapped differently. */
  max-width:   760px;
}

/* The opening curly quote HANGS in the gutter so every line of text — the
   first included — starts on the same edge (optical margin alignment).

   Figma does this with `text-indent: -0.45em`, and that is what shipped until
   2026-09-29. It never lined up: the indent has to equal the glyph's advance,
   and Rowan's “ advances only 0.34em — so -0.45em over-pulled the first line
   ~0.1em (4px at 36px) LEFT of the lines below it, and by a different amount
   again whenever the font fell back.

   So the mark is not text any more. The component strips a leading “ from the
   copy (see OPENING_QUOTE in the .tsx) and this draws it: Rowan Light Italic's
   own `quotedblleft` outline, extracted from the .otf (ink box 56,478 →
   357,769 in 1000 upm), as a mask filled with `currentColor`.

   Its geometry is known exactly, so the hang is exact: an inline-block whose
   negative margin-left cancels its own width + the gap, i.e. it adds ZERO to
   the line and the first letter lands where every other line starts. All in
   `em`, so it follows the quote's font-size at every breakpoint.

   - width / height  0.301em x 0.291em — the glyph's ink box
   - vertical-align  0.478em — the ink's bottom sits that far above the baseline
   - gap             0.06em  — ink → first letter */
.data-report-quote__quote[data-open-quote]::before {
  --dr-quote-gap:   0.06em;
  content:          '';
  display:          inline-block;
  width:            0.301em;
  height:           0.291em;
  margin-left:      calc(-0.301em - var(--dr-quote-gap));
  margin-right:     var(--dr-quote-gap);
  vertical-align:   0.478em;
  background-color: currentColor;
  -webkit-mask:     url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%2756 -769 301 291%27%3E%3Cpath transform=%27scale%281 -1%29%27 d=%27M56 560C56 507 75 478 108 478C143 478 161 519 157 557L111 573C110 639 129 696 178 751L161 769C99 718 56 632 56 560ZM235 560C235 507 254 478 287 478C322 478 340 519 336 557L290 573C289 639 308 696 357 751L340 769C278 718 235 632 235 560Z%27/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask:     url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%2756 -769 301 291%27%3E%3Cpath transform=%27scale%281 -1%29%27 d=%27M56 560C56 507 75 478 108 478C143 478 161 519 157 557L111 573C110 639 129 696 178 751L161 769C99 718 56 632 56 560ZM235 560C235 507 254 478 287 478C322 478 340 519 336 557L290 573C289 639 308 696 357 751L340 769C278 718 235 632 235 560Z%27/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.data-report-quote__attribution {
  margin:      0;
  max-width:   760px;                   /* Figma text node 6797:2159 */
  font-size:   var(--font-size-xl);     /* 20px */
  line-height: var(--line-height-xl);   /* 28px */
  font-weight: var(--font-weight-regular);
}


/* ---- Form column (6797:2160) ------------------------------ */

/* Both columns are `flex: 1 1 0` with the form capped at Figma's 496px, so
   the form is NEVER wider than the quote beside it.

   It used to be `flex: 0 0 496px`, which held 496 no matter how little room
   there was and let the quote column absorb the entire squeeze — by ~1200px
   the copy was the narrower of the two and the quote ran to eleven lines
   beside a card that had not moved.

   Equal bases fix that at both ends: when the row is wide the form freezes at
   its 496px max and flexbox hands the leftover to the quote column (the
   quote's own 760px cap then sets its measure), and when the row is tight the two
   share it evenly, which is the floor — equal, never form-heavier.

   `max-width` on the ITEM, not just on the card inside it: `.data-report-form`
   already carries `max-width: 496px`, but a flex item with `flex-basis: 0`
   grows past it and the card then sits left-aligned in a too-wide column. */
.data-report-quote__form {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  flex:            1 1 0;
  max-width:       496px;   /* Figma Form node */
  min-width:       0;
}


/* ---- Responsive ------------------------------------------- */

@media (max-width: 1199px) {
  .data-report-quote__inner {
    padding-block: 3rem;   /* 48px + the 16px border = Figma's 64px */
    gap:           3rem;   /* 48px */
  }
}

/* Stack before the two columns start fighting: the form card has a hard 496px
   max-width, so the quote column is what gets squeezed. Figma has no mobile
   frame for this page — revisit when one lands. */
@media (max-width: 991px) {
  .data-report-quote {
    border-radius: 32px;
  }

  .data-report-quote__inner {
    flex-direction: column;
    align-items:    stretch;
    padding-block:  3rem;   /* 48px */
    gap:            3rem;
  }

  /* Same give-back-the-border rule as above: 44px - 16px. */
  .data-report-quote__inner.container-wide {
    padding-inline: 28px;
  }

  /* Stacked, the copy is inset 16px further than the form card — the same
     split the mobile frame draws (card on the wide/media inset, text on the
     text inset), so the card "sticks out" past the quote above it. Mobile
     below extends this to all four sides. */
  .data-report-quote__copy {
    padding: 0 1rem;
  }

  /* Stacked: the text spans the column — the 760px measure is a desktop
     one, set beside the form. */
  .data-report-quote__quote,
  .data-report-quote__attribution {
    max-width: none;
  }

  .data-report-quote__quote {
    font-size:   1.75rem;   /* 28px */
    line-height: 2.5rem;    /* 40px */
  }

  /* Stacked: the column's desktop 496px cap comes off. The card's own 496px
     cap is lifted in DataReportForm.css at the same breakpoint. */
  .data-report-quote__form {
    flex:      1 1 auto;
    max-width: none;
  }
}

/* Mobile is MEASURED against Figma CRrdcRif8N6jgEWK28BDb5 node 6850:13507
   — see ../DataReportPage.mobile.figma.md. */
@media (max-width: 767px) {
  /* Figma's panel sits at x=12, w=378 — but at y=0 within its section, full
     height. Sampling the frame confirms it: the cream runs 1127 → 2050 with
     no white above or below, only the 24px rounded corners. So the gutter is
     HORIZONTAL ONLY at this width (the CTA panel, by contrast, keeps its
     gutter on all four sides — see DataReportCtaSection.css). */
  .data-report-quote {
    border-width:  0 12px;
    border-radius: 24px;
  }

  /* 16px panel padding — which is exactly what `.container-wide` gives at this
     width — with the quote copy inset a further 16px and the form card taking
     the container's padding as-is. That asymmetry is the design: the
     card carries its own visual weight, so it runs wider than the copy above
     it (Figma quote text x=44 w=314; form card x=28 w=346). Expressed as
     padding on the copy rather than a negative margin on the card, so the
     panel's own box stays honest. */
  .data-report-quote__inner {
    padding-block: 1rem;
    gap:           2rem;   /* 32px — Figma section title ends 1447, form starts 1479 */
  }

  /* The border give-back STOPS here. Figma puts the form card at x=28 on a
     panel that starts at x=12, i.e. 16px inside the panel — which is exactly
     `.container-wide`'s own mobile padding, uncorrected. (The correction also
     has nothing to give back on the block axis at this width: the border is
     `0 12px`, not 16 on all four sides.) */
  .data-report-quote__inner.container-wide {
    max-width:      none;
    padding-inline: 1rem;
  }

  .data-report-quote__copy {
    padding: 1rem;
    /* Figma: quote text ends y=1383, attribution starts 1407. */
    gap:     1.5rem;   /* 24px */
  }

  /* 24px over 32px leading: Figma's quote node is 314 x 224 over seven lines. */
  .data-report-quote__quote {
    font-size:   1.5rem;    /* 24px */
    line-height: 2rem;      /* 32px */
  }

  /* Attribution DOES step down, unlike the body copy: Figma 6850:13255 renders
     218px of ink, against 220px at 16px in the real face (248px at 18px). */
  .data-report-quote__attribution {
    font-size:   var(--font-size-base);     /* 16px */
    line-height: var(--line-height-base);   /* 24px */
  }

}