/* =========================================================================
   Block Quote — a verbatim customer voice, set apart from the analysis.

   Built to the CallRail Figma `Block Quote` frame (node 1661:19337), which is
   the only place the design states this component. It is deliberately its own
   stylesheet rather than a section of study.css: the quote is a page-level
   component like compare / chart / carousel / video, reusable from any case
   study's JSON, and a page with no quote should not download its rules.

   Figma spec, verbatim:

   | part  | font                        | size | line-height | tracking |
   |-------|-----------------------------|------|-------------|----------|
   | mark  | Cormorant Bold Italic       | 64   | 39          | −1.28px  |
   | quote | Cormorant Medium Italic     | 32   | normal      | −0.64px  |
   | by    | Inter Regular               | 16   | 24          | −0.32px  |

   All three are #454545 (`--body-text`), stacked with a 12px gap, and the
   attribution is right-aligned.

   Tracking is −2% at all three sizes, and each part must say so itself. `.page`
   already sets −0.02em site-wide, but an inherited `em` length is resolved
   against the element that DECLARED it — so the 64px mark inherits −0.32px
   (2% of the 16px body), not the −1.28px the design asks for. Restating it
   here is what makes the em resolve against the quote's own size.
   ========================================================================= */

.bq {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* The opening mark is its own element, not part of the quote string, so the
   content file holds clean prose that can be copied out of it unchanged. It
   is decorative — the <blockquote> beneath it carries the meaning — so it is
   aria-hidden and the closing mark is generated in CSS for the same reason.

   Figma asks for Bold Italic (700). Only the 300 and 600 italic cuts are on
   disk, and a 700 request resolves down to 600 — the real SemiBold face the
   Section Titles already load, so this costs no extra download and becomes
   exactly right the day a 700 cut lands. */
.bq__mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 64px;
  line-height: 39px;
  letter-spacing: -.02em;
  color: var(--body-text);
}

/* Figma asks for Medium Italic (500), and 500 is the one weight that must NOT
   be declared literally here: CSS resolves a 500 request DOWNWARDS first, so
   with {300, 600} on disk it would land on the Light cut and set the quote
   several shades too pale — the opposite of the intent. 600 is the nearest
   real face and the one the design reads as. */
.bq__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 32px;
  line-height: normal;
  letter-spacing: -.02em;
  color: var(--body-text);
  max-width: none;
}
.bq__text::after { content: ' ”'; }

.bq__by {
  font-size: 16px;
  line-height: 24px;
  text-align: right;
  color: var(--body-text);
}

/* Below the case study grid's breakpoint the quote has the full measure to
   itself, so the display sizes come down a step rather than filling the
   screen with three words a line. Same treatment, and the same breakpoint, as
   the type scale in study.css. */
@media (max-width: 900px) {
  .bq__mark { font-size: 44px; line-height: 28px; }
  .bq__text { font-size: 24px; }
}