/* ==================== HERO FIT: SHOW 100% OF EVERY HERO IMAGE ====================
   Loaded LAST on every page (just before </head>) so it overrides the older,
   layered hero rules in style.css, local-landing.css, index-custom.css and
   residential-cleaning.css, which used background-size: cover and cropped
   the photo differently at every breakpoint.

   Every hero photo is now shown whole (background-size: contain) in a band
   sized to the photo's own aspect ratio. The band is full width until it
   reaches --hero-max-h; past that the photo is centered and the sides are
   filled with a blurred, darkened copy of the same photo instead of
   cropping it. On desktop the band starts below the fixed header so the
   header never covers the top of the photo (on <=992px the body is already
   padded below the solid header, see style.css).

   --hero-w / --hero-h: natural pixel size of the page's hero photo.
   Three hero structures are handled:
     A. .hero.hero-inner with an inline photo: town/service, local, reviews,
        privacy, referral and thank-you pages. The photo band is ::before;
        the heading and quote form flow below it.
     B. Image-only hero sections: .hero-home (index) and the 7 service hubs.
        The section itself is the band; the photo is drawn in ::after.
     C. .hero-image-band: a standalone band element used on pages whose hero
        is a text banner (about-us, cleaning-for-a-reason).
*/

:root {
  --hero-max-h: 72vh;
  --hero-offset: 0px;
  --hero-w: 1400;
  --hero-h: 788;
}

@media (min-width: 993px) {
  :root { --hero-offset: var(--header-h, 80px); }
}

/* ---------------------------------------------------------------- A ---- */
.hero.hero-inner[style*="url("] {
  display: block !important;
  position: relative;
  min-height: 0 !important;
  padding-top: var(--hero-offset) !important;
  container-type: inline-size;
  background-size: 0 0 !important;          /* the section's own copy is never shown */
  background-attachment: scroll !important;
  background-color: var(--primary-navy, #3a4ea7) !important;
}

.hero.hero-inner[style*="url("]::before {
  content: '' !important;
  display: block !important;
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  width: 100% !important;
  height: min(calc(100vw * var(--hero-h) / var(--hero-w)), var(--hero-max-h)) !important;
  height: min(calc(100cqw * var(--hero-h) / var(--hero-w)), var(--hero-max-h)) !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  background-image: inherit !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* Blurred fill behind the band (only visible when the band is capped and
   the photo is narrower than the screen). */
.hero.hero-inner[style*="url("]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hero-offset);
  z-index: 0;
  height: min(calc(100vw * var(--hero-h) / var(--hero-w)), var(--hero-max-h));
  height: min(calc(100cqw * var(--hero-h) / var(--hero-w)), var(--hero-max-h));
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(0.55);
  transform: scale(1.08);
  pointer-events: none;
}

.hero.hero-inner[style*="url("] > .hero-grid,
.hero.hero-inner[style*="url("] > .hero-content {
  position: relative;
  z-index: 2;
}

/* thank-you.html: centered message below the photo. The message carries its
   own full-width navy backdrop so its white text never depends on the
   section's background being painted (it rendered white-on-white in some
   captures); the text column stays at the inline 800px via padding. */
.hero.hero-inner.hero-thankyou[style*="url("] {
  --hero-max-h: 38vh;                       /* keep the confirmation above the fold */
  padding-bottom: 0 !important;             /* the navy message block runs to the footer */
}

.hero.hero-inner.hero-thankyou[style*="url("] > .hero-content {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 2.5rem max(1.5rem, calc((100% - 800px) / 2)) 3rem;
  background: linear-gradient(120deg, var(--primary-navy, #3a4ea7) 0%, #24316e 100%);
  color: #fff;
}

@media (max-width: 768px) {
  /* clears the fixed .mobile-cta-bar */
  .hero.hero-inner.hero-thankyou[style*="url("] > .hero-content {
    padding-bottom: 6rem;
  }
}

/* ---------------------------------------------------------------- B ---- */
.hero.hero-home              { --hero-w: 1600; --hero-h: 1200; }
.hero.hero-residential,
.hero.hero-move,
.hero.hero-office,
.hero.hero-commercial        { --hero-w: 731;  --hero-h: 412; }
.hero.hero-spring            { --hero-w: 1600; --hero-h: 670; }
.hero.hero-airbnb            { --hero-w: 780;  --hero-h: 520; }
.hero.hero-postconstruction  { --hero-w: 2496; --hero-h: 1664; }

.hero.hero-home,
.hero.hero-residential,
.hero.hero-spring,
.hero.hero-move,
.hero.hero-airbnb,
.hero.hero-office,
.hero.hero-postconstruction,
.hero.hero-commercial {
  display: block !important;
  position: relative;
  box-sizing: content-box !important;
  width: 100% !important;
  min-height: 0 !important;
  height: min(calc(100vw * var(--hero-h) / var(--hero-w)), var(--hero-max-h)) !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: var(--hero-offset) solid var(--primary-navy, #3a4ea7);
  background-size: 0 0 !important;
  background-attachment: scroll !important;
  background-color: var(--primary-navy, #3a4ea7) !important;
  overflow: hidden;
}

.hero.hero-home::before,
.hero.hero-residential::before,
.hero.hero-spring::before,
.hero.hero-move::before,
.hero.hero-airbnb::before,
.hero.hero-office::before,
.hero.hero-postconstruction::before,
.hero.hero-commercial::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: none !important;
  background-image: inherit !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(22px) brightness(0.55);
  transform: scale(1.08);
}

.hero.hero-home::after,
.hero.hero-residential::after,
.hero.hero-spring::after,
.hero.hero-move::after,
.hero.hero-airbnb::after,
.hero.hero-office::after,
.hero.hero-postconstruction::after,
.hero.hero-commercial::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: inherit;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------- C ---- */
.hero-image-band {
  /* The photo is set inline as background-image (a url() inside a custom
     property would resolve against this stylesheet's folder); the band's
     own copy is hidden and the pseudo-elements inherit it. */
  background-size: 0 0 !important;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: min(calc(100vw * var(--hero-h) / var(--hero-w)), var(--hero-max-h));
  border-top: var(--hero-offset) solid var(--primary-navy, #3a4ea7);
  box-sizing: content-box;
  background-color: var(--primary-navy, #3a4ea7);
}

.hero-image-band::before,
.hero-image-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-image-band::before {
  background-size: cover;
  filter: blur(22px) brightness(0.55);
  transform: scale(1.08);
}

.hero-image-band::after {
  background-size: contain;
}

/* The banner that follows a .hero-image-band no longer needs to clear the
   fixed header itself. */
.hero-image-band + .about-hero,
.hero-image-band + .hero-section {
  padding-top: 3.5rem !important;
}

/* The heading/form box under the photo is a left-to-right navy gradient
   (style.css). Its full-bleed side fills use the gradient's start color on
   the left; match the right-hand fill to the gradient's end color so there
   is no visible seam on wide screens. */
.hero.hero-inner[style*="url("] .hero-grid::after,
.hero.hero-inner[style*="url("] > .hero-content::after {
  background: #24316e !important;
}

/* ==================== MOBILE SAFETY NETS ==================== */
@media (max-width: 991px) {
  /* A single grid column must never be wider than the screen: `1fr` alone
     sizes to its widest unbreakable child (e.g. a long nowrap button). */
  .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-grid > * { min-width: 0; }
}

@media (max-width: 600px) {
  /* Long CTA labels wrap instead of pushing the layout sideways. */
  .btn { white-space: normal; text-align: center; }
  img, video, iframe, table { max-width: 100%; }
}