/*
  EIB / Loan Grading case page styles.

  Loaded only on this page, via the pageStylesheets front-matter field
  in src/cases/eib.njk, after case-shared.css (see the comment in
  base.njk for how pageStylesheets works, and case-shared.css's own
  header for the furniture/content-rhythm split this follows).

  IMPORTANT: like case-eif.css and case-frits.css, this file does NOT
  re-apply .site-canvas - base.njk's <main> already does that once.

  EIB is Format B (reasoning-led, same as EIF): text carries, diagrams
  interrupt and prove. It reuses EIF's Format B content-rhythm numbers
  directly (80px section gap, 700px body max-width, 1.5 line-height,
  20px H2 margin, 48px hero title margin) rather than re-deriving them
  - see docs/iteration-protocol.md's locked-values section and the
  plan this page was built from.

  ONE STRUCTURAL DIFFERENCE FROM EIF AND FRITS, confirmed in
  docs/Prompt_EIB_Claude_Design.md: this case has no sticky sidebar.
  Sections 02 and 03 are two complementary functions built on one
  modal pattern (not a sequence), presented as a paired block under a
  shared "02 + 03" label instead of two stacked sections - that
  pairing is the reason a sidebar does not fit this page, not an
  arbitrary omission. There is therefore no .case-layout/.case-sidebar
  here, just a single reading column.

  TWO CONFIRMED CORRECTIONS AGAINST THE WRITTEN DOCS, found by decoding
  the real page markup out of reference/EIB Case Mobile standalone.html
  (its <script type="__bundler/template"> block holds the full built
  page as a JSON-encoded string - the actual source of truth here, the
  same kind of doc/build mismatch the EIF session already ran into):
    1. Sections are numbered 01-05, not 02-06 as docs/Case_EIB.md's
       older numbering scheme has it (01 The Challenge, 02 the modal
       decision, 03 the contract/input decision, 04 Validation and
       approach, 05 Result and reflection).
    2. The closing block reads "NEXT CASE - EIF" and links back to
       /cases/eif-bmvx/, not "BACK TO WORK" as
       docs/Prompt_EIB_Claude_Design.md's initial brief specified -
       this also closes the case ring (EIF -> Frits -> EIB -> EIF).

  No lightbox on this page: the only raster images are the two hero
  screenshots, and both EIF and Frits deliberately exclude their hero
  from the lightbox ("branding, not a figure" - see
  case-frits-lightbox.js's header). EIB has no other real-image
  figure, so it ships with no lightbox script or overlay CSS at all.

  File order: hero, section text rhythm, figure/caption/legend/callout
  primitives shared by all three diagrams, the flow diagram (section
  01), the "fake UI" mock-panel primitives shared by all three
  comparison figures, the paired 02+03 block, then the 768px
  responsive pass.
*/

/* ==========================================================================
   1. Hero
   ========================================================================== */

.case-hero {
  padding-block: 48px 40px;
}

.case-hero__eyebrow {
  color: var(--color-accent);
  margin: 0 0 20px;
}

.case-hero__title {
  /* Format B numbers, reused from EIF directly (see file header). */
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  max-width: 900px;
  margin: 0 0 48px;
  text-wrap: balance;
}

/* Two overlapping product-screenshot composite, sized to Format B's
   locked 584px hero height at the 1200px content column
   (aspect-ratio 1200/584, see docs/iteration-protocol.md). Both
   images sit at percentages of this box, not fixed pixel offsets, so
   the composite scales proportionally down to the 768px breakpoint
   the same way EIF's hero does.

   The percentages below come directly from the real export's hero
   scene, which is authored as a 1200x600 box (64,24,800,470 for the
   background card; 560,216,520,298 for the foreground card). Both
   cards' content ends at y=514, well inside the locked 584px height,
   so building this box 16px shorter than the export's own 600px only
   removes empty trailing white space, not any part of either image -
   reuse, no exception, per the plan this page was built from. */
