/**
 * Internal-page header band (breadcrumbs + H1 + optional intro).
 * Shared by page.php, page-about.php, page-contact.php,
 * page-services.php, single-service.php, archive.php, search.php,
 * 404.php, and home.php.
 */

.page-header {
  padding-block: var(--space-md) var(--space-xl);
}

.page-header__heading {
  margin-top: var(--space-2xs);
}

.page-header__subheading {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--fs-body-lg);
  max-width: 42rem;
}

.page-header--media .page-header__subheading {
  color: var(--color-text-on-dark-muted);
}

.page-header__intro {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--fs-body-lg);
  max-width: 42rem;
}

.page-header__button {
  margin-top: var(--space-lg);
}

/* With a Header Image: full-bleed background photo behind the band,
   the floating transparent site header overlapping the top of it
   (see header.php / .site-header--transparent), and a dark scrim so
   the breadcrumbs/heading/intro stay readable over the photo. */
.page-header--media {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: clamp(24rem, 20rem + 14vw, 32rem);
  padding-block: clamp(9rem, 6rem + 8vw, 13rem) var(--space-2xl);
  overflow: hidden;
}

.page-header__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(20, 37, 36, 0.35) 0%, rgba(20, 37, 36, 0.78) 100%);
}

.page-header__inner {
  position: relative;
  z-index: 1;
}

.page-header--media .page-header__intro {
  color: var(--color-text-on-dark-muted);
}