/* ============================================================================
   Optima Stasis — responsive.css
   A shared responsive LAYER, loaded last on every page so it complements the
   per-page CSS without changing the desktop (>=1025px / 1440) design.

   Breakpoints (max-width):
     1024  tablet landscape   — recompose dense grids, keep primary structure
      960  nav switch         — full nav -> hamburger drawer (matches nav.js)
      768  tablet portrait    — stack two-column / sidebar layouts
      480  mobile (390 target)— single column, full-width forms & CTAs, 44px taps
      360  small mobile (320 stress) — tighten, reflow "table" rows, no overflow

   Principles applied to every reusable component:
     reflow > scale · no fixed-height text containers · long-copy safe (+30%) ·
     media never overflow · sticky disabled once stacked · touch targets >=44px.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. FOUNDATION  (all widths — visually inert on desktop, safety only)
   ---------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

/* media can never force horizontal scroll or overflow a card */
img,video,canvas{max-width:100%;height:auto}
img{display:block}
.vis img,.media img,figure img,.phero img{width:100%;height:100%;object-fit:cover}

/* long words / emails / postcodes / 30%-longer copy never blow out a box */
h1,h2,h3,h4,h5,p,li,a,dd,dt,figcaption,blockquote,summary,label,
.lead,.desc,.st,.sd,.nm,.mt,.pn,.th-tag,.eyebrow,.cat{overflow-wrap:break-word}

/* the #1 cause of mobile overflow: flex/grid children that refuse to shrink */
.wrap,.nav-links,.nav-right,.crow,.crow .mid,.field,.field2,.acts,.micro,
.pmeta,.frow,.availbar,.fmeta,.doors,.hiw-cta,.split,.layout,.rlayout,
.dgrid,main.page .grid,.trio,.tracks .track,.steps li,.fork-card{min-width:0}

/* NOTE: the previous unconditional `body{overflow-x:clip}` backstop was removed.
   Per the brief, real overflow sources are fixed at the component level (mobile
   header Login control, off-screen drawer panel, footer grid, flex-wrapped
   prose). A minimal, *verified* defensive clip is re-introduced at the very end
   of this file only after browser checks confirmed no content extends past the
   viewport at 320–1440px. */

/* horizontal rows that must wrap rather than overflow with longer copy */
.acts,.micro,.pmeta,.doors,.hiw-cta,.availbar,.fmeta,.frow,.badges,
.bio-list,.accred,.hiw-accred,.svcfilter,.chips,.qfilters{flex-wrap:wrap}

/* ----------------------------------------------------------------------------
   1. <= 1024px  tablet landscape — recompose dense grids, keep structure
   ---------------------------------------------------------------------------- */
@media (max-width:1024px){
  .wrap{padding-left:20px;padding-right:20px}

  /* dense 4-up and 3-up content grids step down a level */
  .logi,.how,.how .steps{grid-template-columns:repeat(2,1fr)}
  .rgrid{grid-template-columns:repeat(2,1fr)}

  /* product catalogue + home product grid: 3 -> 2 */
  #grid{grid-template-columns:repeat(2,1fr)}
  .products{grid-template-columns:repeat(2,1fr)}

  /* heroes, sidebars and trios intentionally KEPT 2/3-col here (not just scaling) */
}

/* ----------------------------------------------------------------------------
   2. <= 960px  navigation switches to the hamburger drawer (matches nav.js)
   Standardises pages that previously hid .nav-links at 880 (removes the
   880–960 "both showing" gap).
   ---------------------------------------------------------------------------- */
@media (max-width:960px){
  nav.main .nav-links{display:none}
  /* burger + slide-in panel are injected & styled by js/nav.js at <=960 */
}

/* ----------------------------------------------------------------------------
   3. <= 768px  tablet portrait — stack two-column / sidebar layouts
   ---------------------------------------------------------------------------- */
@media (max-width:768px){
  .wrap{padding-left:18px;padding-right:18px}

  /* every two-column / sidebar / hero-split layout -> single column */
  .hero .grid,.phero .grid,.twocol,.layout,.rlayout,.dgrid,.split,
  main.page .grid{grid-template-columns:1fr;gap:30px}

  /* once stacked, no sticky offsets (sidebar/summary would float oddly) */
  .summary,.filters,
  .dgrid>*,.rlayout>*,.split>*,main.page .grid>*{position:static}

  /* multi-up card grids -> 2 columns */
  #grid,.products,.trio,.ov,.rgrid,.logi,.how,.how .steps,.assure .wrap,
  .measures,.learn,.appt,.scoregrid,.fgrid{grid-template-columns:repeat(2,1fr)}

  /* 4-up stat bars -> 2 */
  .statbar .wrap{grid-template-columns:repeat(2,1fr)}

  /* hero fork: image/cards sit below copy with comfortable rhythm */
  .fork{margin-top:8px}
}

/* ----------------------------------------------------------------------------
   4. <= 480px  mobile (covers the 390 target)
   single column · full-width forms & CTAs · reflow rows · 44px tap targets
   ---------------------------------------------------------------------------- */