.case-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 584;
}

.case-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px; /* locked sitewide value, NOT the export's own 14px */
}

.case-hero__image--background {
  position: absolute;
  left: 5.333%;
  top: 4.11%;
  width: 66.667%;
  height: 80.48%;
  box-shadow:
    0 20px 44px rgba(11, 26, 58, 0.13),
    0 6px 14px rgba(11, 26, 58, 0.07);
}

.case-hero__image--foreground {
  position: absolute;
  left: 46.667%;
  top: 36.99%;
  width: 43.333%;
  height: 51.03%;
  box-shadow:
    0 16px 34px rgba(11, 26, 58, 0.18),
    0 5px 12px rgba(11, 26, 58, 0.09);
}

/* ==========================================================================
   2. Sections: text rhythm
   ========================================================================== */

.case-article {
  padding-block: 80px 64px;
}

.case-section {
  padding-block: 40px;
  scroll-margin-top: 24px;
}

.case-article > .case-section:first-child {
  padding-top: 0;
}

.case-section__number {
  color: var(--color-accent);
  margin: 0 0 8px;
}

.case-section__heading {
  font-size: 30px;
  margin: 0 0 20px;
  text-wrap: balance;
}

.case-section__text {
  font-size: 18px;
  max-width: 700px;
  margin: 0 0 20px;
}

.case-section__text:last-child {
  margin-bottom: 0;
}

/* Section 05, Result and reflection: same blue left-accent treatment
   as EIF's closing section, no grey box (confirmed in
   docs/Prompt_EIB_Claude_Design.md's correction round). */
.case-reflection {
  margin-top: 0;
  padding: 0 0 0 32px;
  border-left: 3px solid var(--color-accent);
}

/* Thin divider between section 01 and the 02+03 pair, and between the
   pair and section 04 - matches the reference screenshot, which rules
   off the pair block on both sides rather than relying on the 80px
   gap alone (the pair is visually denser than a single section). */
.case-article > .case-divider {
  margin-block: 40px;
}

/* ==========================================================================
   3. Figure, caption, legend and callout primitives
   Shared by all three redrawn diagrams (section 01's flow, and the
   two comparison figures in the 02+03 pair) - one visual vocabulary,
   per docs/Diagramtaal.md, not redefined per diagram.
   ========================================================================== */

/* Outer wrapper: sizes itself to the reading column and clips the
   scaled-down inner content. Diagrams are authored at a fixed pixel
   width (see each diagram's own comment below) because their internal
   layout is hand-positioned, not fluid - case-eib-figscale.js scales
   the whole thing down with a CSS transform when the available column
   is narrower than that fixed width, the same technique the real
   Design export itself uses. With JS disabled the diagram simply
   keeps its natural size and this wrapper's overflow-x:auto lets the
   reader scroll to see the rest, instead of clipping it. */
.case-eib-figure {
  margin: 32px 0;
  overflow-x: auto;
}

.case-eib-figure__inner {
  position: relative;
  transform-origin: top left;
}

.case-eib-cap {
  margin: 20px 0 0;
  max-width: 520px;
  padding-left: 18px;
  border-left: 2px solid var(--color-accent);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-title);
}

/* Legend row below a diagram: small swatch + all-caps mono label per
   entry. Each diagram lists only the entries it actually uses. */
.case-eib-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  height: 36px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #dce4f7;
}

.case-eib-legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.case-eib-legend__label {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8a8a;
  white-space: nowrap;
}

.case-eib-legend__swatch {
  flex: none;
}

.case-eib-legend__swatch--line {
  width: 22px;
  height: 1px;
  background: #111111;
}

.case-eib-legend__swatch--dashed {
  width: 22px;
  height: 0;
  border-top: 1px dotted #9aa8c7;
}

.case-eib-legend__swatch--diamond {
  width: 22px;
  height: 14px;
}

