/**
 * Page banner.
 *
 * Full-bleed media with the logo centred above it and optional text overlaid.
 * The logo sits inside the banner rather than in the header, so it positions
 * against the element it actually overlaps. Positioning it from the header
 * would need negative offsets tied to the banner's height, which varies.
 */

.page-banner {
  --_ratio: auto;
  --_ratio-narrow: auto;
  --_logo-size: clamp(4rem, 2rem + 8vw, 9rem);

  position: relative;
  display: grid;
  grid-template-areas: "stack";
  inline-size: 100%;
  background-color: var(--color-shell);
}

.page-banner > * {
  grid-area: stack;
}

/* ----------------------------------------------------------------------
   Media
   ---------------------------------------------------------------------- */

.page-banner__media {
  position: relative;
  inline-size: 100%;
  min-inline-size: 0;
}

/**
 * Logo scrim.
 *
 * The legacy site had this on .hero-shots::after but wrote
 * linear-gradient(top, ...), which is invalid in the standard property, so only
 * the prefixed lines ever rendered it. Rewritten with `to bottom`.
 *
 * Worst case is a pure white photograph: 50% black composites to #808080, and a
 * white logo on that measures 3.95:1. WCAG 1.4.11 sets 3:1 for non-text
 * contrast, so that clears it. Do not reduce the 0.5 stop.
 */
.page-banner--has-logo .page-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.6) 0%,
    rgb(0 0 0 / 0.2) 40%,
    rgb(0 0 0 / 0) 70%
  );
}

.page-banner__image {
  inline-size: 100%;
  block-size: auto;
  display: block;
  aspect-ratio: var(--_ratio-narrow);
  object-fit: cover;
  object-position: center center;
}

@media (min-width: 48rem) {
  .page-banner__image {
    aspect-ratio: var(--_ratio);
  }
}

.page-banner--ratio-cinematic {
  --_ratio: 21 / 9;
  --_ratio-narrow: 3 / 2;
}

.page-banner--ratio-wide {
  --_ratio: 16 / 7;
  --_ratio-narrow: 4 / 3;
}

.page-banner--ratio-standard {
  --_ratio: 3 / 2;
  --_ratio-narrow: 1 / 1;
}

/* Respects the source ratio. Correct for the cropped 4:1 legacy assets. */
.page-banner--ratio-natural .page-banner__image {
  aspect-ratio: auto;
  object-fit: fill;
}

/* ----------------------------------------------------------------------
   Logo

   A real <img> from the media library, not a CSS background. That keeps it
   editable, gives it alt text, and lets the browser size it correctly.
   Centred, above the media in the stacking order.
   ---------------------------------------------------------------------- */

.page-banner__logo {
  z-index: 3;
  justify-self: center;
  align-self: start;
  display: block;
  margin-block-start: var(--space-s);
  line-height: 0;
}

.page-banner__logo-image {
  block-size: var(--_logo-size);
  inline-size: auto;
  max-inline-size: min(80vw, 30rem);
  object-fit: contain;
}

.page-banner__logo:focus-visible {
  outline: var(--focus-width) solid var(--color-surface);
  outline-offset: var(--focus-offset);
}

.page-banner--logo-small {
  --_logo-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.page-banner--logo-medium {
  --_logo-size: clamp(4rem, 2rem + 8vw, 9rem);
}

.page-banner--logo-large {
  --_logo-size: clamp(5rem, 2.5rem + 11vw, 13rem);
}

/* ----------------------------------------------------------------------
   Text

   Scrim uses the same gradient as the carousel captions, for the same reason:
   contrast over arbitrary photography has to have a predictable floor. White
   over 85% black is 15:1, over 55% black is 4.74:1. Both clear AA.
   Do not lighten the 0.55 stop.
   ---------------------------------------------------------------------- */

.page-banner__content {
  position: relative;
  z-index: 2;
  display: grid;
  inline-size: 100%;
  padding: var(--space-l) var(--gutter);
  pointer-events: none;
}

.page-banner--text-bottom .page-banner__content {
  align-content: end;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.85) 0%,
    rgb(0 0 0 / 0.55) 30%,
    rgb(0 0 0 / 0) 70%
  );
}

.page-banner--text-center .page-banner__content {
  align-content: center;
  justify-items: center;
  text-align: center;
  background: rgb(0 0 0 / 0.55);
}

.page-banner__content-inner {
  display: grid;
  gap: var(--space-2xs);
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  pointer-events: auto;
}

.page-banner__eyebrow {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-surface);
}

.page-banner__heading {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  color: var(--color-surface);
  text-wrap: balance;
}

/* ----------------------------------------------------------------------
   No media

   A banner with text but no image falls back to a solid panel rather than
   rendering white text on white.
   ---------------------------------------------------------------------- */

.page-banner:not(.page-banner--has-media) .page-banner__content {
  background: var(--color-shell);
  min-block-size: 40vh;
}

/* ----------------------------------------------------------------------
   Utility
   ---------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}