/* Hero Carousel block */

.block-hero-carousel {
    --hero-height: 80svh;
    /* Mobile takes its height from this ratio; desktop uses --hero-height.
       Same portrait ratio as the Hero Banner. */
    --hero-ratio: 4 / 5;
    --hero-color: var(--wp--preset--color--helder-blauw);
    --hero-indicator: color-mix(in srgb, var(--hero-color) 35%, transparent);
    --hero-gap: 20px;
    --hero-col-gap: 30px;
    --hero-intro-gap: 30px;
    --hero-intro-width: 60ch;
}

/* The carousel itself — the block wrapper also holds the intro below it. */
.block-hero-carousel__carousel {
    position: relative;
    min-height: 0;
    /* overflow keeps the background image inside the rounded corners */
    border-radius: var(--radius-06);
    overflow: hidden;
    color: var(--hero-color);
    background-color: var(--wp--preset--color--warm-zwart);
}

.block-hero-carousel__slides {
    display: grid;
}

/* Every slide occupies the same grid cell, so they stack and cross-fade. */
.block-hero-carousel__slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: var(--hero-ratio);
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}

/* Only the first slide shows until the script takes over, so the stack never
   paints on top of itself while the page loads. The markup marks the others
   aria-hidden; the script's fades are inline styles, which beat this. */
.block-hero-carousel__slide[aria-hidden="true"] {
    opacity: 0;
    visibility: hidden;
}

/* Media */

.block-hero-carousel__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--radius-06);
    overflow: hidden;
}

/* An overlay frame, not a container — the image keeps its size while JS
   animates this inset from 30px down to 0 on each switch.
   The element is the hole: the box-shadow paints the band around it, so the
   inner edge keeps a 6px radius while the outer edge stays square and is
   clipped by the media's own rounded corners. */
.block-hero-carousel__media-inset {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-06);
    box-shadow: 0 0 0 100vmax var(--wp--preset--color--warm-zwart);
    pointer-events: none;
}

.block-hero-carousel__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A video slide fills the same box as an image. The player sits inside the core
   embed markup, so the figure, its wrapper, and whatever VideoPress renders in
   it — a <video> or an iframe — all stretch to the media box. */
.block-hero-carousel__video {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

/* The VideoPress still, fetched server side and laid under the player so the
   slide is never a black box while the player boots. */
.block-hero-carousel__poster {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The player's own poster frame, shown until playback starts. video.js sizes it
   to contain by default, which letterboxes it in a slide sized box. */
.block-hero-carousel__video .vjs-poster,
.block-hero-carousel__video .vjs-poster img {
    width: 100%;
    height: 100%;
    background-size: cover;
    object-fit: cover;
}

.block-hero-carousel__video .wp-block-embed__wrapper,
.block-hero-carousel__video .wp-block-embed__wrapper > div,
.block-hero-carousel__video video,
.block-hero-carousel__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Undoing the video.js player's own sizing: it ships a padding-bottom ratio box
   and an absolutely positioned <video>, neither of which suits a slide that
   already has its own aspect ratio. */
.block-hero-carousel__media figure.wp-block-video {
    padding-bottom: 0 !important;
}

.block-hero-carousel__video .video-js.vjs-videopress {
    width: 100% !important;
    /* Fills the slide, exactly like the poster underneath it: at auto height the
       player keeps the video's own ratio and crops differently to the still, so
       the picture jumps the moment the first frame arrives. */
    height: 100% !important;
    /* Transparent, so the still underneath shows until the video paints */
    background: transparent !important;
}

.block-hero-carousel__video .video-js .vjs-tech {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A <video> with no frame yet paints black, which would cover the still.
       video.js adds vjs-has-started on the first frame. */
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.block-hero-carousel__video .video-js.vjs-has-started .vjs-tech {
    opacity: 1;
}

/* video.js keeps an error box and a caption settings dialog in the player, both
   painted black over the whole thing by VideoPress. A muted background video
   with no controls has no use for either, so they are gone. The .vjs-videopress
   in the selector outweighs the stylesheet VideoPress injects at runtime. */
.block-hero-carousel__video .video-js.vjs-videopress .vjs-modal-dialog,
.block-hero-carousel__video .video-js.vjs-videopress .vjs-error-display {
    display: none !important;
}

/* Keeps the text legible over any photograph. */
.block-hero-carousel__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.33) 66%);
}

/* Content */

.block-hero-carousel__content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
}

.block-hero-carousel__col {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-end;
}

/* Mobile: one column, so title, subtitle and indicators all centre */
.block-hero-carousel__col--text {
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Size and family come from the preset classes in the template. */
.block-hero-carousel__title {
    /* Mobile: centred in the column, which aligns its items to the right */
    margin: auto;
    max-width: 40rem;
    line-height: 96%;
    text-align: center;
    text-wrap: balance;
}

.block-hero-carousel__subtitle {
    margin: 0;
    max-width: 45ch;
    font-size: var(--wp--preset--font-size--medium);
}

/* Indicators — in the flow of the text column, right under the subtitle */

.block-hero-carousel__indicators {
    display: flex;
    justify-content: center;
    gap: 4px;
    /* The buttons are flex: 1 off a zero basis, so the row needs a width of its
       own — the column centres its items, and would otherwise collapse it. */
    width: 100%;
}

.block-hero-carousel__indicator {
    flex: 1;
    max-width: 40px;
    height: 20px;
    padding: 8px 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.block-hero-carousel__progress {
    position: relative;
    display: block;
    height: 2px;
    background-color: var(--hero-indicator);
    overflow: hidden;
}

/* JS scales this from 0 to 1 while the slide is showing. */
.block-hero-carousel__progress-fill {
    position: absolute;
    inset: 0;
    display: block;
    background-color: var(--hero-color);
    transform: scaleX(0);
    transform-origin: left center;
}

/* Intro */

.block-hero-carousel__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hero-intro-gap);
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: 0;
    text-align: center;
}

.block-hero-carousel__intro-text {
    max-width: var(--hero-intro-width);
    text-wrap: pretty;
}

.block-hero-carousel__intro-title {
    margin-bottom: 20px !important;
}

.block-hero-carousel__intro-text > :first-child {
    margin-top: 0;
}

.block-hero-carousel__intro-text > :last-child {
    margin-bottom: 0;
}

/* Desktop */

@media (min-width: 782px) {
    .block-hero-carousel {
        --hero-gap: 30px;
    }

    .block-hero-carousel__carousel {
        min-height: var(--hero-height);
    }

    .block-hero-carousel__slide {
        aspect-ratio: auto;
        min-height: var(--hero-height);
    }

    .block-hero-carousel__content {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--hero-col-gap);
    }

    /* Two columns: the title reads into the text column on its right */
    .block-hero-carousel__title {
        margin: 0;
        text-align: right;
    }

    .block-hero-carousel__col--text {
        align-items: flex-start;
        text-align: left;
    }

    .block-hero-carousel__indicators {
        justify-content: flex-start;
    }
}