/* ===========================================================================
   Case-study "story scroller" — the pinned solutions-card layout
   (heading + ghost "Read the story" button, a border-t divider, the subhead,
   a full-bleed hero) with a pinned cross-fade added on top: the CENTRED card
   pins and content cross-fades one→next as you scroll (never two at once).
   The card look is 100% the prebuilt Tailwind classes (text-h3 font-main,
   bg-action-ghost-1, text-body-large, bg-surface-brand-secondary, …); this file
   only adds the pin/stack layout glue.
   Driver (index.astro): scroll position only SELECTS the active study; the
   cover-slide plays on its own clock (rAF + exponential converge — always
   completes, never rests half-way). No CSS transitions on the panels (Lenis
   stalls them mid-flight).
   =========================================================================== */

.dc-story { position: relative; }

/* Section header */
.dc-story-head { padding: 2.75rem 0 1.9rem; }
.dc-story-kicker {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; font-weight: 600;
  color: #5b6b86;
}
.dc-story-dash {
  display: inline-block; width: 38px; height: 3px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, #22d2a2, #1892e5, #0b44cf);
}
.dc-story-title {
  margin-top: 0.95rem; font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  line-height: 1.05; letter-spacing: -0.02em; color: #011c46; font-weight: 600;
}

/* Track = the runway the sticky card pins against: one 80vh "page" per
   TRANSITION (N-1 of them) + a HALF-slice (40vh) rest tail + 100vh viewport.
   The tail keeps the section pinned after the LAST swap completes, so the final
   card dwells at rest (~76vh, same as every middle card) instead of un-pinning
   mid-slide — without it the last cover-slide plays while the frame itself is
   already scrolling away (a compound double-motion). MUST stay in step with the
   slice mapping in index.astro's readTarget (p * (N - 0.5)).
   Keep vh (not dvh) so mobile URL-bar collapse doesn't jump the height. */
.dc-story-track { position: relative; height: calc((var(--n, 4) - 0.5) * 80vh + 100vh); }
.dc-story-sticky {
  position: sticky; top: 56px;
  /* Give the pinned card nearly the full viewport (the fixed nav is only ~49px) so
     the flex hero settles at ~landing-4 size (~640px tall) with the tag chips still
     below it. */
  height: min(calc(100dvh - 104px), 900px); min-height: 520px;
  display: grid; grid-template-columns: 1fr; justify-items: start;
}

/* -------- Pinned card (flat, bordered — like landing-4, not a floating card) -------- */
.dc-story-frame {
  position: relative; overflow: hidden;
  border: 1px solid #e4e8f1; border-radius: 12px; background: #fff;
  /* Full container width (was 80% flush-left — trying the founder's ask to
     use the dead right-side whitespace, 2026-07-21). */
  width: 100%;
}
.dc-story-panel {
  /* Opacity + transform + z-index are set per scroll frame by the driver in
     index.astro (a COVER-SLIDE: the incoming panel slides up over the still-solid
     outgoing one, both fully opaque — opacity cross-fades ghost a double-exposure
     at their midpoint), then eased to a solid settle when scrolling stops. No CSS
     transition (Lenis stalls it) — the softness comes from smootherstep easing in
     JS. `.active` opacity is the first-paint / fallback value; inline styles from
     JS override it. Solid background so the sliding panel fully covers the one
     beneath; the top shadow sells the "sheet covering" depth mid-slide (clipped
     by the frame's overflow at rest). */
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: #fff;
  box-shadow: 0 -18px 44px rgba(1, 28, 70, 0.16);
  will-change: opacity, transform;
}
.dc-story-panel.active { opacity: 1; pointer-events: auto; z-index: 2; }
/* the card body → a flex column so the image fills the pinned height. The
   image area is the flex spacer (so the tag chips always sit below it, never
   clipped), but it's inset with landing-4's p-6 gutter so it reads like the
   solutions card rather than a full-bleed strip. */
.dc-story-cardbody { display: flex; flex-direction: column; height: 100%; justify-content: center; }
.dc-story-cardbody > *:not(.dc-story-media) { flex: none; }
/* The hero is an IDENTICAL size on every panel — driven by viewport height (NOT by
   how long the title/subtitle are), so all panels show an identically-sized image.
   A 16:9 box over a 16:9 source ⇒ the full composite shows with no crop.
   FOLD MATH: the pinned card is min(100dvh−104px, 900px) and the title row + excerpt
   block eat ~224–250px before the media, so the media's cap must subtract that
   reserve or short laptops (768–900px tall) clip the card top AND media bottom into
   the frame's overflow:hidden. min(60vh, …) still governs ≥~1025px-tall viewports —
   identical to the old sizing there; calc(100dvh − 410px) takes over below that
   (measured worst fixed content ≈ 277px + 12px margin + slack, so ALL panels sit at
   the uniform cap). flex: 0 1 auto (not none) + min-height:0 is the last-resort
   valve: copy longer than the reserve compresses the media instead of clipping. */
.dc-story-media { flex: 0 1 auto; min-height: 0; height: min(60vh, 600px, calc(100dvh - 410px)); aspect-ratio: 16 / 9; max-width: calc(100% - 48px); margin: 0 auto 12px; overflow: hidden; border-radius: 6px; }
/* Narrow laptops (≤1365px wide): the 80%-width frame is tight enough that titles/
   excerpts wrap one line taller (fixed content ~305px, not ~277px) — grow the
   reserve so every panel still sits at one uniform cap instead of per-panel shrink. */
