:root {
    --hero-height: 460px;
}

.hero {
    height: var(--hero-height);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.52) 6.73%, rgba(102, 102, 102, 0) 100%), var(--bg-image) center / cover no-repeat;

    &:has(iframe) {
        height: auto;
    }

    /* Video sits on top of .hero's own background gradient, so the white
       header menu can lose contrast against bright video frames. Add a
       very slight top-fade above the video itself, just enough to keep
       the menu readable without visibly darkening the video. */
    &:has(iframe)::before {
        content: '';
        position: absolute;
        top: 0;
        inset-inline: 0;
        height: 240px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .hero__video {
        display: flex;
        width: 100%;
        aspect-ratio: 16 / 9;

        iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }
    }

    &>.container {
        position: absolute;
        bottom: 35%;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .title {
        font-size: var(--text-80px);
        font-weight: 300;
        color: var(--color-white);
        letter-spacing: -0.02em;
        line-height: 1.1;

        .subtitle {
            letter-spacing: var(--ls-titles);
        }
    }

    .subtitle {
        font-size: var(--text-52px);
        font-weight: 400;
        color: var(--color-white);
        font-family: var(--ff-titles);
    }

    /* On the homepage the widget lives inside .hero — override fixed positioning.
       Must be absolute so it overlays the hero instead of sharing flex width with .hero__video. */
    .simple-booking {
        position: absolute;
        inset-inline: 0;
        bottom: 50px;
        z-index: 2;
        width: 100%;
        background: transparent;
    }

    /* JS adds .is-fixed once the hero has scrolled fully out of view */
    .simple-booking.is-fixed {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 100;
        animation: sb-slide-up 0.4s ease-out both;
    }
}

/* Desktop: let the video fill the full hero box (height + width) and crop
   like the image background does, instead of being boxed to 16:9. */
@media (min-width: 1024px) {
    .hero:has(iframe) {
        height: var(--hero-height);
    }

    .hero .hero__video {
        position: absolute;
        inset: 0;
        aspect-ratio: unset;
        overflow: hidden;
    }

    .hero .hero__video iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 56.25vw;
        /* 16:9 cover-fit: whichever dimension the aspect-ratio math shrinks below
           the hero box, the min-width/min-height below takes over instead. */
        min-width: 177.78vh;
        min-height: 100%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 1023px) {
    :root {
        --hero-height: 300px;
    }

    .hero {
        &:has(.hero__video--has-mobile) {
            height: 100vw;
        }

        /* Desktop-only video reused on mobile (no dedicated mobile video):
           give it more room than its native 16:9 box. Cover-fit (not contain)
           so height is never short-changed — a landscape video in a taller
           box only ever needs to crop the sides, never the top/bottom. */
        &:has(.hero__video):not(:has(.hero__video--has-mobile)) {
            height: 50vh;
        }

        .hero__video:not(.hero__video--has-mobile) {
            position: absolute;
            inset: 0;
            aspect-ratio: unset;
            overflow: hidden;

            iframe {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100vw;
                height: 56.25vw;
                min-width: 177.78vh;
                min-height: 100%;
                transform: translate(-50%, -50%);
            }
        }

        .hero__video.hero__video--has-mobile {
            aspect-ratio: 9 / 16;
        }

        &>.container {
            bottom: 25%;
        }

        .title {
            font-size: var(--text-52px);
        }

        .subtitle {
            font-size: inherit;
        }
    }
}