/*==========================================================
SYNEURA RESPONSIVE PATCH
ASSL v4 — Framework Layer (Level 1, supplemental)
Load this AFTER core.css and AFTER the page's own CSS file,
on every page:

  <link href="core.css" rel="stylesheet"/>
  <link href="home.css" rel="stylesheet"/>
  <link href="responsive.css" rel="stylesheet"/>

Does not duplicate or override anything core.css/page CSS
already handles well (992px grid collapse, 768px page padding,
720px nav stacking are all fine as-is). This file only fills
the two ranges nothing currently covers:

  - WIDESCREEN  (1920px+)  — TVs, ultra-wide monitors
  - SMALL PHONE (<380px)   — small Android, iPhone SE

...plus a few device-agnostic safety nets (notch safe-areas,
horizontal-scroll guard, touch-target minimums).
==========================================================*/

/*==========================================================
GLOBAL SAFETY NETS
Apply at every size — not breakpoint-specific.
==========================================================*/

html, body{
  max-width:100%;
  overflow-x:hidden;
}

/* Respect notches / rounded corners on modern phones */
.site-header{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

.hub-section{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  padding-bottom:calc(80px + env(safe-area-inset-bottom));
}

/* Minimum comfortable tap target on touch devices */
@media (pointer:coarse){

  .nav-link,
  .button,
  .button-small,
  .faq-question,
  .open-modal{
    min-height:44px;
  }

}

/*==========================================================
WIDESCREEN / TV
1920px = standard widescreen monitor
2560px = ultra-wide / QHD
3840px = 4K TV
Content itself is already capped by --page-max-width (1600px)
and .wrap (1600px), so the fix here is chrome that ISN'T
capped by those — the nav bar and footer — plus a readability
bump so text doesn't look small from TV viewing distance.
==========================================================*/
 
@media (min-width:1920px){
 
  .nav-container{
    max-width:1800px;
    margin-inline:auto;
    padding:0 40px;
  }
 
  .hub-container{
    max-width:1800px;
    margin-inline:auto;
  }
 
  :root{
    --page-max-width:1720px;
  }
 
}
 
@media (min-width:2560px){
 
  /* TV / very large ultra-wide viewing distance — scale the
     whole type system up slightly rather than leaving text
     the same physical size it'd be on a 24" monitor. */
  html{
    font-size:19px;
  }
 
  :root{
    --page-max-width:1880px;
  }
 
  .nav-container,
  .hub-container{
    max-width:1900px;
  }
 
  .brand img{
    width:72px;
    height:72px;
  }
 
}

/*==========================================================
SMALL PHONE
<380px covers: Galaxy Fold (outer), older/small Android
devices, iPhone SE / mini in some orientations.
core.css's 480px tier is a good baseline — this tightens
further so nothing clips or wraps awkwardly.
==========================================================*/

@media (max-width:380px){

  :root{
    --page-padding-inline:16px;
    --hero-title-size:30px;
    --section-title-size:24px;
    --card-title-size:18px;
    --body-size:15px;
    --small-text-size:14px;
    --lead-size:1rem;
    --card-padding:20px;
    --card-gap:14px;
  }

  .page{
    padding-top:64px;
    padding-inline:16px;
  }

  .brand{
    font-size:18px;
    gap:8px;
  }

  .brand img{
    width:40px;
    height:40px;
  }

  .site-nav{
    gap:8px;
  }

  .nav-link{
    font-size:10px;
    letter-spacing:.12em;
  }

  .button{
    padding:11px 16px;
    font-size:13px;
  }

  .hub-branding .brand{
    font-size:19px;
  }

  .hub-branding p{
    font-size:14px;
  }

  .hub-column{
    min-width:140px;
  }

  #early-access{
    padding:28px;
  }

  dialog h2{
    font-size:22px;
  }

}

/*==========================================================
HOME PAGE — PHONE MOCKUP ON SMALL SCREENS
home.css already scales --phone-width down at 992/768/480.
Small-phone tier needs one more step so the device mockup
never exceeds the available width.
==========================================================*/

@media (max-width:380px){

  .home-page{
    --phone-width:190px;
    --hero-title-size:30px;
  }

  .home-page .device-shell{
    padding:8px;
  }

  .mantra-word,
  .curated-line{
    font-size:0.85rem;
  }

}

/*==========================================================
FEATURES PAGE — HERO PADDING FIX
features.css sets a fixed 240px top padding for the hero with
no mobile override, which wastes most of the viewport on a
phone. Bring it in line with core's own page padding tiers.
==========================================================*/

@media (max-width:768px){

  /* Same specificity (0,1,0) as features.css's own .hero-page
     rule, but loaded later — wins on the features page only.
     Pages like home.css that scope with .home-page.page
     (0,2,0) are unaffected, since their rule is more specific
     and always wins regardless of load order. */
  .hero-page{
    padding-top:110px;
  }

}

@media (max-width:480px){

  .hero-page{
    padding-top:88px;
  }

  .hero-page .eyebrow{
    font-size:15px;
    letter-spacing:.18em;
  }

}

/*==========================================================
FEATURE / TRUST / GRID CARDS — SMALL PHONE
core.css collapses these to 1fr at 992px already. At <380px,
tighten the card padding so text doesn't feel cramped against
the card edge.
==========================================================*/

@media (max-width:380px){

  .glass-card{
    padding:18px;
  }

  .feature-header{
    width:100%;
  }

  .feature-icon{
    width:64px;
    height:64px;
  }

  .feature-icon img,
  .feature-icon svg{
    width:34px;
    height:34px;
  }

  .feature-content h3{
    font-size:19px;
  }

  #featureDialog .feature-modal-left{
    padding:28px 20px;
  }

}

/*==========================================================
LANDSCAPE PHONE
Short-viewport landscape (common when a phone is rotated) —
fixed vertical paddings from core.css can push content below
the fold entirely. Reduce top/bottom padding when height is
tight regardless of width.
==========================================================*/

@media (max-height:420px) and (orientation:landscape){

  .page{
    padding-top:88px;
    padding-bottom:60px;
  }

  .home-page.page{
    padding-top:88px;
  }

  .site-header{
    height:64px;
  }

}

/*==========================================================
END
==========================================================*/