.case-eib-legend__swatch--pill {
  width: 24px;
  height: 12px;
  border-radius: 6px;
  background: var(--color-accent);
}

.case-eib-legend__swatch--open {
  width: 22px;
  height: 0;
  border-top: 2px solid var(--color-accent);
}

.case-eib-legend__swatch--surface {
  width: 20px;
  height: 12px;
  border: 1px solid var(--color-accent);
}

.case-eib-legend__swatch--page {
  width: 20px;
  height: 12px;
  border: 1px solid #dce4f7;
}

.case-eib-legend__swatch--content {
  width: 22px;
  height: 5px;
  background: #dce4f7;
}

.case-eib-legend__swatch--emphasis {
  width: 22px;
  height: 5px;
  background: #8fa8e4;
}

.case-eib-legend__swatch--dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.case-eib-legend__swatch--row {
  width: 9px;
  height: 9px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
}

/* Numbered callout: a dot, a leader line, then the number, pointing
   from a spot on a mock UI panel out to its note below. The line's
   own length is diagram-specific geometry (how far the callout has to
   travel to clear the panel), so it stays as an inline width on the
   element itself, same as the real export's own callouts - only the
   position (left/top or right/bottom) is set inline per instance too,
   for the same reason a hand-placed diagram label always is. */
.case-eib-callout {
  position: absolute;
  display: flex;
  align-items: center;
}

.case-eib-callout__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
}

.case-eib-callout__line {
  height: 1px;
  background: var(--color-accent);
  flex: none;
}

.case-eib-callout__number {
  margin-left: 7px;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

/* Notes list under a comparison figure: one row per callout number,
   number then a short sentence explaining what it points at. */
.case-eib-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.case-eib-notes__item {
  display: flex;
  gap: 8px;
}

.case-eib-notes__number {
  flex: none;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-accent);
}

.case-eib-notes__text {
  font-size: 12.5px;
  line-height: 1.5;
  color: #0b1a3a;
}

/* ==========================================================================
   4. Section 01 diagram: fixed vs. open flow
   940x705, redrawn from reference/css-en-js/eib-diagram-markup.html
   (the flow-chart SVG connectors) plus the fuller node/label geometry
   decoded from reference/EIB Case Mobile standalone.html - see the
   file header. Follows docs/Diagramtaal.md: pill start/end, rectangle
   steps, diamond decisions via SVG polygon (not a rotated square),
   black 1px connectors, glow only behind decisions and the persisted
   end-state.

   Structure: three horizontal "band" rules divide the flow into what
   was fixed and what was open to design (the case's actual point, see
   section 01's own text). Nodes are absolutely positioned inside
   .case-flow at the export's own coordinates - to move a node, edit
   its left/top here, nothing else needs to change. The connector
   lines live in one SVG layer on top, sized to the same 940x705 box.
   ========================================================================== */

.case-flow {
  position: relative;
  width: 940px;
  height: 705px;
}

/* Every other child of .case-flow (bands, connectors, nodes) is
   deliberately position:absolute, hand-placed at its own exact
   coordinate in the 940x705 frame (see the comment above). The
   legend is the one child that stays in normal flow everywhere else
   this shared component is used (the 02/03 comparison figures, where
   it correctly sits below their own normal-flow content) - but with
   nothing else in normal flow here to push it down, it would collapse
   to the very top of the frame and sit on top of the first band
   label. Anchoring it to the frame's own bottom edge instead matches
   the real Design export's own technique for this exact diagram. */
.case-flow > .case-eib-legend {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 940px;
  margin-top: 0;
}

.case-flow__band {
  position: absolute;
  left: 0;
  width: 940px;
  padding-top: 8px;
  border-top: 1px solid #dce4f7;
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #8a8a8a;
}

.case-flow__band--open {
  border-top: 2px solid var(--color-accent);
  color: var(--color-accent);
}

.case-flow__connectors {
  position: absolute;
  inset: 0;
  width: 940px;
  height: 705px;
}

