/* Shared inner-page banner — see template-parts/banner.php for why this
   replaces the source's 10 near-identical per-page banner selectors. */
.page-banner { position: relative; overflow: hidden; min-height: 400px; display: flex; align-items: center; }
.page-banner img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.page-banner::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, color-mix(in oklch, var(--ink) 68%, transparent) 0%, color-mix(in oklch, var(--ink) 84%, transparent) 100%);
}
.banner-content { position: relative; z-index: 2; padding-block: 4rem; color: var(--bg); text-align: center; }
.page-banner h1 { color: var(--bg); margin-top: 0.6rem; font-size: clamp(2.5rem, 5.5vw, 4rem); text-shadow: 0 2px 20px oklch(0% 0 0 / 0.35); }
.crumb { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sky); margin-bottom: 0.9rem; }
.crumb a { color: var(--sky); }
.page-banner .eyebrow { color: var(--sky); }

/* Blog archive banner: own photo + crop. */
.page-banner--blog img { object-position: 50% 30%; }

/* Blog post banner: shorter, narrower H1, 3-level breadcrumb (content only). */
.page-banner--article { min-height: 320px; }
.page-banner--article h1 { font-size: clamp(2.1rem, 4.5vw, 3.25rem); }

@media (max-width: 560px) {
  .page-banner { min-height: 320px; }
}