/* ═══════════════════════════════════════════════════════════════════
   Unified page hero (owner request 1405/07/27) — loaded LAST.
   One look for every Page Builder hero:
   · desktop: full photo, copy anchored to the bottom edge on a soft
     bottom shade, so faces and the upper image stay clear;
   · phones: photo band on top, copy below it on navy (no text on faces).
   Breadcrumb / eyebrow / badges are no longer rendered (_hero.html).
   ═══════════════════════════════════════════════════════════════════ */

html .wp-page .ec-hero.wp-designed.wp-hero--panoramic {
  --hc-navy: #0b1220;
  background-color: var(--hc-navy) !important;
}

/* Bottom-only shade (ignores per-page overlay opacity so all pages match). */
html .wp-page .ec-hero.wp-designed.wp-hero--panoramic::before {
  background: linear-gradient(
    180deg,
    rgba(11, 18, 32, 0) 0%,
    rgba(11, 18, 32, 0) 46%,
    rgba(11, 18, 32, 0.55) 70%,
    rgba(11, 18, 32, 0.9) 100%
  ) !important;
  opacity: 1 !important;
}

html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 0 clamp(1.6rem, 3.2vw, 2.6rem) !important;
}

html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy {
  width: 100% !important;
  max-width: 50rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.55rem !important;
  text-align: center !important;
}

html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .ec-h1,
html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .wp-typo-heading {
  margin: 0 !important;
  max-width: 100% !important;
  font-size: clamp(1.65rem, 2.3vw, 2.3rem) !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  text-align: center !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45) !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .ec-lead,
html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .wp-typo-desc {
  margin: 0 auto !important;
  max-width: 42rem !important;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem) !important;
  line-height: 1.9 !important;
  color: rgba(248, 250, 252, 0.92) !important;
  text-align: center !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4) !important;
}

html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .ec-actions,
html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .da-hero-cta {
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  margin: 0.45rem 0 0 !important;
  width: auto !important;
}

/* Safety: anything legacy left in the hero copy stays hidden. */
html .wp-page .ec-hero .wp-hero-breadcrumb,
html .wp-page .ec-hero .ec-hero__eyebrow,
html .wp-page .ec-hero .wp-hero-badges {
  display: none !important;
}

/* Desktop: one height for every page. */
@media (min-width: 981px) {
  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic,
  html .wp-page .wp-sec--hero.wp-designed.wp-hero--panoramic {
    height: clamp(480px, 70vh, 660px) !important;
    min-height: clamp(480px, 70vh, 660px) !important;
    max-height: none !important;
  }
}

/* Tablet */
@media (min-width: 721px) and (max-width: 980px) {
  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic,
  html .wp-page .wp-sec--hero.wp-designed.wp-hero--panoramic {
    height: 460px !important;
    min-height: 460px !important;
    max-height: none !important;
  }
}

/* Phones: photo band on top, copy underneath on navy. */
@media (max-width: 720px) {
  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic,
  html .wp-page .wp-sec--hero.wp-designed.wp-hero--panoramic {
    --hc-band: min(68vw, 300px);
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background-image: none !important;
    background-color: var(--hc-navy) !important;
    display: block !important;
    position: relative !important;
  }

  /* The photo itself */
  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: var(--hc-band) !important;
    background-image: var(--wp-hero-bg-image, none) !important;
    background-size: cover !important;
    background-position: var(--wp-hero-bg-pos-mobile, var(--wp-hero-bg-pos, center)) !important;
    background-repeat: no-repeat !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Short fade from the photo into the navy copy area */
  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic::before {
    inset: 0 0 auto 0 !important;
    height: var(--hc-band) !important;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0) 72%, rgba(11, 18, 32, 1) 100%) !important;
    z-index: 1 !important;
  }

  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: auto !important;
    padding: calc(var(--hc-band) - 6px) 16px 1.6rem !important;
  }

  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy {
    gap: 0.5rem !important;
  }

  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .ec-h1,
  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .wp-typo-heading {
    font-size: clamp(1.3rem, 5.6vw, 1.6rem) !important;
    line-height: 1.6 !important;
    text-shadow: none !important;
  }

  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .ec-lead,
  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .wp-typo-desc {
    font-size: 0.95rem !important;
    text-shadow: none !important;
  }

  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .ec-actions,
html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .da-hero-cta {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .ec-actions > *,
html .wp-page .ec-hero.wp-designed.wp-hero--panoramic .wp-hero-pano__copy .da-hero-cta > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}