/*
Block Name: Hero Video
Description: A full-width hero that plays a self-hosted background video, with a poster image used before load, in the editor preview, and as a mobile fallback.
*/

.block-hero-video {
    --hero-header-height: 77.5px;
    --hero-video-ratio-height: 56.25vw; /* 16:9 */
}

/* ------------------------------------------------------------------
   Stage
------------------------------------------------------------------ */

.block-hero-video .hero-video-stage {
    position: relative;
    width: 100%;
    min-height: 320px;
    overflow: hidden;
    background: var(--brand-2);
}

/*
The full hero is capped at the natural height of a 16:9 video.

This prevents the container becoming taller than the video can fill
without cropping content from the left and right.
*/
.block-hero-video .hero-video-stage[data-height="full"] {
    height: calc(100svh - var(--hero-header-height));
    max-height: var(--hero-video-ratio-height);
}

.block-hero-video .hero-video-stage[data-height="tall"] {
    height: calc(75svh - var(--hero-header-height));
    max-height: var(--hero-video-ratio-height);
}

.block-hero-video .hero-video-stage[data-height="medium"] {
    height: calc(60svh - var(--hero-header-height));
    max-height: var(--hero-video-ratio-height);
}

.block-hero-video .hero-video-stage[data-height="auto"] {
    height: auto;
    min-height: 0;
}

/* ------------------------------------------------------------------
   Media
------------------------------------------------------------------ */

.block-hero-video .hero-video-media,
.block-hero-video .hero-video-poster-mobile,
.block-hero-video .hero-video-poster-preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.block-hero-video .hero-video-stage[data-height="full"] .hero-video-media,
.block-hero-video .hero-video-stage[data-height="tall"] .hero-video-media,
.block-hero-video .hero-video-stage[data-height="medium"] .hero-video-media,
.block-hero-video .hero-video-poster-mobile,
.block-hero-video .hero-video-poster-preview {
    position: absolute;
    inset: 0;
}

/* Natural-ratio video. */
.block-hero-video .hero-video-stage[data-height="auto"] .hero-video-media {
    position: relative;
    height: auto;
}

/* ------------------------------------------------------------------
   Mobile fallback
------------------------------------------------------------------ */

.block-hero-video .hero-video-poster-mobile {
    display: none;
}

/* ------------------------------------------------------------------
   Editor placeholder
------------------------------------------------------------------ */

.block-hero-video .hero-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 2rem;
    color: #fff;
    font-size: 1.6rem;
    text-align: center;
}

/* ------------------------------------------------------------------
   Responsive
------------------------------------------------------------------ */

@media (max-width: 768px) {

    /*
    Use the video's natural 16:9 shape on mobile rather than an
    arbitrary viewport height. This also prevents the stage collapsing
    when the video is absolutely positioned.
    */
    .block-hero-video .hero-video-stage[data-height="full"],
    .block-hero-video .hero-video-stage[data-height="tall"],
    .block-hero-video .hero-video-stage[data-height="medium"] {
        height: auto;
        max-height: none;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .block-hero-video .hero-video-stage[data-height="auto"] {
        height: auto;
        min-height: 0;
    }

    .block-hero-video .hero-video-stage--mobile-fallback .hero-video-media {
        display: none;
    }

    .block-hero-video .hero-video-stage--mobile-fallback .hero-video-poster-mobile {
        display: block;
    }
}

/* ------------------------------------------------------------------
   Reduced motion
------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .block-hero-video .hero-video-media {
        transition: none;
    }
}