/* Page banner: copy on the warm light stage (breadcrumb, eyebrow, H1, intro, optional actions) on the left; the page
 * image fills the right side cut on a slant with the primary slash. Below 1024px the photo stacks under the copy
 * with a slanted top edge. Without an image the copy simply sits on the stage. */
.ocf-page-header {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 520px;
    background: var(--ocf-bg-alt);
    border-top: 1px solid var(--ocf-border-light);
    color: var(--ocf-heading);
}

.ocf-page-header__inner { position: relative; z-index: 1; padding-block: calc(var(--ocf-space-unit) * 6); }

.ocf-page-header__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 620px;
}

.ocf-page-header:not(.ocf-page-header--image) .ocf-page-header__content { max-width: 860px; }

.ocf-page-header__headline {
    margin: 0;
    color: var(--ocf-heading);
    font-size: clamp(38px, 4.6vw, 68px);
    white-space: pre-line;
}

.ocf-page-header__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--ocf-space-unit) * 0.6);
    margin-bottom: calc(var(--ocf-space-unit) * 1.75);
    color: color-mix(in srgb, var(--ocf-body) 80%, var(--ocf-bg));
    font-size: var(--ocf-font-small-size);
}

.ocf-page-header__breadcrumb a { color: inherit; }
.ocf-page-header__breadcrumb a:hover { color: var(--ocf-link); }
.ocf-page-header__breadcrumb [aria-current] { color: var(--ocf-heading); font-weight: var(--font-weight-semibold); }

.ocf-page-header__tag { margin-bottom: calc(var(--ocf-space-unit) * 1.5); }
.ocf-page-header__tag a { color: inherit; }
.ocf-page-header__tag a:hover { color: var(--ocf-link-hover); }

.ocf-page-header__subtitle {
    max-width: 560px;
    margin-top: calc(var(--ocf-space-unit) * 1.375);
    color: var(--ocf-body);
    font-size: calc(var(--font-body-size) * 1.11);
}

.ocf-page-header__actions { margin-top: calc(var(--ocf-space-unit) * 2.125); display: flex; flex-wrap: wrap; gap: calc(var(--ocf-space-unit) * 1); }

.ocf-page-header__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 48.6%;
}

.ocf-page-header__media .portola-slash { left: -10px; }

@media (max-width: 1023px) {
    .ocf-page-header { display: block; min-height: 0; }
    .ocf-page-header__inner { padding-block: calc(var(--ocf-space-unit) * 3.5) calc(var(--ocf-space-unit) * 2.75); }
    .ocf-page-header__content { max-width: 640px; }
    .ocf-page-header__media {
        position: relative;
        inset: auto;
        width: 100%;
        height: 360px;
        --strip-s: 56px;
        isolation: isolate;
    }

    .ocf-page-header__media .portola-cut { inset: 0; clip-path: polygon(0 var(--strip-s), 100% 0, 100% 100%, 0 100%); }

    .ocf-page-header__media .portola-slash {
        inset: 0;
        width: auto;
        background: var(--portola-grad);
        clip-path: polygon(0 calc(var(--strip-s) - 12px), 100% -12px, 100% 100%, 0 100%);
        z-index: -1;
    }

    /* The stacked photo follows the copy. */
    .ocf-page-header--image { display: flex; flex-direction: column-reverse; }
}

@media (max-width: 767px) {
    .ocf-page-header__inner { padding-block: calc(var(--ocf-space-unit) * 2.5) calc(var(--ocf-space-unit) * 2); }
    .ocf-page-header__media { height: 260px; --strip-s: 36px; }
    .ocf-page-header__actions { flex-direction: column; align-items: stretch; width: 100%; }
}