/* ==========================================================================
   page-hero.css  —  interior-page hero (photo panel + headline)
   --------------------------------------------------------------------------
   History: the bundle carried `.hero-bg{z-index:-2}` with nothing creating a
   stacking context, so the photo painted behind the page background and was
   invisible. And `.hero-bg img` had no sizing rule, so the photo was stretched
   (object-fit defaults to `fill`) instead of cropped.

   Current design: the photo is a centred panel (max 1180px) with rounded
   corners, sitting on the page background — not edge-to-edge.

   Loaded last so it wins over the older bundle rules.
   ========================================================================== */

.page-hero {
  position: relative;
  isolation: isolate;          /* keep the hero's own layers inside the hero */
  overflow: hidden;
  padding: 110px 16px 50px;
  min-height: 30vh;
}

/* shared geometry for the photo and its scrim */
.page-hero > .hero-bg,
.page-hero > .hero-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 48px));
  border-radius: 22px;
  overflow: hidden;
}

/* the photo layer */
.page-hero > .hero-bg {
  /* 2, not 0: the section's own ::before/::after (grid + aurora) share the
     same paint level, and the animated ::after otherwise paints over the
     photo. Positive levels keep the photo unambiguously on top. */
  z-index: 2;
  pointer-events: none;
}

.page-hero > .hero-bg img,
.page-hero > .hero-bg picture,
.page-hero > .hero-bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* the scrim that keeps white headline text readable on any photo */
.page-hero > .hero-overlay {
  z-index: 3;
  pointer-events: none;
  /* A soft pool of shade behind the headline rather than a flat darkening
     wash — the photo stays readable around the edges. */
  background:
    radial-gradient(ellipse 90% 70% at 50% 52%,
      rgba(8, 10, 14, 0.60) 0%,
      rgba(8, 10, 14, 0.28) 62%,
      rgba(8, 10, 14, 0.10) 100%),
    linear-gradient(180deg,
      rgba(8, 10, 14, 0.30) 0%,
      rgba(8, 10, 14, 0.55) 100%);
}

/* No photo on this page? Then don't draw the panel or its scrim at all.
   (Browsers without :has() simply keep the scrim above — harmless.) */
.page-hero:not(:has(> .hero-bg img)) > .hero-overlay {
  background: none;
}

/* the text sits above both */
.page-hero > .hero-content {
  position: relative;
  z-index: 4;
}

/* On narrow screens tighten the panel inset and bias the crop upward so the
   horizon / roofline stays in frame instead of the foreground. */
@media (max-width: 767px) {
  .page-hero > .hero-bg,
  .page-hero > .hero-overlay {
    width: calc(100% - 24px);
    border-radius: 16px;
  }
  .page-hero > .hero-bg img {
    object-position: center 42%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero > .hero-bg img { transition: none !important; }
}