/* F11 proposal ONLY — tighter phone layout for Smart Total Home (CL-0007).
   Do not deploy without Boss's own yes.
   Scoped to max-width: 699px so 1440 and up stay unchanged.
   No copy edits and no content removed. Visible text stays the same.

   r2: do not shorten the stacked hero photo — that pulled the mascot
   down over the review/BBB pills. The win is dropping the forced 833px
   hero height (empty band under the chips) and tightening section padding.
*/

@media (max-width: 699px) {

  /* Beat nav1.css :root tokens (64 / 40). Leave --angle-depth at 40 so
     the diagonal section seams stay aligned. */
  html:root {
    --sec-pad-y: 48px !important;
  }

  /* --- Inner (non-Home) heroes: drop the forced 833px shared height ---
     That height leaves an empty navy band under the trust chips and delays
     the first page-specific block. Size the hero to its content instead. */
  html body main section.hero.ab-hero:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html body.t-svc.t-city main section.hero.ab-hero:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html body.t-hub1 main section.hero.ab-hero.svc-hero:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html body.t-about main section.hero.ab-hero:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html body.t-about .hero.ab-hero:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    --sth-hero-h: auto;
    --hero-h: auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 24px !important;
  }

  /* FAQ / resources equalizer was holding .wrap.hc at 478px on a 390 viewport */
  html body.res-eq section.hero > .wrap.hc:not(#_):not(#_) {
    min-height: 0 !important;
  }

  /* Home: tighten only the space under the trust chips. Do not change the
     photo band or mascot — those are a carefully seated composition. */
  html body:not(.inner) main > section.hero:not(.ab-hero):not(#_):not(#_):not(#_) {
    padding-bottom: 56px !important;
    min-height: 0 !important;
  }
  html body:not(.inner) main > section.hero:not(.ab-hero) .ctas:not(#_):not(#_),
  html body:not(.inner) main > section.hero:not(.ab-hero) #hero-ctas:not(#_):not(#_) {
    margin: 16px 0 10px !important;
  }
  html body:not(.inner) main > section.hero:not(.ab-hero) .trust:not(#_):not(#_) {
    margin: 8px 0 0 !important;
  }
  html body:not(.inner) main > section.hero:not(.ab-hero) .lead:not(#_):not(#_) {
    margin-top: 6px !important;
  }

  /* --- Section padding. Token change covers var(--sec-pad-y) rules;
     baked 104 / 112 / 170 values need explicit overrides. --- */
  html body main > .sec:not(#book):not(.cut-l):not(#_):not(#_),
  html body main > section.sec:not(#book):not(.cut-l):not(#_):not(#_) {
    padding-top: var(--sec-pad-y) !important;
    padding-bottom: var(--sec-pad-y) !important;
  }
  html body main > .sec.cut-l:not(#_):not(#_),
  html body main > section.sec.cut-l:not(#_):not(#_),
  html body main > #offers.cut-l:not(#_):not(#_),
  html body main > #reviews.cut-l:not(#_):not(#_),
  html body main > #how.cut-l:not(#_):not(#_) {
    padding-top: calc(var(--sec-pad-y) + var(--angle-depth)) !important;
    padding-bottom: calc(var(--sec-pad-y) + var(--angle-depth)) !important;
  }

  /* First block after the hero was padded 170px to clear the forced 833px hero */
  html body main > .sec.hub-cards:not(#_):not(#_):not(#_),
  html body main > section.sec.hub-cards:not(#_):not(#_):not(#_),
  html body.t-hub1 main > .sec.hub-cards.t1-full:not(#_):not(#_):not(#_),
  html body main > #find.sec:not(#_):not(#_),
  html body main > #services.sec:not(#_):not(#_) {
    padding-top: 56px !important;
  }

  /* FAQ category bands and a few bottoms were baked at 112 / 104 */
  html body main > [id^="cat-"].sec:not(#_):not(#_),
  html body main > #talk.sec:not(#_):not(#_),
  html body main > #find.sec:not(#_):not(#_) {
    padding-bottom: 48px !important;
  }
  html body main > #after-hours.sec:not(#_):not(#_),
  html body main > #faq.sec:not(#_):not(#_),
  html body main > #brands:not(#_):not(#_),
  html body main > .brx:not(#_):not(#_),
  html body main > #emergency.sec:not(#_):not(#_),
  html body main > #city-services.sec:not(#_):not(#_),
  html body main > #rel.sec:not(#_):not(#_),
  html body main > #club.sec:not(#_):not(#_) {
    padding-bottom: var(--sec-pad-y) !important;
  }

  html body section#book.sec.fin:not(#_):not(#_),
  html body section#book.sec.fin.bk:not(#_):not(#_) {
    padding-top: 48px !important;
    padding-bottom: 28px !important;
  }

  /* --- Internal rhythm (copy unchanged) --- */
  html body main > .sec .intro:not(#_):not(#_) {
    margin-bottom: 20px !important;
  }
  html body main > .sec .ctas:not(#_):not(#_) {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  html body.t-hub1 .h4-cards:not(#_):not(#_) {
    gap: 12px !important;
    margin-top: 16px !important;
  }
  html body #local-homes.cy-lh .lh-grid:not(#_):not(#_) {
    gap: 12px !important;
  }
  html body #city-services.cy-sv-spines-on .cy-sv-card:not(#_):not(#_) {
    padding: 12px !important;
  }
}