/* Glow behind decisions and the persisted end-state only, per
   Diagramtaal.md - a signal, not decoration on every node. Sits
   behind the node via a negative z-index-free trick: an absolutely
   positioned pseudo-element the same size as the node, blurred. */
.case-flow__node {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-accent);
  background: #f1f4fa;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.24;
  color: #0b1a3a;
  text-align: center;
  padding-inline: 12px;
}

.case-flow__node--pill {
  border-radius: 26px;
  padding-inline: 16px;
}

.case-flow__node--left {
  justify-content: flex-start;
  text-align: left;
  padding-inline: 14px;
}

.case-flow__node--glow {
  filter: drop-shadow(0 0 14px rgba(14, 66, 216, 0.45));
}

.case-flow__node--success {
  border: none;
  border-radius: 24px;
  background: var(--color-accent);
  color: #ffffff;
}

.case-flow__node--discard {
  border: 1px dotted #9aa8c7;
  background: none;
  color: #6b7da8;
}

/* Decision diamonds are an SVG polygon (per Diagramtaal.md, never a
   CSS-rotated square) with the label as plain centered text on top -
   two absolutely positioned children of the same box. */
.case-flow__diamond {
  position: absolute;
}

.case-flow__diamond-label {
  position: absolute;
  inset: 0; /* centers the label over the whole diamond bounding box - without this it has no offsets and falls into normal flow below the diamond's <svg> instead of over it */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: 34px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.24;
  color: #0b1a3a;
}

.case-flow__branch-label {
  position: absolute;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #6b7da8;
}

/* Mobile-only flow variant: the export's own second, hand-built
   460px flex-column redraw of the same flow, shown below 768px in
   place of the 940px wide version above (see the responsive pass at
   the bottom of this file) - not the wide diagram squeezed smaller,
   a genuinely different, taller single-column arrangement, matching
   the real mobile reference exactly rather than approximating it. */
.case-flow-mobile {
  display: none;
  width: 460px;
  flex-direction: column;
  gap: 16px;
}

.case-flow-mobile__band {
  width: 460px;
  padding-top: 8px;
  border-top: 1px solid #dce4f7;
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #8a8a8a;
}

.case-flow-mobile__band--open {
  border-top: 2px solid var(--color-accent);
  color: var(--color-accent);
}

.case-flow-mobile__col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.case-flow-mobile__row {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: flex-start;
}

.case-flow-mobile__branch {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.case-flow-mobile__branch-label {
  margin-bottom: 6px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #6b7da8;
}

.case-flow-mobile__node {
  box-sizing: border-box;
  border: 1px solid var(--color-accent);
  background: #f1f4fa;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
  color: #0b1a3a;
  text-align: center;
}

.case-flow-mobile__node--pill {
  width: 300px;
  border-radius: 26px;
}

.case-flow-mobile__node--success {
  width: 190px;
  border: none;
  border-radius: 24px;
  background: var(--color-accent);
  color: #ffffff;
}

.case-flow-mobile__node--discard {
  width: 150px;
  border: 1px dotted #9aa8c7;
  background: none;
  color: #6b7da8;
}

/* Connector: a 1px vertical stem with a small triangular arrowhead,
   built in plain CSS (border-triangle trick) instead of SVG - simpler
   for a single straight vertical link than a whole marker/path setup. */
.case-flow-mobile__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 24px;
}

.case-flow-mobile__connector-stem {
  width: 1px;
  flex: 1;
  background: #111111;
}

.case-flow-mobile__connector-head {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #111111;
}

.case-flow-mobile__diamond {
  position: relative;
  width: 260px;
  height: 84px;
}

.case-flow-mobile__diamond-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: #0b1a3a;
}