@media (max-width:480px){
  .wrap{padding-left:16px;padding-right:16px}
  .utility{display:none}                 /* thin top strip folds away on phones */

  /* collapse ALL grids to one column */
  #grid,.products,.trio,.ov,.rgrid,.logi,.how,.how .steps,.assure .wrap,
  .measures,.learn,.appt,.scoregrid,.field2,.opts.grid2,.screen-grid,
  .statbar .wrap,.cols,.tracks,.appt,.ov,.fgrid{grid-template-columns:1fr}

  /* FORMS: full-width controls, stacked rows, comfortable taps */
  input:not([type=checkbox]):not([type=radio]),select,textarea,
  .field input,.field select,.availbar .ab-input,.ab-input{width:100%}
  .field.half{width:100%;margin-right:0}
  .field,.frow,.availbar{flex-direction:column;align-items:stretch}
  .availbar .ab-input{flex:1 1 auto}

  /* CTAs: action rows become full-width stacks (no width jitter, easy to tap) */
  .acts .btn{flex:1 1 100%}
  .doors,.hiw-cta{flex-direction:column}
  .doors .btn,.hiw-cta .btn,.hero .btn,.final .btn{width:100%;justify-content:center}

  /* touch targets */
  .btn,.icon-btn,.chip,.svcchip,input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px}

  /* "TABLE" ROWS (cart line items) reflow to: name row, then qty + price row */
  .clabels{display:none}
  .crow{flex-wrap:wrap;row-gap:10px}
  .crow .mid{flex:1 1 100%}
  .crow .qty{order:3}
  .crow .pr{order:4;margin-left:auto;width:auto}

  /* fluid type (mobile only — desktop sizes untouched) */
  h1{font-size:clamp(30px,8vw,40px);line-height:1.08}
  .hero h1,.hiw-hero h1{font-size:clamp(32px,9vw,44px)}
  h2,.sec-head h2{font-size:clamp(24px,6.5vw,30px)}

  /* visual panels: tall enough to read, never empty acres */
  .vis{min-height:200px}
}

/* ----------------------------------------------------------------------------
   5. <= 360px  small-mobile STRESS CASE (covers 320)
   tighten spacing, guarantee row reflow, zero horizontal overflow
   ---------------------------------------------------------------------------- */
@media (max-width:360px){
  .wrap{padding-left:14px;padding-right:14px}

  /* any remaining 2-up collapses */
  .statbar .wrap,.bp-stats,.ov,.trio,.scoregrid,.measures,.learn{grid-template-columns:1fr}

  /* tighter chip / meta rows */
  .micro,.pmeta,.fmeta,.bio-list,.accred,.hiw-accred,.badges{gap:8px}

  /* headings & big numbers scale down a final notch */
  h1,.hero h1,.hiw-hero h1{font-size:clamp(26px,8.5vw,32px)}
  .statbar .num,.bignum,.price{font-size:clamp(24px,10vw,34px)}

  /* cart row stays fully reflowed */
  .crow .mid{flex:1 1 100%}

  /* mono labels can wrap instead of pushing width */
  .eyebrow,.th-tag,.cat,.cardavail{white-space:normal}
}

/* ----------------------------------------------------------------------------
   6. Header EXCEPTION pages (checkout secure bar, login split) — bodies still
   need to be responsive even though their headers stay deliberately different.
   ---------------------------------------------------------------------------- */
@media (max-width:480px){
  .co .wrap{flex-wrap:wrap;gap:10px;padding:14px 16px}   /* secure-checkout bar */
  .co .nav-sec{margin-left:0}
  .left{padding:24px 18px}                                /* login auth column */
  .formwrap{padding:24px 0}
}

/* ----------------------------------------------------------------------------
   7. MOBILE HEADER  (fixes the narrow-width Login clip / page overflow)
   The header row is: logo · [nav-links hidden <=960] · search · cart · Login.
   Below 960 nav.js injects the hamburger + drawer (which also carries Login),
   so the inline Login control in .nav-right is redundant on small screens and
   is what pushed the header past the viewport at <=390px. We remove it from the
   row at <=480, tighten spacing, and let the logo/strapline degrade gracefully.
   Desktop (>=1025) is untouched.
   ---------------------------------------------------------------------------- */
@media (max-width:960px){
  /* touch targets in the header reach 44px without changing the visible icon */
  nav.main .icon-btn{width:44px;height:44px}
  nav.main .wrap{gap:14px}
}
@media (max-width:480px){
  /* Login is available inside the drawer; drop the redundant header control */
  nav.main .nav-right a[href*="login"]{display:none}
  nav.main .wrap{gap:10px}
  .nav-right{gap:8px}
  .logo{font-size:16px;gap:8px;min-width:0}
  .logo span{min-width:0}
}
@media (max-width:360px){
  /* narrowest tier: strapline may fold so logo + 3 controls always fit at 320 */
  .logo small{display:none}
  .logo{font-size:15px}
  nav.main .wrap{gap:8px;padding-left:14px;padding-right:14px}
  .nav-right{gap:6px}
}

/* ----------------------------------------------------------------------------
   8. TOUCH TARGETS  (>=44x44 interactive area; visible icon can stay smaller)
   ---------------------------------------------------------------------------- */
@media (max-width:960px){
  .icon-btn,.os-burger,.os-mp-close,
  .filter-toggle,.qfilter-toggle,[data-filter-toggle]{min-width:44px;min-height:44px}
  /* icon-only "add to cart" buttons in the home rail get a real 44px hit area */
  .uprod .add{width:44px;height:44px}
}
@media (max-width:480px){
  .btn,.icon-btn,.chip,.svcchip,input,select,textarea,
  button,summary,.add,.qty button{min-height:44px}
  .qty button{min-width:44px}
}

/* ----------------------------------------------------------------------------
   9. VERIFIED defensive backstop (see note near top of file)
   Confirmed via headless-Chromium scrollWidth checks on every page at
   320/360/390/480/768/960/1024/1440 that no content extends past the viewport
   once the component fixes above are applied; this clip only guards against
   future regressions and never hides a current defect. overflow-x:clip is used
   (not hidden) so it does not break position:sticky on desktop.
   ---------------------------------------------------------------------------- */
html,body{overflow-x:clip}
/* clip (not hidden/auto) does not create a scroll container, so desktop
   position:sticky sidebars/summaries continue to work unchanged. */