/* =========================================================================
   Case study layout, built to the CallRail Figma (node 1602:11914).
   Spec, block inventory and known deviations: docs/CASE-STUDY-REBUILD.md

   The Figma is LAYOUT guidance, not margin/padding guidance — so the grid,
   column spans and type scale follow it exactly, while the vertical rhythm is
   expressed in the site's own clamped spacing rather than the design's fixed
   pixel gaps.

   Loads after site.css (tokens, @font-face) and alongside masthead.css and
   rail.css, which supply the three components the design leaves out.
   ========================================================================= */

/* Anchor and rail jumps must land BELOW the sticky masthead, or the section
   heading they target sits underneath it. --masthead-h is measured by
   masthead.js; the fallback covers first paint. */
.study-root { scroll-padding-top: calc(var(--masthead-h, 6.5rem) + 1.5rem); }

/* Ground, text colour, font, tracking and the sticky-footer layout all come
   from .page in site.css — the -2% tracking the Figma specifies is now the
   site-wide default, so there is nothing left for this rule to say. */

/* ---------------------------------- grid ---------------------------------
   THREE tiers, written narrowest-first, and the column spans exist in exactly
   ONE place — inside the widest tier.

   | tier | columns | who gets the full measure |
   |---|---|---|
   | ≤640 | 1 | everything, by having only one column |
   | 641–900 | 2 | Section Titles and any `.study-wide` visual |
   | ≥901 | 4 | only what a span utility says, per the design |

   **Why one list matters.** The spans used to be declared unconditionally and
   then *undone* by a second list in the narrow tier. The two drifted:
   `.study-col-2-4` and `.study-col-3-4` were added for the Figma revision and
   never mirrored, so on a phone a `grid-column: 3 / -1` conjured an implicit
   second column, collapsed the real one to 0px, and stacked a Section Title
   on top of the text beside it — nine blocks, every one of them unreadable.

   Declaring the spans only where they apply means there is nothing to undo and
   nothing to keep in sync. A new span utility added to the block below is
   correct at every width the moment it is written.

   The gutter is 72px, not the design's 47px — the Figma is layout guidance,
   not margin guidance, and at 47 the columns read as one block of text with
   seams rather than as four columns. Widening the gutter narrows the columns
   to ~275px, which is still a comfortable measure at 16px. */
.study-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gutter);
  /* Only ever seen when a row wraps, which is every row below 901px and no
     row above it. Sized as the in-block step, because two halves of one row
     are closer kin than two rows are. */
  row-gap: var(--study-gap-inner);
}

/* Always full width, at every tier — so it sits outside the tiers. */
.study-span-all { grid-column: 1 / -1; }

