/* ── HYPER RACER — RESPONSIVE / MOBILE LAYER ───────────────────────────────
 * Linked on every page AFTER each page's inline <style>, so equal-specificity
 * rules here win when a media query matches. Class names are global, so one
 * file covers every page (rules for classes a page doesn't use are inert).
 *
 * Pairs with js/nav.js, which wraps the nav links/CTAs in .nav-menu and adds
 * the .nav-toggle hamburger button.
 * ------------------------------------------------------------------------- */

/* Nav scaffolding — transparent to layout on desktop */
.nav-menu   { display: contents; }
.nav-toggle { display: none; }

/* Proof-bar marquee scaffolding — transparent on desktop (js/marquee builds it) */
.proof-marquee, .proof-track { display: contents; }
.proof-clone { display: none; }
@keyframes proofscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===========================================================================
   TABLET / MOBILE  (≤ 900px) — collapse multi-column layouts, mobile nav
   ======================================================================== */
@media (max-width: 900px) {

  /* ---- NAV (hamburger) ---- */
  nav { padding: 0 20px; }
  /* x1: keep the return-to-global button compact beside the logo */
  .nav-left { gap: 12px; }
  .nav-global { padding: 7px 11px; font-size: 11px; letter-spacing: .05em; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin-right: -8px;
    background: none; border: 0; cursor: pointer; z-index: 2;
  }
  .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .2s; }
  nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(8,8,8,.98); border-bottom: 1px solid var(--border); padding: 6px 0 14px;
  }
  nav.nav-open .nav-menu { display: flex; }
  .nav-menu .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-menu .nav-links li { width: 100%; }
  .nav-menu .nav-links a { display: block; padding: 14px 24px; font-size: 15px; }
  .nav-menu .nav-actions { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 24px 4px; }
  .nav-menu .nav-cta, .nav-menu .nav-cta-ghost { display: block; text-align: center; padding: 14px; }

  /* ---- INDEX ---- */
  .car-s, .cam-s, .racing-s, .ethos-inner { grid-template-columns: 1fr; }
  .start-grid { grid-template-columns: 1fr; }
  .car-s > div:first-child,
  .racing-s > div:not(.racing-ph) { padding: 64px 24px; }
  .cam-c { padding: 48px 24px; }
  .car-ph, .racing-ph, .cam-img { min-height: 300px; }
  /* drop the desktop side fade-to-carbon on the stacked mobile images */
  .car-ph::after, .racing-ph::after, .cam-img::after { display: none; }
  /* racing image is moved under the heading by JS; reset its desktop order
     and give it breathing room inside the text column */
  .racing-ph { order: 0; margin: 20px 0 8px; }
  /* keep the three stats as a 3-wide panel, not stacked */
  .three-stats { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  /* proof bar becomes a thin auto-sliding marquee strip */
  .proof-bar { display: block; overflow: hidden; padding: 13px 0; }
  .proof-marquee { display: flex; width: max-content; animation: proofscroll 24s linear infinite; }
  .proof-track, .proof-clone { display: flex; align-items: center; flex: 0 0 auto; }
  .proof-bar .pi { padding: 0 18px; flex: 0 0 auto; }
  /* articles → swipeable carousel (saves vertical space) */
  .ah-grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 14px; padding-bottom: 6px; scrollbar-width: none;
  }
  .ah-grid::-webkit-scrollbar { display: none; }
  .ah-card { flex: 0 0 86%; scroll-snap-align: start; }
  .ah-head { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* ---- X1 ---- */
  /* hero: content-height, stats flow in (not pinned), heading text is small already */
  /* solid black header so the hero image can start below it */
  nav { background: var(--black); }
  /* x1 hero: image starts under the nav (gains vertical room); title pinned to
     the very top, button dropped to just above the stats (moved by JS so it can
     sink with margin-top:auto), car visible in the gap between. */
  .page-hero:has(.page-hero-text) { margin-top: 64px; min-height: calc(100vh - 64px); justify-content: flex-start; }
  .page-hero-text { padding: 20px 20px 0; }
  .hero-btns { margin-top: auto; margin-bottom: 12px; position: relative; z-index: 2; display: flex; justify-content: center; }
  .hero-btns .btn-p { padding: 9px 22px; font-size: 11px; width: auto; }
  /* stats: one compact row at the very bottom (scroll hint hidden) */
  .hero-stats-bar { position: static; width: 100%; flex-wrap: nowrap; justify-content: space-around; gap: 8px; padding: 6px 12px 22px; }
  .hstat { flex: 1 1 0; min-width: 0; }
  .hstat-n { font-size: 22px; }
  .hstat-u { font-size: 11px; }
  .hstat-l { font-size: 8px; letter-spacing: .05em; margin-top: 4px; }
  .hero-scroll-hint { display: none; }
  .spec-grid { grid-template-columns: 1fr; }
  .body-grid { grid-template-columns: 1fr; }
  /* aero: stack and drop its side fade-to-carbon + the desktop zoom */
  .aero-s { grid-template-columns: 1fr; }
  .aero-text { padding: 56px 24px; }
  .aero-img { min-height: 300px; }
  .aero-img img { transform: none; }
  .aero-img::after { display: none; }
  /* accordion: stack text under image, kill the big left indent */
  .accord-content { grid-template-columns: 1fr; padding: 22px 20px 28px; gap: 20px; }
  .accord-header { padding: 20px 18px; gap: 14px; }
  .accord-title { font-size: 18px; }
  .accord-icon { width: 30px; height: 30px; }
  .accord-text { font-size: 15px; }
  /* chassis safety callouts → single column */
  .callout-grid { grid-template-columns: 1fr; }
  .films-grid .video-card.feature,
  .video-card.featured { grid-template-columns: 1fr; }

  /* ---- DEALERS ---- */
  .dealers-grid { grid-template-columns: 1fr; }
  /* stack the 2-row become grid in a logical order: heading, benefits, apply, form */
  .become-inner { display: flex; flex-direction: column; }
  .become-head-l { order: 1; } .become-body-l { order: 2; }
  .become-head-r { order: 3; margin-top: 28px; } .become-body-r { order: 4; }
  .map-s { height: auto; }
  .map-wrap { position: relative; aspect-ratio: 4 / 3; flex: none; }

  /* ---- GARAGE ---- */
  .doc-grid, .video-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .contact-strip { grid-template-columns: 1fr; gap: 24px; }
  .contact-methods { align-items: flex-start; }
  .mech { max-width: none; }

  /* ---- ARTICLES ---- */
  .articles-grid { grid-template-columns: 1fr; }
  .article-card.featured { grid-template-columns: 1fr; }

  /* ---- RACING ---- */
  .hero-content { grid-template-columns: 1fr; gap: 28px; padding: 100px 24px 0; }
  .two-col, .intl-fb, .adc-s, .framework-inner { grid-template-columns: 1fr; gap: 40px; }
  .adc-s-text { padding: 56px 24px; }
  /* !important: racing.html defines these in a later in-body <style> block */
  .adc-carousel { max-width: 92vw !important; margin-top: -80px; }
  .adc-slide { grid-template-columns: 1fr !important; gap: 12px; }

  /* ---- CONFIGURE ---- */
  .config-layout { display: block; min-height: 0; }
  .config-main { padding: 32px 20px; border-right: 0; }
  .config-sidebar { position: static; height: auto; }
  .region-grid { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: 1fr; }

  /* ---- FOOTER (all pages) ---- */
  .fg-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .f-bot { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ===========================================================================
   PHONE  (≤ 600px) — single column everywhere, tighter spacing
   ======================================================================== */
/* Tablet headings — pull the clamp floors down a notch */
@media (max-width: 768px) {
  .st { font-size: clamp(28px, 6vw, 40px); }
  .page-hero-content h1 { font-size: clamp(34px, 8vw, 56px) !important; }
}

@media (max-width: 600px) {
  nav { padding: 0 16px; }

  /* tighten the big horizontal + vertical section padding */
  .accord-s, .spec-s, .comp-s, .lap-s, .body-s, .aero-s, .chassis-s,
  .garage-s, .dealers-s, .become-s, .enq-s, .start-s, .ethos-s,
  .warn-s, .contact-strip, .map-legend, .map-hero-overlay, .studio-s,
  footer, .page-hero, .page-hero-content, .articles-home, .partner {
    padding-left: 20px; padding-right: 20px;
  }
  .accord-s, .spec-s, .comp-s, .lap-s, .body-s, .aero-s,
  .garage-s, .dealers-s, .become-s, .enq-s, .start-s, .ethos-s, .articles-home {
    padding-top: 56px; padding-bottom: 56px;
  }
  .car-s > div:first-child, .racing-s > div:not(.racing-ph), .cam-c { padding-top: 48px; padding-bottom: 48px; }
  .page-hero { min-height: auto; }
  .page-hero-content { padding-top: 104px; padding-bottom: 48px; }

  .fgrid, .fg-grid, .service-grid, .region-grid, .opt-grid { grid-template-columns: 1fr; }

  /* ---- TYPOGRAPHY: scale the big stuff down for phones ---- */
  .st                         { font-size: clamp(24px, 7.5vw, 32px); word-break: break-word; }
  .sb, .cam-ctx               { font-size: 14px; }
  .hero-h1                    { font-size: clamp(28px, 9vw, 40px); }
  .page-hero-content h1       { font-size: clamp(30px, 10vw, 44px) !important; }
  .cam-q                      { font-size: clamp(20px, 6vw, 28px); }
  .warn-text                  { font-size: clamp(22px, 7vw, 32px); word-break: break-word; }
  .result-title               { font-size: clamp(30px, 10vw, 44px); }
  /* three-stat panel: shrink internals so 3 fit across a phone */
  .tsb                        { padding: 16px 8px; }
  .tsb-n                      { font-size: 24px; }
  .tsb-u                      { font-size: 13px; }
  .tsb-l                      { font-size: 8.5px; letter-spacing: .08em; margin-top: 4px; }
  .pi-n                       { font-size: 22px; }
  .hstat-n                    { font-size: 18px; }
  .service-interval           { font-size: 28px; }
  .track-time                 { font-size: 34px; }
  .track-name                 { font-size: 20px; }
  .doc-title, .dealer-name    { font-size: 18px; }

  /* forms / buttons full width */
  .fsub, .btn-p, .btn-g { width: 100%; text-align: center; }
  .hero-ctas, .hero-btns { flex-direction: column; align-items: stretch; }

  /* x1 hero: drop the Engineering-story link, make "Build yours" a compact button */
  .hero-btns { flex-direction: row; align-items: center; justify-content: center; }
  .hero-btns .btn-g { display: none; }
  .hero-btns .btn-p { width: auto; padding: 14px 44px; }

  /* lap-time carousel: comfortable single-card view */
  .track-tile { width: 80vw; }
}