/* ==========================================================================
   5. Mock UI panel primitives
   Shared "fake interface" building blocks for all three comparison
   figures (accordion vs. modal in section 02's pair figure, contract
   level vs. input level in section 03's). Represent real screens at
   the level of their structure (a header, a field row, a results
   list with a checkbox column, footer actions) rather than
   reproducing every export div - the same simplification EIF's own
   redrawn wireframe diagram uses (case-eif.css section 5c).
   ========================================================================== */

.case-mock {
  box-sizing: border-box;
  width: 400px;
  height: 267px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

/* The panel IS the active surface: accordion (V1), and both modal
   cards that are the whole panel rather than floating over one
   (contract level A, input level B). */
.case-mock--surface {
  /* Positioned so a numbered callout (see .case-eib-callout below)
     nested directly inside a panel like this one anchors to the
     panel itself, not to some further-out ancestor. */
  position: relative;
  border: 1px solid var(--color-accent);
}

/* The panel is a receded page sitting behind a floating modal (V2
   only) - low-opacity placeholder content, thin neutral border. Also
   positioned, same reason as .case-mock--surface above. */
.case-mock--page {
  position: relative;
  border: 1px solid #dce4f7;
}

.case-mock__page-content {
  position: absolute;
  inset: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0.35;
}

/* The floating modal card itself, inset within .case-mock--page. */
.case-mock__overlay {
  position: absolute;
  left: 26px;
  top: 30px;
  right: 26px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-accent);
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(11, 26, 58, 0.18);
}

.case-mock__header {
  flex: none;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 12px;
  border-bottom: 1px solid var(--color-accent);
}

/* Modal header: filled blue bar with a close affordance, instead of
   the accordion's plain light header. */
.case-mock__header--modal {
  height: 28px;
  border-bottom: none;
  background: var(--color-accent);
}

.case-mock__header-bar {
  height: 6px;
  background: #dce4f7;
}

.case-mock__header--modal .case-mock__header-bar {
  background: #ffffff;
}

.case-mock__close {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  transform: rotate(45deg);
}

/* Accordion's own collapse chevron, on its one active/expanded row. */
.case-mock__collapse {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-left: 1px solid var(--color-accent);
  border-top: 1px solid var(--color-accent);
  transform: rotate(45deg);
}

