/*
 * Subpage hero (.interior-banner) — reduced height, static image, title centred
 * in the part of the hero not covered by the fixed header.
 * HubSpot ticket 45294704551, 2026-09-30. Enqueued after style.css in inc/base/scripts.php.
 *
 *  ≥1201px  header 129px overlays hero   hero 300px
 *  993–1200 header  95px overlays hero   hero 300px
 *  768–992  hero sits below header        hero 260px
 *  ≤767     hero sits below header        hero 200px
 */
.interior-banner {
  --hero-header: 129px;
  height: 300px;
  min-height: 300px;
  max-height: none;
}
/* White fade behind the fixed header so the nav stays readable over any photo.
   Only where the header overlays the hero (≥993px); ends above the page title. */
.interior-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--hero-header) + 40px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.75) 55%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 3;
}
.interior-banner .banner-wrapping img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.interior-banner .title-page {
  top: calc(var(--hero-header) + (100% - var(--hero-header)) / 2);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 65%;
  padding: 0;
}
.interior-banner .title-page h1 {
  font-size: 48px !important;
  line-height: 1.05;
}

@media (max-width: 1200px) {
  .interior-banner { --hero-header: 95px; }
  .interior-banner .title-page h1 { font-size: 42px !important; }
}
@media (max-width: 992px) {
  .interior-banner::after { display: none; }
  .interior-banner {
    --hero-header: 0px;
    height: 260px;
    min-height: 260px;
  }
  .interior-banner .title-page { width: 90% !important; }
  .interior-banner .title-page h1 { font-size: 40px !important; }
}
@media (max-width: 767px) {
  .interior-banner {
    height: 200px;
    min-height: 200px;
  }
  .interior-banner .title-page h1 { font-size: 28px !important; }
}

/* Search results: style.css sets body.search-results { padding-top: 0 }, so ≤991px the fixed
   header covered the 200px hero and its title. Give it the same offset as other pages. */
@media (max-width: 991px) {
  body.search-results { padding-top: 95px; }
}

/* Advanced Search template (page-templates/search.php): body is padded below the header, so
   the hero is not overlaid — no header offset and no fade. */
body.page-template-search .interior-banner { --hero-header: 0px; }
body.page-template-search .interior-banner::after { display: none; }