/* ============================================================
   Kestrel — mobile / small-screen layer
   Loaded LAST so it can override earlier rules. Two jobs:
     1. Global polish — shrink the (un-clamped) type-scale tokens and the
        section rhythm so the whole site feels designed for a phone.
     2. Targeted reflow — utility classes (.m-*) attached to inline-style
        grids/flex that fixed pixel columns would otherwise push off-screen.
        These use !important on purpose: an author !important rule is the only
        thing that beats an element's inline `style=""`, and that is exactly
        what the data pages render their grids with.
   Everything here is wrapped in a max-width media query, so desktop is
   untouched.
   ============================================================ */

/* ---------------------------------------------------------------
   1. GLOBAL TYPE SCALE — the tokens in colors_and_type.css are fixed px
   (h1 56, h2 40, metric 96…). Re-point them on small screens and every
   heading / figure that reads the token shrinks in one move.
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --fs-display-xl: 50px; --lh-display-xl: 54px;
    --fs-display-lg: 38px; --lh-display-lg: 42px;
    --fs-display-md: 29px; --lh-display-md: 35px;
    --fs-serif-moment: 40px; --lh-serif-moment: 44px;
    --fs-metric-xl: 60px; --lh-metric-xl: 64px;
    --fs-metric-lg: 42px; --lh-metric-lg: 46px;
    --fs-h1: 26px; --lh-h1: 32px;
    --fs-h2: 20px; --lh-h2: 27px;
    --fs-body-lg: 17px; --lh-body-lg: 27px;
    --fs-annotation: 18px; --lh-annotation: 24px;
  }
  /* The big Spade stat figure is a hardcoded 72px, not a token. */
  .stat-frame .sf-value { font-size: 46px; line-height: 0.95; }
}
@media (max-width: 430px) {
  /* One column for the stat band here — give the figure room to breathe. */
  .stat-frame .sf-value { font-size: 52px; }
  .sc-headline-value { font-size: 44px !important; }
}

/* ---------------------------------------------------------------
   2. SECTION RHYTHM — 120px top+bottom is a lot of dead space on a phone.
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  .section { padding: 72px 0; }
  .section.first { padding-top: 56px; }
  .section.tight { padding: 52px 0; }
  .site-wrap { padding: 0 20px; }
}

/* ---------------------------------------------------------------
   3. REFLOW UTILITIES — attached to inline-style grids/flex in the JSX.
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Any two-column split (content|visual, 1fr 1fr, 1.1fr 1fr, label|content)
     → stack. Cap the gap so a wide desktop column-gap doesn't become a huge
     vertical hole once stacked. */
  .m-1col { grid-template-columns: 1fr !important; gap: clamp(22px, 6vw, 38px) !important; }

  /* 3–4 column stat / card grids → 2 across on a phone… */
  .m-grid2 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Rigid flex child (real content that must stay) → full width, allow shrink. */
  .m-flexfull { flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important; }

  /* Decorative / duplicative floating-label panels → drop on small screens,
     matching how .hero-scene-wrap and .kc-hero-chips already behave. */
  .m-hide { display: none !important; }

  /* Dark hero panels carry generous (40px+) inline side padding that swallows a
     phone's width — pull it in so the headline + copy get room. */
  .m-hero-pad { padding: 26px 22px 32px !important; }

  /* Large fixed inline heading sizes (e.g. a 58px company name) → fluid + capped
     so long names wrap instead of overflowing the clipped dark panel. */
  .m-bigh { font-size: clamp(32px, 11vw, 58px) !important; }

  /* Wide internal data table → let it scroll horizontally inside its card
     instead of pushing the page. Children keep a usable min width. */
  .m-xscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .m-xscroll > * { min-width: 720px; }

  /* StatGrid crosshair "+" marks are positioned in JS from the desktop column
     count; once the grid reflows they no longer line up — hide them. */
  .sg-cross { display: none !important; }

  /* Section headers render as [title | Expand/Collapse toggle] in a no-wrap
     space-between flex row; a long title pushes the (flex-shrink:0) button off
     the right edge. Let the header wrap — whether the toggle sits directly in
     it (most sections) or inside a [Download CSV][Expand] button group (source
     provenance). Scoped to the toggle attribute so nothing else is affected. */
  #root div:has(> [data-toggle-btn]),
  #root div:has(> div > [data-toggle-btn]) { flex-wrap: wrap; row-gap: 10px; }
}
@media (max-width: 480px) {
  /* …then a single column on the smallest screens. */
  .m-grid2 { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------
   4. SAFETY NETS
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Nothing should be able to force the page wider than the screen. */
  #root img { max-width: 100%; height: auto; }
  /* Comfortable tap target for the small icon buttons / source pills. */
  .kc-iconbtn { width: 32px; height: 32px; }

  /* Mono eyebrows are inline-flex (sized to their text), so a long one like
     "AUSTRALIA · IRON, COPPER, COAL" overflows a narrow hero. Let it fill the
     column and wrap. Short eyebrows are unaffected. */
  .mono-eyebrow { display: flex; flex-wrap: wrap; }

  /* Hero deck — the stacked-card shuffle is driven by desktop-nav hover, which
     never fires on a hamburger/touch layout. So drop the fixed card height (it
     clipped the longer hero copy on narrow screens), let the deck flow to its
     content, and show only the front card. */
  .hero-deck { height: auto; }
  .hero-deck-card { position: relative; }
  .hero-deck-card:not(:first-child) { display: none; }
  .hero-deck-inner { height: auto; gap: 28px; }
}