.case-mock__body {
  flex: 1;
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-mock__field-pair {
  display: flex;
  gap: 10px;
}

.case-mock__field {
  flex: 1;
  border: 1px solid #dce4f7;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* A single bar-plus-value pair, the mock-data equivalent of a label
   above a filled-in value (used inside search-field groups). */
.case-mock__bar {
  height: 5px;
  background: #dce4f7;
}

.case-mock__bar--emphasis {
  height: 6px;
  background: #8fa8e4;
}

.case-mock__label {
  font-family: var(--font-label);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.case-mock__list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.case-mock__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #dce4f7;
}

.case-mock__row--plain {
  border-bottom: none;
}

.case-mock__checkbox {
  flex: none;
  width: 9px;
  height: 9px;
  border: 1px solid #8fa8e4;
}

.case-mock__checkbox--checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.case-mock__cell {
  height: 5px;
  background: #dce4f7;
}

/* Highlighted row, used for the one selected search result in the
   contract/input-level panels and the active row in the accordion. */
.case-mock__row--active {
  border: 1px solid var(--color-accent);
  background: #f1f4fa;
  padding: 0 10px;
  height: 24px;
  box-sizing: border-box;
}

/* The "Selected Contracts" sub-panel, section 03's B panel only - a
   nested bordered box reviewing what has been picked so far, absent
   from the contract-level (A) panel by design (see that section's
   caption). */
.case-mock__subpanel {
  border: 1px solid var(--color-accent);
  background: #f1f4fa;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.case-mock__subpanel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-mock__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.case-mock__btn {
  height: 16px;
  border-radius: 8px;
}

.case-mock__btn--ghost {
  border: 1px solid #8fa8e4;
}

.case-mock__btn--primary {
  background: var(--color-accent);
}

/* ==========================================================================
   6. The 02+03 pair
   Sections 02 and 03 are two complementary functions on one modal
   pattern (see the file header), so they share one label and sit
   side by side rather than stacked - the one legitimate reason this
   page's structure departs from EIF/Frits. Confirmed in
   docs/Prompt_EIB_Claude_Design.md's correction round: this block is
   allowed to run wider than the other sections' 940px cap, so it is
   NOT wrapped in the 940px .case-section - it uses the full 1200px
   content column instead.
   ========================================================================== */

.case-pair {
  padding-block: 40px;
  border-top: 1px solid #14181f;
}

.case-pair__label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 34px;
}

.case-pair__label-number {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.case-pair__label-text {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b6472;
}

.case-pair__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
}

.case-pair__col {
  min-width: 0;
}

/* Each comparison figure spans BOTH text columns and sits below them,
   at its own natural (up to 940px) width, left-aligned rather than
   stretched to fill 1200px - confirmed directly against
   reference/screenshots/eib.png: both figures render at their full
   940px natural size there, well short of the 1200px pair width, not
   scaled up to match it.

   min-width:0 matters here for a different reason than on
   .case-pair__col above: this item contains the fixed-940px
   .case-eib-figure, and a grid item's default min-width is auto (its
   own content's min-content size), which would otherwise force this
   track to grow to fit that 940px content instead of respecting the
   grid's own 1fr column - especially visible at the 768px breakpoint,
   where the grid collapses to a single, much narrower column. Without
   this, case-eib-figscale.js measures a false, oversized "available"
   width from the overflowing track and never scales the diagram down
   to fit the real mobile column - caught in QA-check. Same fix the
   real Design export's own CSS applies for the same reason
   (`.eib-pair-grid > * { min-width: 0; }`). */
.case-pair__figure {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Small "NN LABEL" heading above each comparison figure (e.g. "02
   ACCORDION AGAINST MODAL") - present in the desktop reference
   screenshot but not carried in the reference mobile markup, so it is
   reconstructed here from the screenshot directly. */
.case-pair__figure-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}

.case-pair__figure-number {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.case-pair__figure-label {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a8a;
}

/* Row of two mock panels inside a comparison figure (V1/V2, A/B). */
.case-cmp-row {
  position: relative;
  display: flex;
  gap: 60px;
}

.case-cmp-panel {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-cmp-panel__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dce4f7;
}

.case-cmp-panel__variant {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.case-cmp-panel__variant-name {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8a8a;
}

/* Centred rule-and-label header above section 03's comparison figure
   ("ONE MODAL PATTERN - TWO SELECTION LEVELS"), not used in section
   02's figure. */
.case-cmp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.case-cmp-header__rule {
  flex: 1;
  border-top: 1px solid var(--color-accent);
}

.case-cmp-header__label {
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}

/* ==========================================================================
   7. 768px responsive pass
   ========================================================================== */

@media (max-width: 767px) {
  .case-hero__title {
    font-size: 30px;
    margin-bottom: 32px;
  }

  .case-article {
    padding-block: 56px 40px;
  }

  .case-section__heading {
    font-size: 23px;
  }

  .case-section__text {
    font-size: 16px;
    line-height: 1.68;
    max-width: none;
  }

  /* Wide desktop flow diagram hides, the export's own mobile-built
     stacked variant takes over - see .case-flow-mobile above. */
  .case-flow {
    display: none;
  }

  .case-flow-mobile {
    display: flex;
  }

  .case-pair {
    padding-block: 32px;
  }

  .case-pair__label {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 26px;
  }

  .case-pair__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  /* Panels stack instead of sitting side by side - same breakpoint
     problem as Frits' before/after pair, solved the same way. */
  .case-cmp-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
  }

  .case-eib-cap {
    max-width: none;
    padding-left: 14px;
    margin-top: 16px;
  }

  .case-reflection {
    padding-left: 20px;
  }
}