/* Mobile overrides only. Every rule is scoped inside the media query below,
   so nothing here has any effect above the breakpoint — desktop layout is
   untouched. Tag selectors (h1/h2/h3/nav/figcaption) are safe as-is.
   Everything else uses a `class` hook added alongside the existing inline
   style, because this page's component runtime re-serializes inline styles
   through the DOM (colons gain spaces, hex colors become rgb(), bare 0
   becomes 0px), so [style*="..."] selectors can't reliably match the
   rendered attribute. !important is required either way since inline
   styles otherwise win.

   .mobile-scroll-hint is hidden by default (outside the media query) since
   it's a real element in the markup, not just a style override — it must
   not appear above the breakpoint. */
.mobile-scroll-hint { display: none; }

@media (max-width: 768px) {

  /* ---- Nav ---- */
  nav {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    gap: 10px !important;
  }
  .mobile-navname {
    font-size: 14px !important;
  }
  .mobile-navbtn {
    padding: 7px 12px !important;
    font-size: 11px !important;
  }
  /* keeps Home/Contact pinned to the right edge even when the nav wraps
     to a second line on very narrow screens — a wrapped flex line with
     only one item otherwise falls back to the start of that line */
  .mobile-navbtns { margin-left: auto !important; }

  /* ---- Section container padding ---- */
  .mobile-section {
    padding: 44px 18px 0 !important;
  }

  /* ---- Headings (one size per tag, shared across all pages) ---- */
  h1 { font-size: 30px !important; }
  h2 { font-size: 20px !important; white-space: normal !important; }
  h3 { font-size: 16px !important; }

  /* ---- Home hero box ---- */
  .mobile-hero { padding: 30px 22px !important; }
  /* fluid instead of the generic h1 rule, so the full name stays on one
     line down to narrow phones instead of breaking mid-word */
  .mobile-heroname { font-size: clamp(20px, 7.2vw, 28px) !important; }
  /* match the space below the hero box to the section's own top padding
     (44px) so the gap above and below the box reads as equal */
  .mobile-hero-gap { margin-bottom: 44px !important; }

  /* ---- Card / image grids: collapse to a single column ----
     (data tables are untouched — they already use horizontal
     scroll via overflow-x:auto + min-width, unaffected here) */
  .mobile-stack { grid-template-columns: 1fr !important; }
  .mobile-nospan { grid-row: auto !important; }
  /* grid-auto-rows: auto is required, not just align-items:start — with
     minmax(0, 1fr) and no definite container height, the CSS Grid spec
     sizes every implicit "1fr" row track to match the TALLEST one, so
     shorter cards would otherwise leave dead space below them even
     though the card itself isn't stretching. */
  .mobile-nostretch { align-items: start !important; grid-auto-rows: auto !important; }
  .mobile-nostretch-item { height: auto !important; }

  /* fixed-height figure images inside the grids above */
  .mobile-fitimg { max-width: 100% !important; }

  /* ---- Hero buttons: slightly smaller ---- */
  .mobile-herobtn {
    padding: 11px 22px !important;
    font-size: 12px !important;
  }

  /* ---- Subtitles/captions under images and videos: centered ---- */
  figcaption { text-align: center !important; }
  .mobile-caption { text-align: center !important; }

  /* ---- Data tables: make the horizontal scroll affordance visible ---- */
  .mobile-scroll-hint {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: #5E7A6E;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 6px;
  }

  /* ---- Click-to-enlarge: disabled on mobile (no lightbox on tap) ---- */
  .mobile-nozoom {
    pointer-events: none !important;
    cursor: default !important;
  }
  .mobile-hide { display: none !important; }

  /* this one table wrapper has a 20px top margin baked into its desktop
     design; combined with the scroll hint's own spacing above it, that
     stacks into a visibly bigger gap than every other table gets */
  .mobile-notopmargin { margin-top: 0 !important; }
}