/* ==========================================================================
   BlueShield — Global breakpoint overrides (loaded last)
   Component-level breakpoints live beside their components; this file
   holds cross-cutting adjustments only.
   ========================================================================== */

@media (max-width:1099px){
  :root{ --header-h:68px; }
}

@media (max-width:640px){
  :root{ --gutter:20px; }
  .section{ padding-block:clamp(48px,12vw,80px); }
  .btn{ min-height:48px; }
}

/* Never allow any element to force horizontal scroll on the body */
html{ overflow-x:hidden; }
body{ max-width:100vw; }
img,svg,video,canvas,table,pre{ max-width:100%; }

/* ---------------------------------------------------------------------
   Ad-hoc content grids (pain-card / feature-card rows, text+visual
   splits, etc.) are authored per-instance with an inline
   style="grid-template-columns:…" on class="grid" — e.g.
   style="grid-template-columns:repeat(3,1fr)" or "1.1fr .9fr". Inline
   styles win over any external stylesheet rule, including ones inside
   a media query, so a plain @media override here would silently do
   nothing and those sections would stay multi-column (and overflow)
   at every viewport width. !important is the only way to actually beat
   an inline style, so it's used deliberately here — this is the fix
   for "sections not stacking / running off the screen" on mobile.
   minmax(0,1fr) (not bare 1fr) so a track can shrink past its content's
   intrinsic minimum instead of forcing the grid — and the page — wider
   than the viewport ("grid blowout").
   --------------------------------------------------------------------- */
@media (max-width:992px){
  .live-loop-stage{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:900px){
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:640px){
  .grid{ grid-template-columns:minmax(0,1fr) !important; }
  .timeline-h{ grid-template-columns:minmax(0,1fr) !important; row-gap:var(--s-7) !important; }
}

/* Ensure every interactive control keeps a real tap target on touch */
@media (pointer:coarse){
  a,button,[role="button"],input,select,summary{ min-height:44px; }
  .chip,.badge-severity{ min-height:0; }
}

/* Tighten grids that would otherwise get cramped just above their card breakpoints */
@media (max-width:1180px) and (min-width:993px){
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

/* Landscape phones: hero shouldn't demand a full viewport height */
@media (max-height:500px) and (orientation:landscape){
  body.page-home .hero{ min-height:auto; padding-block:var(--s-8); }
  .page-hero{ min-height:auto; }
}

/* Respect safe-area insets on notched devices for fixed/sticky chrome */
.drawer{ padding-right:env(safe-area-inset-right); }
.site-header{ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }

/* Very small screens */
@media (max-width:360px){
  .hero-actions,.page-hero-actions,.cta-band-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn,.page-hero-actions .btn,.cta-band-actions .btn{ width:100%; }
}

/* Print */
@media print{
  .topbar,.site-header,.mega-overlay,.drawer,.drawer-overlay,.cta-band,.site-footer,.sub-nav{ display:none !important; }
  body{ background:#fff; color:#000; }
}