/* ============================================================
   V127 — cross-browser responsive hardening.
   Fluid widths, height-aware landing composition, safe dynamic
   viewport fallbacks, resilient Grid/Flex min-sizing and compact
   tablet/landscape handling. Loaded after the legacy theme CSS.
   ============================================================ */

/* Baseline: prevent browser-specific intrinsic sizing from pushing layouts. */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:100vh;
  min-height:100dvh;
}
img,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{min-width:0;max-width:100%}
textarea{resize:vertical}

/* Explicitly allow flexible children to shrink in Firefox/WebKit/Chromium. */
.app-content,.page-wrap,.page-topbar,.page-footer,.site-top-hub,
.landing-shell,.landing-main,.landing-hero,.network-floats,.network-float,
.network-float-body,.network-list-inner,.featured-reviews-shell,.featured-review-list,
.legal-shell,.legal-topbar,.legal-grid,.review-page-shell,.review-page-main,
.hero-layout,.tariff-layout,.ref-layout,.keys-grid,.faq-hero,.faq-list,
.configurator,.checkout-card,.cabinet-card,.hero-card,.glass-card,.glass-panel,
.install-page,.purchases-page,.admin-page,.handoff-shell{
  min-width:0;
  max-width:100%;
}
.hero-layout>*,.tariff-layout>*,.ref-layout>*,.keys-grid>*,.faq-hero>*,
.faq-list>*,.legal-grid>*,.review-kind-tabs>*,.period-grid>*,.choice-grid>*{min-width:0}

/* Viewport-height fallbacks. dvh follows the actual visible browser viewport. */
.app-content,.landing-shell,.review-page,.maintenance-page{min-height:100vh}
@supports(height:100dvh){
  .app-content,.landing-shell,.review-page,.maintenance-page{min-height:100dvh}
  .modal,.review-modal,.theme-popover,.appearance-popover{max-height:calc(100dvh - 24px)}
}

/* Keep sticky/fixed UI inside safe edges at every desktop width. */
.page-wrap,.page-footer{max-width:min(var(--wrap),calc(100vw - 28px))}
.page-topbar{max-width:100vw}
.site-top-hub{max-width:calc(100vw - 16px)}