/* ---- tier 2: two columns ---- */
@media (min-width: 641px) {
  .study-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below the design's own tier, a Section Title heads its row rather than
   sharing it, and anything wider than one column takes the whole measure.

   `.study-wide` is set by the renderer on every visual — media, compare,
   chart, carousel, video, quote — and on the lede, which spans three of the
   four columns and would otherwise auto-place into one of two at tier 2 and
   read at half the page's width. A block inherits the right behaviour by
   saying what it is, with no edit here. */
@media (max-width: 900px) {
  .study-sectiontitle,
  .study-wide { grid-column: 1 / -1; }
}

/* ---- tier 1: the design's four columns ----
   The Figma's 1318px band is the CONTENT, with 97px margins OUTSIDE it — the
   box is 1512 wide and the padding sits inside that (border-box). Setting
   max-width to 1318 would have eaten the margins out of the content and given
   246px columns instead of 294.25.

   Those numbers are now the site-wide --page-max / --page-gutter in site.css,
   so this file no longer overrides .wrap — the masthead and footer sit on the
   same band as the content on every page.

   `lede` is columns 1–3, `media-wide` is 2–3, and the stats rows deliberately
   start at column 2. */
@media (min-width: 901px) {
  .study-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .study-span-3  { grid-column: 1 / span 3; }
  .study-col-2   { grid-column: 2; }
  .study-col-2-3 { grid-column: 2 / span 2; }
  .study-col-2-4 { grid-column: 2 / -1; }
  .study-col-3-4 { grid-column: 3 / -1; }
}

/* --------------------------- breaking the grid --------------------------
   The design is a SIX column grid. Content lives in the middle four — which
   is exactly the band `.study-grid` describes, so the four columns above are
   columns 2-5 of the six and nothing here changes where normal content sits.

   Columns 1 and 6 are the page margins. These utilities let a single element
   reach into them when a layout is called out as breaking the grid. Negative
   margin rather than a wider grid on purpose: the content columns never move,
   and only the element that escapes is affected.

   Compose them with a span, e.g. "study-span-all study-edge". */
.study-edge       { margin-inline: calc(-1 * var(--page-gutter)); }
.study-edge-left  { margin-left: calc(-1 * var(--page-gutter)); }
.study-edge-right { margin-right: calc(-1 * var(--page-gutter)); }

/* ------------------------------ vertical rhythm --------------------------
   TWO gaps, and exactly one question decides which a block gets:

       does this block START a section, or CONTINUE the one above it?

   A block that opens a section is pushed away from what came before. A block
   that belongs to the section above it — a second stats row under the same
   divider, a chart illustrating the row above, a pull quote supporting the
   finding it follows — sits closer, because the space is what says the two
   things are related.

   **The page already knew the answer.** `"rail": false` in a case study's JSON
   means "this is not a section of its own, it is part of the one above" —
   until now that only decided whether a block earned a nav pill. It decides
   the space too, so the judgement is made once, in the content, and both the
   rail and the rhythm read it. See `startsSection()` in scripts/study.mjs.

   Both gaps scale with viewport WIDTH and cap at the 1512 design frame, the
   same way --page-gutter does. Width, not height: the layout's measure is
   horizontal, and the previous height-based rhythm meant the same page
   breathed differently on a short laptop than on a tall monitor for no reason
   a reader could see. Capping at the design frame matters too — past 1512 the
   content band stops growing, so the rhythm must stop with it or a wide
   monitor gets a narrow column stretched down a very long page.

   | | at 375 | at 1512+ | source |
   |---|---|---|---|
   | within a section | 48px | 96px | the Figma's own uniform block pitch |
   | between sections | 85px | 171px | Vi's choice, from Affecting Success → Post-launch metrics |

   The three below are NAMES for steps on the site-wide fluid scale in
   site.css, not new values — that scale was derived from these, and they map
   onto it exactly. Naming them here keeps this file reading in its own terms
   ("the gap between sections") while there is only one set of numbers on the
   site to change. */
:root {
  --study-gap-inner:   var(--space-fluid-m);   /* 32 → 64  within a block   */
  --study-gap-block:   var(--space-fluid-l);   /* 48 → 96  between blocks   */
  --study-gap-section: var(--space-fluid-xl);  /* 85 → 171 between sections */
}

/* Every block owns the space ABOVE it. Stated that way round on purpose: the
   gap belongs to the block that is arriving, so a block's own identity — do I
   open a section or continue one — is enough to size it, with no rule needing
   to look at what follows. */
.study-block { margin-top: var(--study-gap-block); }
.study-block--start { margin-top: var(--study-gap-section); }

/* A Section Divider Title IS a section's heading, so whatever comes next
   belongs to it and hugs it, however that block is marked. This is the one
   relationship the content cannot get wrong, so it is stated structurally
   rather than left to a flag. Two classes deep, so it outranks --start. */
.study-divider + .study-block { margin-top: var(--study-gap-block); }

/* The last block has nothing after it to push the footer away, and the
   footer's own padding is only its internal breathing room. */
.wrap > .study-block:last-child { margin-bottom: var(--study-gap-section); }

/* ------------------------------- pill row -------------------------------
   `Pill Row` — the role credit, directly under the masthead. */
.study-pillrow { padding-block: clamp(1.5rem, 4vh, 2.5rem) clamp(2rem, 5vh, 3.5rem); }
.study-pill {
  display: inline-flex; align-items: center;
  padding: var(--space-2xs) var(--space-s); border-radius: var(--radius-pill);
  /* The project's own gradient, set on <body> from the case study's JSON.
     There is no shared gradient to fall back to, so a page without one gets a
     flat ground instead of another company's colours.

     Full strength, no scrim. An earlier SAP ramp ran #0057D2 to #BDE984 and no
     text colour cleared 4.5:1 across it, so the pill carried a 30% white veil
     to lift it. The revised three-stop SAP ramp scores 7.76 on its own, and the
     worst of all four is now 6.32 (CareerPlug) — the veil was muting four
     gradients to rescue one that no longer needs it.

     `--ink` rather than `--body-text` is doing that work: #454545 would drop
     CareerPlug to 3.37 and fail. */
  background: var(--cs-gradient, var(--pill-flat));
  color: var(--ink);
  font-size: 14px; font-weight: 700; letter-spacing: -.02em;
  text-transform: uppercase; white-space: nowrap;
  line-height: normal;
}
/* delta pills on the stats blocks, coloured by sign */
.study-pill--pos { background: var(--pill-pos-bg); color: var(--pill-pos-ink); }
.study-pill--neg { background: var(--pill-neg-bg); color: var(--pill-neg-ink); }

/* ------------------------------ project intro ---------------------------
   `Project Intro` — the lede at 26/39, with the metadata line beneath. */
.study-intro { padding-bottom: clamp(2.5rem, 7vh, 4.5rem); }
.study-lede {
  font-size: 26px; line-height: 39px; font-weight: 400;
  margin-bottom: var(--space-m);
}
.study-meta { font-size: 14px; line-height: normal; }
.study-meta b { font-weight: 700; }
/* the design separates the metadata items with a wide word space */
/* audit-ok: a wide word-space, not layout — the design separates the
   metadata items typographically, so it must track the font size. */
.study-meta span { margin-left: 1.4em; }

/* ------------------------------ project media ---------------------------
   No bottom spacing on the figure itself. Spacing belongs to the SLOT, not to
   whatever fills it: inside a row the row's own padding already provides it
   (stacking both put 260px of dead air under the mockup in Affecting
   Success), and in the hero slot .study-hero provides it — which is what
   keeps the gap identical whether the hero is an image, a video, or anything
   added later. */
.study-media { padding-bottom: 0; }

/* The hero slot, directly under the Project Intro. No bottom spacing of its
   own — the first block below it opens a section and brings the section gap
   with it, so putting one here too would stack two gaps. */
.study-hero { padding-bottom: 0; }

/* Hero on the company's gradient. The screenshot sits inset on the ground the
   same way a project tile does on the homepage, so a case study hero and a
   homepage tile read as the same object. The inner radius is a step tighter
   than the outer, which is what stops the inset looking like a sticker. */
.study-hero--grad {
  background: var(--cs-gradient);
  border-radius: var(--tile-radius);
  padding: var(--space-fluid-s);
  padding-bottom: var(--space-fluid-s);
}
/* Scoped to both classes on purpose. `.study-media img` further down sets the
   full tile radius at the same specificity, and being later it would win —
   this needs to be the more specific rule, not merely the later one. */
.study-media.study-hero--grad img {
  border-radius: calc(var(--tile-radius) - 6px);
}
/* No shadow, matching the video frames. These are screenshots and diagrams
   that carry their own ground, so a drop shadow was lifting a rectangle with
   no edge of its own to cast one. */
.study-media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--tile-radius);
}

