/* BLOCK: Hero Banner */

.block-hero-banner {
    color: var(--c-text-lighter);
    overflow: hidden;
    --height: 100vh;
    --height: 100svh;
}

.block-hero-banner .swiper {
    overflow: visible;
    margin-inline: calc(-1 * var(--offset, 0px));
}

.block-hero-banner .swiper-slide {
    overflow-x: clip;
}

.block-hero-banner .item {
    position: relative;
    isolation: isolate;
    height: calc(var(--height) - var(--pt, 0px) - var(--pb, 0px));
}

.block-hero-banner .bg-wrapper {
    position: absolute;
    inset: calc(-1 * var(--pt, 0px)) calc(-1 * var(--offset, 0px)) calc(-1 * var(--pb, 0px));
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

.block-hero-banner .bg-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(225.75deg, transparent 25.33%, rgb(from var(--c-bg-darker) r g b / 0.8) 86.78%),
        linear-gradient(225.75deg, transparent 48.31%, rgb(from var(--c-bg-darkest) r g b / 0.5) 91.31%),
        linear-gradient(150.78deg, rgb(from var(--c-bg-darkest) r g b / 0.4) 7.82%, transparent 27.6%),
        linear-gradient(246.47deg, rgb(from var(--c-bg-darkest) r g b / 0.4) 13.47%, transparent 31.68%);
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
    z-index: 1;
}

.block-hero-banner .bg-wrapper:is(.is-video, .is-oembed) {
    inset: unset;
    top: calc(-1 * var(--pt, 0px));
    left: 50%;
    transform: translateX(-50%);
    height: var(--height);
    min-width: 100vw;
    min-width: 100svw;
    aspect-ratio: 16 / 9;
}

.block-hero-banner .bg-wrapper.is-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block-hero-banner .bg-wrapper :is(.wp-video, .mejs-container, video, iframe) {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover
}

.block-hero-banner .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
}

.block-hero-banner .swiper-slide .content {
    margin-inline: var(--offset, 0px);
}

.block-hero-banner .text-content {
    max-width: 53.875rem;
}

.block-hero-banner .text-content:not(:last-child) {
    margin-bottom: 3.4375rem;
}

@media screen and (width <= 620px) {
    .block-hero-banner {
        --height: 39.625rem;
    }

    .block-hero-banner .bg-wrapper::after {
        background-image:
            linear-gradient(228.78deg, transparent 26.65%, rgb(from var(--c-bg-darker) r g b / 0.7) 69.6%, var(--c-bg-darker) 94.81%),
            linear-gradient(225.75deg, transparent 48.31%, rgb(from var(--c-bg-darker) r g b / 0.7) 91.31%),
            linear-gradient(180deg, rgb(from var(--c-bg-darkest) r g b / 0.6) 0%, transparent 28.06%),
            linear-gradient(180deg, rgb(from var(--c-bg-darkest) r g b / 0.2) 0%, transparent 100%);
    }

    .block-hero-banner .text-content:not(:last-child) {
        margin-bottom: 2.5rem;
    }
}

@media screen and (width <= 420px) {
    .block-hero-banner .text-content {
        max-width: 20.3125rem;
    }
}