/* mobile.css — small-screen refinements layered on top of the JS mobile adapter.
   Uses !important where it must beat inline styles (all page styling is inline). */

@media (max-width: 768px) {

  /* 0 · guard against horizontal bleed (e.g. the About capabilities marquee).
     Safe on mobile: sticky rails are already made static by the JS adapter. */
  body { overflow-x: hidden; }

  /* 1 · Home hero — keep the eyebrow / headline clear of the fixed global nav.
     (The adapter shrinks the hero and centres it, which tucked the eyebrow
     under the translucent header on load.) */
  [data-hero] {
    align-items: flex-start !important;
    min-height: auto !important;
    padding-top: 104px !important;
    padding-bottom: 52px !important;
  }

  /* 1b · Home "Points of view" rows — a little more breathing room when stacked. */
  [data-pov-row] {
    padding: 22px 0 !important;
    row-gap: 12px !important;
  }
  [data-pov-row] > span:last-child { text-align: left !important; }

  /* 2 · Work index — always render TEXT first, then the visual, so a visual is
     never stacked on another visual without its context. Works for the inverted
     (visual-left) rows too by pushing the media child to the end. */
  [data-work-row] > div:has(video),
  [data-work-row] > div:has(img) { order: 2; }

  /* 3 · Framework diagrams — keep their true desktop form, just scaled down to
     fit (like the SharkNinja image diagrams) instead of reflowing to mush.
     The JS adapter leaves [data-figure] subtrees untouched and sizes/zooms the
     figure itself (CSS `zoom: calc()` isn't supported, so it's done in JS). */

  /* 3b · 1px divider lines drawn by grid gaps vanish to sub-pixel when a figure
     is scaled down; give them enough width to survive the zoom. */
  [data-figure][style*="gap:1px"],
  [data-figure] [style*="gap:1px"],
  [data-figure][style*="gap: 1px"],
  [data-figure] [style*="gap: 1px"] { gap: 2px !important; }

  /* 3c · comfortable clearance below the fixed global nav for page intros
     (Work index + Points-of-view index & essays), matching the Home hero. */
  [data-top-pad] { padding-top: 96px !important; }

  /* 4 · Case-study "next step" band — keep the Index / Next-case panels side by
     side on mobile (the editorial POV pager keeps its own stacked treatment). */
  [data-case-nav] { grid-template-columns: 1fr 1fr !important; }
  [data-case-nav] > a { padding: 24px 16px !important; }
  [data-case-nav] span[style*="clamp"] { font-size: clamp(15px, 4.5vw, 28px) !important; }
}