/* A figure whose ground reaches wider than its artwork. For a diagram the flat
   backdrop is baked into the file, so the figure repeats that colour and the
   seam between the two is invisible — the drawing appears to float in a wider
   field rather than being scaled up to fill it.

   `--ground` is set per instance so one rule serves every such diagram.

   The radius moves from the image to the figure: on matching ground a rounded
   image would read as a card sitting on a same-coloured card, which is the
   artefact this avoids. */
.study-media--ground {
  background: var(--ground);
  border-radius: var(--tile-radius);
  overflow: hidden;
}
.study-media--ground img {
  margin-inline: auto;
  border-radius: 0;
}

/* Hold the artwork at the width it occupied before the ground widened, so
   widening the span adds field around the drawing instead of enlarging it.

   Two of four columns, expressed against a container that is three of them:
   with column c and gutter g the box is 3c + 2g, so 2c + g is (2 × box − g)/3.
   Percentages resolve against that container, which keeps this correct as the
   gutter clamps with the viewport.

   Tier 1 only. Below it the figure already takes the whole measure and there
   is no spare width to give away. */
@media (min-width: 901px) {
  .study-media--ground.study-col-2-4 img {
    max-width: calc((200% - var(--grid-gutter)) / 3);
  }
}

/* ------------------------------ section title ---------------------------
   `Section Title` — the serif italic header that labels a row, in column one,
   with an optional description under a rule. */
