/* ============================================================
   RESPONSIVE.CSS — Mobile-first breakpoint overrides
   Breakpoints: 1080 / 860 / 600
   ============================================================ */

@media (max-width: 1080px) {
  :root { --fs-3xl: 3.4rem; --fs-2xl: 2.6rem; --container: 960px; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-col:nth-child(4), .footer-col:nth-child(5) { grid-column: span 1; }
}

@media (max-width: 860px) {
  :root { --fs-3xl: 2.6rem; --fs-2xl: 2.1rem; --fs-xl: 1.9rem; --sp-7: 64px; --sp-6: 48px; --header-h: 72px; }

  .main-nav ul, .header-cta .btn-ghost { display: none; }
  .nav-toggle { display: flex; }

  /* Header real estate is scarce on mobile. The WhatsApp button and the
     theme toggle are both duplicated elsewhere (bottom action bar and
     the drawer, respectively), so drop the header copies here — this,
     combined with brand truncation below, is what actually prevents the
     header from overflowing the viewport width. */
  .header-cta .btn-primary.btn-sm,
  .site-header .theme-toggle { display: none; }

  .site-header .container { gap: var(--sp-2); }
  .brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .brand > span:not(.brand-mark) {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 48vw;
  }
  .header-cta { flex: 0 0 auto; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-media { order: -1; }

  /* Many sections use an inline grid-template-columns (e.g. "1.1fr 0.9fr")
     for asymmetric two-column layouts. Inline styles win over classes, so
     without this override they never collapse on mobile and force the
     page to overflow horizontally. This catches all of them site-wide. */
  .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

  .mobile-action-bar { display: flex; }
  body { padding-bottom: 60px; }

  .cta-band { padding: var(--sp-5) var(--sp-3); }

  /* Pull diag-hud panels back to a safe positive inset starting at this
     breakpoint too, since their negative desktop offsets (-20/-24px) can
     still exceed the container padding in the 601-860px range. */
  .diag-hud {
    max-width: calc(100% - 24px);
    left: 16px !important;
    right: 16px !important;
    overflow: hidden;
  }
}

@media (max-width: 600px) {
  .container { padding-inline: var(--sp-2); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  h1 { font-size: var(--fs-2xl); }

  .brand > span:not(.brand-mark) { max-width: 40vw; font-size: 0.98rem; }
  .brand-mark { width: 34px; height: 34px; border-radius: 9px; }
  .brand-mark svg { width: 18px; height: 18px; }

  /* diag-hud panels are positioned with negative offsets (e.g. left:-24px)
     to "float" outside their photo on desktop. On narrow viewports that
     negative offset can push them past the screen edge and cause
     horizontal scroll, so we pull them back to a safe positive inset. */
  .diag-hud {
    min-width: 0;
    max-width: calc(100% - 24px);
    padding: 12px 14px;
    left: 12px !important;
    right: 12px !important;
    overflow: hidden;
  }

  .section-pad { padding-block: var(--sp-6); }
  .section-pad-sm { padding-block: var(--sp-5); }
  .timeline::before { left: 23px; }
  .timeline-step__num { width: 46px; height: 46px; font-size: 0.95rem; }
}

/* Belt-and-suspenders: guarantee no element can force horizontal scroll,
   whatever page-specific inline styles or third-party embeds might do. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, table { max-width: 100%; }