/* Reusable Page hero: the Page title and optional Featured Image are native post blocks. */
.be-featured-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 818 / 500;
    isolation: isolate;
    overflow: hidden;
    background: var(--wp--preset--color--cream);
}
.be-featured-hero:has(.be-featured-hero__image img)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(0 0 0 / 64%), rgb(0 0 0 / 25%) 60%, rgb(0 0 0 / 4%));
}
.be-featured-hero__image,
.be-featured-hero__image img {
    display: block;
    width: 100%;
    height: 100%;
}
.be-featured-hero__image {
    position: absolute;
    inset: 0;
    margin: 0;
}
.be-featured-hero__image img { object-fit: cover; object-position: center; }
.be-featured-hero__title {
    position: relative;
    z-index: 2;
    max-width: 12ch;
    margin: 0;
    padding: clamp(32px, 7.8%, 120px) 3.1% 0;
    color: var(--wp--preset--color--cream);
    font-size: clamp(3rem, 4.69vw, 5.5rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.04em;
    overflow-wrap: normal;
}
.be-featured-hero:not(:has(.be-featured-hero__image img)) {
    display: flex;
    align-items: flex-end;
    min-height: 0;
    aspect-ratio: auto;
    padding: clamp(120px, 13vw, 220px) clamp(24px, 5vw, 72px) clamp(54px, 6vw, 100px);
    border-bottom: 1px solid var(--wp--preset--color--ochre);
}
.be-featured-hero:not(:has(.be-featured-hero__image img)) .be-featured-hero__title {
    max-width: 850px;
    padding: 0;
    color: var(--wp--preset--color--charcoal);
}
@media (max-width: 600px) {
    .be-main:has(> .be-featured-hero .be-featured-hero__image img) { padding-top: 0; }
    .be-featured-hero:has(.be-featured-hero__image img) {
        width: calc(100% + var(--be-gutter) + var(--be-gutter));
        margin-left: calc(-1 * var(--be-gutter));
        aspect-ratio: 320 / 194;
    }
    .be-featured-hero__title {
        max-width: 12ch;
        padding: 7% 6.25% 0;
        font-size: clamp(2.1rem, 8.75vw, 3.4rem);
        line-height: 1.12;
    }
    .be-featured-hero:not(:has(.be-featured-hero__image img)) {
        padding: clamp(100px, 26vw, 150px) 6.25vw clamp(48px, 13vw, 70px);
    }
}