.study-sectiontitle > h2 {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 32px; line-height: 39px; letter-spacing: -.02em;
  text-transform: capitalize;
  color: var(--body-text);
  border-bottom: 1px solid var(--body-text);
  padding-bottom: var(--space-xs);
  max-width: none;
}
.study-sectiontitle p { margin-top: var(--space-l); }

/* ------------------------------- project text ---------------------------
   `Project Text` — a titled paragraph occupying one column. */
.study-text h3 {
  font-size: 26px; line-height: 39px; font-weight: 500;
  letter-spacing: -.02em; color: var(--body-text);
  max-width: none;
}
.study-text p { margin-top: var(--space-l); }

/* Matches `.alt-proj__cta` on the homepage. Same size, weight and spacing, so
   the pointer onward is one component the reader recognises rather than two
   that merely resemble each other. */
.study-text__cta {
  display: inline-block; margin-top: var(--space-m);
  font-size: 15px; font-weight: 600;
}

/* every `Description` in the design is 16/24 */
.study-desc { font-size: 16px; line-height: 24px; }
.study-desc + .study-desc { margin-top: var(--space-m); }

/* -------------------------- section divider title -----------------------
   `Section Divider Title` — the full-width serif italic milestone, ruled off.
   64px in the design; clamped so it doesn't overflow a narrow screen. */
/* No padding of its own, in either direction. Its lead-in is the section gap
   it carries as a `.study-block--start`; the space beneath it belongs to the
   block that follows, which hugs it. See the vertical rhythm section above. */
.study-divider { padding-block: 0; }
.study-divider h2 {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(2.5rem, 5.5vw, 64px); line-height: 1.2;
  letter-spacing: -.02em; text-transform: capitalize; color: var(--body-text);
  /* No rule under a divider. It is already the largest thing on the page and
     sits in its own band of space — the underline was doing nothing the size
     and spacing were not already doing. Section Titles keep theirs, because
     those sit inside a row and need the edge.

     The 24px that used to clear that underline went with it. Left in, it
     would stack under the following block's own top margin and push the
     divider 24px away from the content it is the heading for. */
  max-width: none;
}

/* `Block Quote` is its own component now — assets/css/quote.css, loaded only
   by pages that carry one. See docs/COMPONENTS.md. */

/* ---------------------------------- stats -------------------------------
   `Stats` — a number (with an optional delta pill), a subtitle naming the
   metric, and an optional description.

   26px, not the Figma's 32. A Stats value and a Project Text title are the
   same thing in the same place — the opening line of a column, often a
   numeral in both cases ("30+" above "Completed customer interviews", "01"
   above its finding) — and the design set them six pixels apart, which reads
   as a mistake rather than as a hierarchy. Vi asked for one size across that
   type of block, and for it to be the smaller one. A deliberate deviation
   from node 1602:11914; see docs/CASE-STUDY-REBUILD.md. */
.study-stat__value {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: 26px; line-height: 39px; font-weight: 500;
  letter-spacing: -.02em; color: var(--body-text);
  max-width: none;
}
.study-stat__label {
  margin-top: var(--space-l);
  font-size: 26px; line-height: 39px; font-weight: 500;
  letter-spacing: -.02em;
}
.study-stat .study-desc { margin-top: var(--space-l); }

/* -------------------------------- responsive ----------------------------
   TYPE only. The column tiers live with the grid at the top of this file, and
   nothing here may reintroduce a second list of spans — that duplication is
   what broke mobile and tablet.

   The old `.study-row > * + * { margin-top }` is gone with it. It was a stand-
   in for a row gap, and it could not survive a two-column tier: siblings that
   sit side by side in one row would each have taken a top margin. The grid's
   own `row-gap` does the job correctly at every tier. */
@media (max-width: 900px) {
  .study-lede { font-size: 21px; line-height: 1.5; }
  .study-text h3, .study-stat__label,
  .study-stat__value { font-size: 21px; line-height: 1.5; }
  .study-sectiontitle > h2 { font-size: 26px; line-height: 1.3; }
}