/*
 * Mobile overrides — static file served verbatim from /public.
 *
 * Tailwind v4's lightningcss strips substring attribute selectors
 * (`[style*="…"]`) from globals.css, and Next.js's head system was
 * dropping the equivalent inline <style dangerouslySetInnerHTML/>
 * from the root layout. So the whole @media block lives here and is
 * pulled with a plain <link rel="stylesheet"> that bypasses both.
 *
 * Everything is guarded by `@media (max-width: 767px)`, so the CSSOM
 * above 767px is byte-identical to the desktop build.
 */

@media (max-width: 767px) {
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* Any grid that encodes columns as inline `minmax(0, …)` — every v3
     hero split, filter rail + content, home Row 1, editorial band —
     collapses to one column. Auto-fit/auto-fill grids don't use this
     substring so they stay responsive. */
  [style*="minmax(0, "] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  main.mx-auto {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 14px !important;
    max-width: 100vw !important;
  }

  main h1 {
    font-size: clamp(20px, 6.5vw, 28px) !important;
    letter-spacing: -0.008em !important;
    line-height: 1.15 !important;
  }

  /* React can serialise inline font-size with or without a space
     after ":" — cover both variants. */
  [style*="font-size: 76px"], [style*="font-size:76px"] { font-size: 40px !important; }
  [style*="font-size: 68px"], [style*="font-size:68px"] { font-size: 40px !important; }
  [style*="font-size: 42px"], [style*="font-size:42px"] { font-size: 30px !important; }
  [style*="font-size: 40px"], [style*="font-size:40px"] { font-size: 28px !important; }
  [style*="font-size: 38px"], [style*="font-size:38px"] { font-size: 26px !important; }
  [style*="font-size: 36px"], [style*="font-size:36px"] { font-size: 24px !important; }
  [style*="font-size: 34px"], [style*="font-size:34px"] { font-size: 24px !important; }

  .panel-shell--hero > div {
    padding: 16px 14px !important;
  }
  .panel-shell > header {
    padding: 9px 12px !important;
  }
  .panel-shell {
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  header.sticky > div {
    gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  main > aside[class*="rounded"] {
    padding: 18px 16px !important;
  }

  a:hover { background: transparent; }
}