/* Page banner: centered on the primary color with the diagonal hatch — breadcrumb, a pressed chip (subtitle or hero
 * eyebrow), H1, intro, optional actions — closed by the triple-stripe band. No photo: the page's featured image stays
 * editable through the hidden editor image. */
.ocf-page-header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-top: clamp(48px, 5vw, 76px);
    padding-bottom: calc(clamp(48px, 5vw, 72px) + var(--cardiff-stripe) * 3);
    background: var(--ocf-primary);
    color: var(--ocf-heading-alt);
    text-align: center;
}

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

.ocf-page-header__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.ocf-page-header__headline {
    margin-top: calc(var(--ocf-space-unit) * 1.5);
    color: inherit;
    white-space: pre-line;
}

.ocf-page-header__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--ocf-space-unit) * 0.5);
    margin-bottom: calc(var(--ocf-space-unit) * 1.5);
    color: var(--ocf-body-alt);
    font-size: var(--ocf-font-small-size);
}

.ocf-page-header__breadcrumb [aria-current="page"] { color: var(--ocf-heading-alt); font-weight: var(--font-weight-semibold); }
.ocf-page-header__breadcrumb a:hover { color: var(--ocf-heading-alt); text-decoration: underline; }

.ocf-page-header__subtitle {
    max-width: 44rem;
    margin-top: calc(var(--ocf-space-unit) * 1.25);
    color: var(--ocf-body-alt);
    font-size: calc(var(--font-body-size) * 1.11);
}

.ocf-page-header__actions { justify-content: center; margin-top: calc(var(--ocf-space-unit) * 2); gap: calc(var(--ocf-space-unit) * 1.125); }

.ocf-page-header__rule {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.ocf-page-header__editor-image,
.ocf-page-header__divider { display: none; }

@media (max-width: 767px) {
    .ocf-page-header__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .ocf-page-header__actions > * { width: 100%; }
}