/* Page banner: a full-bleed photo under an even sheet (the dark band without a photo) with the transparent header on
 * top: H1, intro and, on detail pages and About, the primary pill + an outline call pill. Copy sits left, centered
 * vertically. */
.ocf-page-header {
    --lisbon-panel-sheet: var(--lisbon-overlay);
    display: flex;
    align-items: center;
    min-height: 600px;
    color: var(--ocf-heading-alt);
}

.ocf-page-header__inner {
    position: relative;
    padding-block: calc(var(--lisbon-bar-height) + 96px) 88px;
}

.ocf-page-header__content { max-width: 860px; }


.ocf-page-header__headline {
    color: inherit;
    font-size: clamp(32px, 4.6vw, 66px);
    line-height: 1;
    white-space: pre-line;
}

.ocf-page-header__subtitle {
    max-width: 600px;
    margin-top: 20px;
    color: color-mix(in srgb, var(--ocf-heading-alt) 86%, transparent);
    font-size: calc(var(--font-body-size) * 1.06);
    line-height: 1.55;
}

.ocf-page-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: color-mix(in srgb, var(--ocf-heading-alt) 82%, transparent);
    font-size: calc(var(--font-body-size) * 0.88);
}

.ocf-page-header__actions { margin-top: 32px; gap: 14px; }
.ocf-page-header__actions .btn-secondary svg { width: 16px; height: 16px; }

@media (max-width: 1023px) {
    .ocf-page-header { min-height: 480px; }
}

@media (max-width: 639px) {
    .ocf-page-header { min-height: 0; }
    .ocf-page-header__inner { padding-block: calc(var(--lisbon-bar-height) + 48px) 48px; }
    .ocf-page-header__actions { flex-direction: column; align-items: stretch; }
}