/* Landing: always use document flow. No review section is allowed to overlap network cards. */
.landing-page{overflow-x:hidden!important}
.landing-page .landing-shell{
  min-height:100vh!important;
  min-height:100dvh!important;
  height:auto!important;
  overflow:visible!important;
}
.landing-page .landing-main{
  width:100%!important;
  max-width:100%!important;
  min-height:calc(100vh - 88px)!important;
  min-height:calc(100dvh - 88px)!important;
}
.landing-page .network-floats{
  width:min(860px,calc(100% - 28px))!important;
  max-width:100%!important;
}
.landing-page .network-float,
.landing-page .network-float-body,
.landing-page .network-list-inner{min-width:0!important}
.landing-page .network-list-inner{
  max-height:min(42vh,360px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
}
@supports(height:100dvh){
  .landing-page .network-list-inner{max-height:min(42dvh,360px)!important}
}
.landing-page .network-chip{min-width:0!important}
.landing-page .network-chip>span:last-child{
  min-width:0!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* Review carousel remains fluid instead of assuming a particular monitor width. */
.featured-reviews-shell{
  width:min(1160px,calc(100% - 28px))!important;
  max-width:1160px!important;
}
.featured-reviews-head{max-width:100%!important}
.featured-review-list{
  max-width:100%!important;
  overscroll-behavior-inline:contain;
}
.featured-review-card{max-width:calc(100vw - 28px)!important}

/* The old fixed -150px lift overlapped the country panels on short 16:9 screens.
   Keep the lifted look only when there is enough vertical room. */
@media(min-width:821px) and (max-height:900px){
  .landing-page .landing-main{
    min-height:auto!important;
    justify-content:flex-start!important;
    padding-top:clamp(18px,3vh,30px)!important;
    padding-bottom:28px!important;
  }
  .landing-page .landing-hero>.landing-constellation{
    height:clamp(142px,22vh,178px)!important;
    margin-bottom:clamp(18px,3vh,28px)!important;
  }
  .landing-page .landing-hero-actions{margin-top:clamp(18px,3vh,28px)!important}
  .landing-page .network-floats{margin-top:clamp(18px,3vh,26px)!important}
  .featured-reviews-cue{margin-top:24px!important}
  .featured-reviews-cue + .featured-reviews-shell{margin-top:8px!important}
}
@media(min-width:821px) and (min-height:901px) and (max-height:1150px){
  .featured-reviews-cue{margin-top:-104px!important}
}
@media(min-width:821px) and (min-height:1151px){
  .featured-reviews-cue{margin-top:-170px!important}
}
body.network-panel-open .featured-reviews-cue{margin-top:clamp(24px,4vh,56px)!important}
body.network-panel-open .featured-reviews-cue + .featured-reviews-shell{margin-top:10px!important}

/* Medium desktops/tablets: collapse expensive multi-column compositions before they get cramped. */
@media(max-width:1180px){
  .hero-layout,.tariff-layout,.ref-layout,.faq-hero{grid-template-columns:1fr!important}
  .checkout-card{position:static!important;top:auto!important}
  .faq-list{grid-template-columns:1fr!important}
  .landing-page .network-floats{width:min(860px,calc(100% - 24px))!important}
}

/* Tablet band: use the mobile navigation geometry instead of a squeezed sidebar. */
@media(min-width:821px) and (max-width:960px){
  :root{--sidebar:0px}
  .sidebar{display:none!important}
  .app-content{margin-left:0!important}
  .page-wrap{width:min(calc(100% - 28px),var(--wrap))!important;padding-bottom:98px!important}
  .page-footer{display:none!important}
  .page-topbar{min-height:64px!important;padding:8px 14px!important}
  .mobile-nav{
    position:fixed!important;z-index:180!important;left:10px!important;right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;height:64px!important;
    display:flex!important;gap:4px!important;padding:5px!important;border-radius:20px!important;
    overflow-x:auto!important;overscroll-behavior-x:contain!important;scrollbar-width:none!important;
    background:linear-gradient(145deg,rgba(29,26,31,.72),rgba(10,10,12,.64))!important;
    -webkit-backdrop-filter:blur(26px) saturate(160%)!important;
    backdrop-filter:blur(26px) saturate(160%)!important;
  }
  .mobile-nav::-webkit-scrollbar{display:none!important}
  .mobile-link,button.mobile-link{min-width:82px!important;flex:0 0 82px!important}
}

/* Existing mobile design, with stronger shrink rules and safe viewport sizing. */
@media(max-width:820px){
  .landing-page .landing-shell{padding-left:8px!important;padding-right:8px!important}
  .landing-page .landing-main{min-height:auto!important}
  .landing-page .network-floats{width:calc(100% - 4px)!important}
  .featured-reviews-shell{width:calc(100% - 14px)!important}
  .featured-review-card{max-width:86vw!important}
  .review-page-shell,.legal-shell{max-width:100%!important}
  .review-page-card,.review-modal,.modal{max-width:calc(100vw - 20px)!important}
  .review-kind-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .toast-stack{max-width:calc(100vw - 16px)!important}
}

@media(max-width:520px){
  .review-kind-tabs{grid-template-columns:1fr!important}
  .review-kind-card{min-height:66px!important}
  .featured-reviews-head{width:100%!important}
  .featured-reviews-head b{overflow-wrap:anywhere}
  .landing-page .network-list-inner{max-height:min(50vh,360px)!important}
  @supports(height:100dvh){.landing-page .network-list-inner{max-height:min(50dvh,360px)!important}}
}

/* Landscape phones / very short tablets: width-only breakpoints are not enough. */
@media(max-width:1024px) and (max-height:600px){
  .landing-page .landing-shell{padding:6px 8px 14px!important}
  .landing-page .landing-nav.site-top-hub{min-height:52px!important}
  .landing-page .landing-nav nav{display:none!important}
  .landing-page .landing-main{min-height:auto!important;padding:12px 4px 18px!important}
  .landing-page .landing-hero>.landing-constellation{
    width:min(430px,70vw)!important;height:92px!important;margin:0 auto 10px!important;
  }
  .landing-page .guardian-shield{width:68px!important;height:78px!important}
  .landing-page .guardian-logo{width:34px!important;height:39px!important}
  .landing-page .landing-hero h1 span{font-size:clamp(2.6rem,9vw,4.6rem)!important}
  .landing-page .landing-hero h1 em{font-size:.56rem!important}
  .landing-page .landing-hero-actions{margin-top:10px!important}
  .landing-page .network-floats{margin-top:14px!important}
  .landing-page .network-list-inner{max-height:min(46vh,250px)!important}
  .featured-reviews-cue{margin-top:18px!important}
  .featured-reviews-shell{margin-bottom:32px!important}

  :root{--sidebar:0px}
  .sidebar{display:none!important}
  .app-content{margin-left:0!important}
  .page-wrap{width:calc(100% - 20px)!important;padding-top:12px!important;padding-bottom:86px!important}
  .page-topbar{min-height:58px!important;padding:6px 10px!important}
  .mobile-nav{
    position:fixed!important;z-index:180!important;left:8px!important;right:8px!important;
    bottom:calc(6px + env(safe-area-inset-bottom))!important;height:60px!important;
    display:flex!important;gap:3px!important;padding:4px!important;border-radius:18px!important;
    overflow-x:auto!important;scrollbar-width:none!important;
    background:rgba(13,12,15,.82)!important;
    -webkit-backdrop-filter:blur(24px) saturate(155%)!important;
    backdrop-filter:blur(24px) saturate(155%)!important;
  }
  .mobile-nav::-webkit-scrollbar{display:none!important}
  .mobile-link,button.mobile-link{min-width:76px!important;flex:0 0 76px!important}
}

/* Opaque fallback where blur is unavailable/disabled. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-panel,.glass-card,.glass-mini,.site-top-hub,.mobile-nav,.legal-topbar,
  .page-topbar,.network-float,.featured-review-card,.modal,.review-modal{
    background-color:rgba(14,14,18,.94)!important;
  }
}