/* 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; }
}

/* OCF_AGENT_BLOCK:learning-playful-page-banners START */
body .ocf-page-header { min-height: var(--ocf-page-header-height); --lisbon-panel-sheet: rgba(37, 73, 28, .82); }
body .ocf-page-header__inner { padding-block: 72px 88px; }
body .ocf-page-header__headline { font-size: var(--font-h1-size); line-height: 1.08; }
body .ocf-page-header::after { content: ""; position: absolute; z-index: 1; bottom: -1px; left: 0; width: 100%; height: 34px; background: var(--ocf-bg); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 30Q180 80 360 35T720 35T1080 35T1440 30V80H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 30Q180 80 360 35T720 35T1080 35T1440 30V80H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@media (max-width: 639px) { body .ocf-page-header { min-height: 0; } body .ocf-page-header__inner { padding-block: 48px 64px; } }
/* OCF_AGENT_BLOCK:learning-playful-page-banners END */