/* =============================================================================
   Mobile hero clearance — ALL 8 embed pages
   Fixes: kickers/badges hidden under fixed nav; hero photos clipped by
   insufficient top padding / conflicting Wix padding-top:0 rules.
   Must load LAST. Cache-bust with force17+.
   ============================================================================= */

:root{
  --zatra-topbar-height:72px;
  --zatra-hero-breath:clamp(28px,6.5vw,40px);
}

@media (max-width:980px){
  /* 1) Fixed nav — beat nav-wix-fix sticky (higher specificity) */
  html.in-wix-frame .topbar,
  html.in-wix-frame body .topbar,
  html.in-wix-frame header.topbar,
  html body.in-wix-frame .topbar,
  html body.in-wix-frame header.topbar,
  html body .topbar,
  html body header.topbar,
  html body .topbar.topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    z-index:2000!important;
    transform:none!important;
    -webkit-transform:none!important;
  }

  /* 2) Body clearance — beat html.in-wix-frame body{padding-top:0} */
  html.in-wix-frame body,
  html body.in-wix-frame,
  html.in-wix-frame body.home-page,
  html body.home-page,
  html body.pricing-page,
  html body.contact-page,
  html body{
    padding-top:calc(var(--zatra-topbar-height,72px) + env(safe-area-inset-top,0px))!important;
  }

  /* 3) Hero bands — enough top pad for badge + photo to read fully */
  html body #top.hero.hero-editorial,
  html body.home-page #top.hero.hero-editorial,
  html body section#top.hero.hero-editorial,
  html body .page-hero-fill,
  html body #page-overview.page-hero-fill,
  html body #pricing-overview.page-hero-fill,
  html body.section.page-hero-fill,
  html body #page-overview.about-premium-hero,
  html body section#page-overview.about-premium-hero,
  html body .legal-hero.page-hero-fill,
  html body .page-intro-section.page-hero-fill,
  html body .pricing-decision-section.page-hero-fill{
    padding-top:var(--zatra-hero-breath)!important;
    margin-top:0!important;
    box-sizing:border-box!important;
  }

  /* Home / about crushed paddings from flagship + home-restore */
  html body.home-page #top .hero-editorial-copy,
  html body #top .hero-editorial-copy,
  html body #page-overview.about-premium-hero .about-hero-copy{
    padding-top:8px!important;
  }

  /* 4) Badges / kickers — always above photo wash, never under nav chrome */
  html body #top .hero-eyebrow,
  html body.home-page #top .hero-eyebrow,
  html body #top .hero-editorial-copy > .hero-eyebrow,
  html body #page-overview .page-intro-shell > .retention-kicker,
  html body #page-overview .page-intro-shell > .eyebrow,
  html body .page-hero-fill .page-intro-shell > .retention-kicker,
  html body .page-hero-fill .page-intro-shell > .eyebrow,
  html body #pricing-overview .pricing-decision-hero > .retention-kicker,
  html body #pricing-overview .pricing-decision-hero .retention-kicker,
  html body #page-overview.about-premium-hero .retention-kicker,
  html body #page-overview.about-premium-hero .about-hero-copy > .retention-kicker,
  html body .legal-hero > .eyebrow{
    position:relative!important;
    z-index:3!important;
    margin-top:0!important;
    margin-bottom:12px!important;
    visibility:visible!important;
    opacity:1!important;
    display:inline-flex!important;
  }

  /* 5) Full-bleed hero photo layer — show more of the asset under copy */
  html body .page-hero-fill::before,
  html body #page-overview.page-hero-fill::before,
  html body #pricing-overview.page-hero-fill::before,
  html body .legal-hero.page-hero-fill::before,
  html body #page-overview.about-premium-hero::before{
    background-position:center 22%!important;
    background-size:cover!important;
  }

  html body.home-page #top.hero.hero-editorial::before,
  html body #top.hero.hero-editorial::before{
    background-position:center 24%!important;
    background-size:cover!important;
  }

  /* Keep photo heroes tall enough that crop doesn't feel truncated */
  html body .page-hero-fill,
  html body #page-overview.page-hero-fill,
  html body #pricing-overview.page-hero-fill,
  html body #page-overview.about-premium-hero,
  html body .legal-hero.page-hero-fill{
    min-height:clamp(280px,72vw,420px)!important;
  }

  html body.home-page #top.hero.hero-editorial,
  html body #top.hero.hero-editorial{
    min-height:0!important; /* home uses carousel below; don't force tall empty band */
  }
}

@media (max-width:760px){
  :root{
    --zatra-hero-breath:clamp(26px,7vw,36px);
  }

  html body .page-hero-fill,
  html body #page-overview.page-hero-fill,
  html body #pricing-overview.page-hero-fill,
  html body #page-overview.about-premium-hero,
  html body .legal-hero.page-hero-fill{
    min-height:clamp(260px,78vw,400px)!important;
  }
}

@media (max-width:420px){
  :root{
    --zatra-hero-breath:24px;
  }
}