@media (min-width: 901px) and (max-width: 1365.98px) {
  .dc-story-media { height: min(60vh, 600px, calc(100dvh - 445px)); }
}
/* Narrowest desktop band (iPad landscape, small laptops): titles wrap 3–4 lines
   (fixed content up to ~410px) — largest reserve. */
@media (min-width: 901px) and (max-width: 1120.98px) {
  .dc-story-media { height: min(60vh, 600px, calc(100dvh - 530px)); }
}
.dc-story-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* tag-chip row: align with the heading's padding + give bottom breathing room */
.dc-story-tags { padding: 2px 16px 18px; }
@media (min-width: 768px) { .dc-story-tags { padding: 4px 24px 22px; } }

/* -------- Phones / tablets (≤900px): keep the SAME pinned cross-fade as desktop,
   just run the card full-width. Reduced-motion (below) still falls back to a
   plain static stack for accessibility / no-JS. -------- */
@media (max-width: 900px) {
  /* Section heading pins under the fixed nav for the whole pinned section, so
     "Trusted by leaders, globally." stays on screen while the studies swap
     (founder request for longer phones). Negative margins bleed the backdrop
     across the container's px-4 gutters so cards never peek through beside it. */
  .dc-story-head {
    position: sticky; top: 48px; z-index: 10;
    background: var(--color-surface-brand-primary, #fbfcfe);
    margin: 0 -1rem;
    padding: 0.9rem 1rem 0.8rem;
  }
  .dc-story-sticky {
    /* Centre the content-height card in the space BELOW the sticky heading.
       The floor is measured, not guessed: --dc-story-head-h is the heading's real
       height (set in index.astro, remeasured on resize), so the card clears it
       whether it wraps to two lines or three. 48px = the fixed nav the heading
       pins under, +12px breathing room. A hardcoded 116px floor used to sit ABOVE
       the heading's ~151px bottom edge, tucking the card title underneath it.
       The centring term uses ~210px ≈ half a real card (title + excerpt + button
       + 16:9 hero), so tall phones get balanced space instead of a top-heavy card
       with a big empty gap beneath. */
    top: max(calc(60px + var(--dc-story-head-h, 104px)), calc(50svh - 210px));
    height: auto;                                    /* content-driven — no dead space on tall phones */
    min-height: 0;
    gap: 0;
    align-items: start;
  }
  /* Grid-STACK the panels (instead of position:absolute): the frame sizes to the
     TALLEST panel and they overlap in one cell for the cross-fade — so the card
     hugs its content instead of a fixed 100dvh box that left big empty gaps above
     and below the copy on larger phones. */
  .dc-story-frame { display: grid; width: 100%; }    /* full-width card on mobile */
  .dc-story-panel { position: relative; inset: auto; grid-area: 1 / 1; }
  /* hero: tidy full-width 16:9 band inside the card gutter.
     Fold-aware, like the desktop rule above: the rest of the card (title + excerpt +
     button + padding) runs ~370–400px, so cap the hero to whatever the viewport has
     left under the sticky heading instead of letting the card overflow the bottom.
     svh is the toolbar-visible viewport, which is what actually constrains us on iOS.
     The img is object-fit:cover, so a shorter box CROPS rather than squashing, and on
     tall phones the cap exceeds the natural 16:9 height and does nothing. */
  .dc-story-media {
    flex: none; height: auto; width: calc(100% - 32px); max-width: none;
    aspect-ratio: 16 / 9; margin: 0 auto 10px;
    max-height: calc(100svh - var(--dc-story-head-h, 104px) - 450px);
    min-height: 104px;
  }
}

/* Genuinely tiny viewports only — in practice a phone in LANDSCAPE, where a sticky
   heading plus a full card is hopeless: let the heading scroll away and give the card
   everything. Keep this threshold LOW. It was 740px, which looked safe against device
   heights (an iPhone SE is 667pt tall) but is not: iOS Safari's viewport, after the top
   bar and the bottom URL bar, is only ~660–740px even on the largest iPhones. At 740px
   this rule fired on nearly every phone and killed the sticky heading site-wide — the
   opposite of the intended design. Portrait phones must never match this. */
@media (max-width: 900px) and (max-height: 560px) {
  .dc-story-head { position: static; }
  .dc-story-sticky { top: 60px; }
}

/* -------- Reduced motion: no pin, all panels visible/stacked -------- */
@media (prefers-reduced-motion: reduce) {
  .dc-story-track { height: auto !important; }
  .dc-story-sticky { position: static !important; height: auto !important; min-height: 0 !important; }
  .dc-story-frame { display: block !important; }                /* undo the mobile grid-stack */
  .dc-story-panel { position: static !important; grid-area: auto !important; opacity: 1 !important; pointer-events: auto !important; border-bottom: 1px solid #e4e8f1; box-shadow: none !important; }
  .dc-story-panel:last-child { border-bottom: 0; }
  .dc-story-media { flex: none; height: auto; aspect-ratio: 16 / 9; max-width: none; margin: 0; }
}