/* ── hero-banner ─────────────────────────────────────────────────────────── */
.hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-banner[data-hero-height="compact"] { min-height: 42vh; }
.hero-banner[data-hero-height="tall"]    { min-height: 62vh; }
.hero-banner[data-hero-height="full"]    { min-height: 100svh; }

.hero-banner__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-banner__media img,
.hero-banner__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-banner__video { position: absolute; inset: 0; }

.hero-banner[data-hero-focus="top"]    .hero-banner__media img { object-position: top; }
.hero-banner[data-hero-focus="bottom"] .hero-banner__media img { object-position: bottom; }
.hero-banner[data-hero-focus="left"]   .hero-banner__media img { object-position: left; }
.hero-banner[data-hero-focus="right"]  .hero-banner__media img { object-position: right; }

/* The scrim is what makes the headline legible over a photograph. Without it a
   banner is at the mercy of whatever the client uploaded. */
.hero-banner[data-hero-scrim]:not([data-hero-scrim="none"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, var(--hero-scrim-alpha, .45));
}

.hero-banner[data-hero-layout="gradient"]::before {
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, calc(var(--hero-scrim-alpha, .45) + .2)) 0%,
    rgba(0, 0, 0, var(--hero-scrim-alpha, .45)) 45%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Copy sits on a photo, so it is light regardless of the band setting — except
   in `minimal`, which has no photo and follows the band like any section. */
.hero-banner:not([data-hero-layout="minimal"]) .hero-banner__content {
  color: var(--hero-on-scrim);
}
.hero-banner:not([data-hero-layout="minimal"]) .hero-banner__heading {
  color: var(--hero-on-scrim);
}

.hero-banner[data-hero-layout="minimal"] {
  background: var(--hero-primary);
  color: var(--hero-on-primary);
}
.hero-banner[data-hero-layout="minimal"] .hero-banner__heading { color: var(--hero-on-primary); }

.hero-banner__inner { width: 100%; }
.hero-banner__content { max-width: var(--hero-measure); }

.hero-banner[data-hero-layout="overlay-center"] .hero-banner__content {
  margin-inline: auto;
  text-align: center;
}
.hero-banner[data-hero-layout="overlay-center"] .hero-block__actions { justify-content: center; }

.hero-banner[data-hero-layout="boxed-card"] .hero-banner__content {
  background: var(--hero-surface);
  color: var(--hero-text);
  padding: var(--hero-card-pad);
  border-radius: var(--hero-radius-panel);
  box-shadow: var(--hero-shadow-float);
}
.hero-banner[data-hero-layout="boxed-card"] .hero-banner__heading { color: var(--hero-secondary); }

.hero-banner__eyebrow {
  margin: 0 0 .75rem;
  font-size: var(--hero-eyebrow-size);
  font-weight: var(--hero-eyebrow-weight);
  letter-spacing: var(--hero-eyebrow-tracking);
  text-transform: var(--hero-eyebrow-transform);
  opacity: .9;
}
.hero-banner__heading { margin: 0 0 1rem; }
.hero-banner__body > :first-child { margin-top: 0; }
.hero-banner__body > :last-child  { margin-bottom: 0; }

/* A looping background video is exactly what this setting exists to stop. */
@media (prefers-reduced-motion: reduce) {
  .hero-banner__video { display: none; }
}