/* =========================================================================
   PAGE HEADER
   The hero band used across most interior pages. Renders the eyebrow + h1 +
   optional lead, with an optional background image variant.
   Markup: src/_includes/partials/page-header.njk
   Consumes tier 2 theme tokens only.
   ========================================================================= */

.page-header {
  padding-block: var(--theme-space-region);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    ellipse at 50% 0%,
    color-mix(in srgb, var(--theme-color-brand-primary) 14%, transparent),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.page-header > * {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
  max-width: 22ch;
  margin-inline: auto;
}

.page-header .lead {
  max-width: 56ch;
  margin-inline: auto;
  color: var(--theme-color-text-default);
}

/* -------------------------------------------------------------------------
   Image-backed variant — set --page-header-image inline from frontmatter.
   ------------------------------------------------------------------------- */

.page-header--image {
  padding-block: clamp(4rem, 8vw + 1rem, 7rem);
  background-image: var(--page-header-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Swap the brand-tint overlay for a soft white wash that keeps the painted
   background visible while ensuring dark headings/body copy stay readable. */
.page-header--image::before {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--theme-color-background-default) 35%, transparent) 0%,
    color-mix(in srgb, var(--theme-color-background-default) 55%, transparent) 100%
  );
}