.block__hero {
    padding: 0;
    width: 100%;
    height: var(--hero-height);
    position: fixed;
    top: 0;
    left: 0;
}

    .block__hero .hero__images,
    .block__hero .hero__video {
        background-color: var(--brown);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        .block__hero .hero__images .slick-list,
        .block__hero .hero__images .slick-track,
        .block__hero .hero__images .slick-slide,
        .block__hero .hero__images .slick-slide > div,
        .block__hero .hero__images picture,
        .block__hero .hero__images img {
            height: 100%;
        }

        /* Vóór Slick init staan alle pictures direct in .hero__images en zouden ze allemaal naast/onder elkaar getoond worden — verberg alles behalve de eerste */
        .block__hero .hero__images:not(.slick-initialized) > picture ~ picture {
            display: none;
        }

        .block__hero .hero__images img {
            transform: scale(1.01);
        }

        .block__hero .hero__images .slick-current img {
            opacity: 0;
            animation: heroZoomIn 5s ease-out forwards;
        }

        .block__hero .hero__images:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 100%);
            z-index: 0;
        }

.body--home {
    /*background-color: var(--pink);*/
}

    .body--home .block__hero,
    .body--landingpage .block__hero {
        position: absolute;
    }

/* Op een landingpage is de header maximaal 80rem hoog, zodat het introblok hoger komt te staan. main rekent met
   dezelfde variabele (site-base.css), dus de overlap blijft gelijk.
   overflow: met één headerfoto start Slick niet, en dan steekt de geschaalde foto (scale 1.01) buiten de pagina uit,
   wat een horizontale scrollbalk geeft. Een video (100vh hoog, via JS geschaald) mag er ook niet onder uitsteken. */
.body--landingpage {
    --hero-height: min(100dvh, 80rem);
}

    .body--landingpage .block__hero {
        overflow: hidden;
    }

@keyframes heroZoomIn {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.block__hero .hero__video .iframe__container {
    width: 100vw;
    height: 100vh;
}

.block__hero .container {
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 4.8rem;
    height: calc(100% - 10rem);
    color: var(--white);
    padding-bottom: 4.8rem;
    position: relative;
    z-index: 2;
}

    .block__hero .container h1,
    .block__hero .container span {
        display: inline-flex;
        font-family: var(--fontheader);
        font-size: var(--fontsize-header-xl);
        line-height: 1;
        margin-bottom: 1.6rem;
    }

.body--production .block__hero .container {
    height: calc(100% - 15rem);
}

.block__hero p {
    font-size: var(--fontsize-header-sm);
    line-height: 150%;
}

.block__hero .button:focus-visible {
    outline-color: var(--white);
}

.block__hero .show__hero {
    display: flex;
    flex-flow: column;
    gap: 1.6rem;
    position: relative;
}

    /* Statusbadges in de hero: in de flow linksboven, dus boven de titel. Chips hergebruiken
       .tile__badge uit site-tile.css; wrappen zodat drie badges op smalle schermen niet uitsteken. */
    .show__hero__badges {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
    }

        /* Overrule de generieke hero-span-opmaak (.block__hero .container span zet header-font + xl-grootte +
           marge). Drie classes wint qua specificiteit, zodat de badge zijn eigen compacte opmaak houdt. */
        .block__hero .show__hero__badges .tile__badge {
            font-family: var(--fontbody);
            font-size: var(--fontsize-body-sm);
            line-height: 1;
            margin-bottom: 0;
        }

    .block__hero .show__hero h1 {
        font-size: var(--fontsize-header-lg);
        flex-flow: column;
        margin-bottom: 0;
    }

    .block__hero .show__hero .h1--artist {
        display: inline-block;
        font-family: var(--fontbody);
        font-size: var(--fontsize-header-lg);
        line-height: var(--fontsize-header-lg);
        margin-bottom: 1.2rem;
    }

    .block__hero .show__hero .h1--title {
        display: inline-block;
        font-size: var( --fontsize-header-xl);
        line-height: var( --fontsize-header-xl);
        margin-bottom: 0;
    }

        .block__hero .show__hero .h1--title em {
            display: inline-block;
            font-family: var(--fontbody);
            font-weight: 600;
            font-size: var( --fontsize-header-md);
            line-height: var( --fontsize-header-md);
            font-style: normal;
            transform: translate(-2rem, -4.5rem);
        }

    /* Datum en type staan op één regel; het scheidingsteken mag de generieke hero-span-opmaak
       (.block__hero .container span zet header-font + xl-grootte + marge) niet overnemen. */
    .block__hero .show__hero .hero__date__separator {
        display: inline;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        margin: 0 .2rem;
        opacity: .6;
    }

    .block__hero .show__hero .buttons {
        margin-top: 1.6rem;
    }

.body--home main,
.body--landingpage main {
    border-radius: 4rem 4rem 0 0;
}

.block__hero--theatre.block__hero--brown,
.block__hero--film.block__hero--brown .hero__images > div {
    background-color: var(--brown);
}

.block__hero--theatre.block__hero--green,
.block__hero--film.block__hero--green .hero__images > div {
    background-color: var(--green);
}

.block__hero--theatre.block__hero--pink,
.block__hero--film.block__hero--pink .hero__images > div {
    background-color: var(--pink);
}

.block__hero--theatre.block__hero--purple,
.block__hero--film.block__hero--purple .hero__images > div {
    background-color: var(--purple);
}

.block__hero--theatre.block__hero--red,
.block__hero--film.block__hero--red .hero__images > div {
    background-color: var(--red);
}

.block__hero--theatre.block__hero--yellow,
.block__hero--film.block__hero--yellow .hero__images > div {
    background-color: var(--yellow);
}

.block__hero--theatre .hero__images {
    width: calc(100% - 20%);
    height: auto;
    margin-top: 8rem;
    margin-left: 10%;
    aspect-ratio: 1216 / 579;
}

    .block__hero--theatre .hero__images[data-circles="1"] {
        -webkit-clip-path: url(#horizontal1);
        clip-path: url(#horizontal1);
    }

    .block__hero--theatre .hero__images[data-circles="2"] {
        -webkit-clip-path: url(#horizontal2);
        clip-path: url(#horizontal2);
    }

    .block__hero--theatre .hero__images[data-circles="3"] {
        -webkit-clip-path: url(#horizontal3);
        clip-path: url(#horizontal3);
    }

.block__hero--film .hero__images > div {
    width: calc(100% - 20%);
    height: auto;
    position: absolute;
    top: 8rem;
    left: 10%;
    aspect-ratio: 1 / 1;
    opacity: .6;
    z-index: 1;
}

.block__hero--film .hero__images[data-circles="1"] > div {
    -webkit-clip-path: url(#horizontal1);
    clip-path: url(#horizontal1);
    aspect-ratio: 1216 / 579;
}

.block__hero--film .hero__images[data-circles="2"] > div {
    -webkit-clip-path: url(#horizontal2);
    clip-path: url(#horizontal2);
    aspect-ratio: 1216 / 579;
}

.block__hero--film .hero__images[data-circles="3"] > div {
    -webkit-clip-path: url(#horizontal3);
    clip-path: url(#horizontal3);
    aspect-ratio: 1216 / 579;
}

@media(min-width: 1024px) and (max-height: 800px) {
    .body--production .block__hero .container {
        height: calc(100% - 10rem);
        padding-bottom: 2.4rem;
    }

    .block__hero .show__hero {
        gap: .8rem;
    }

        .block__hero .show__hero .h1--artist {
            font-size: var(--fontsize-header-md);
            line-height: var(--fontsize-header-md);
            margin-bottom: 1rem;
        }

        .block__hero .show__hero .h1--title {
            font-size: 8rem;
            line-height: 8rem;
        }

            .block__hero .show__hero .h1--title em {
                font-size: var( --fontsize-header-sm);
                line-height: var( --fontsize-header-sm);
                transform: translate(-2rem, -3.5rem);
            }

        .block__hero .show__hero .buttons {
            margin-top: .8rem;
        }

    .body--production main {
        margin-top: calc(var(--hero-height) - var(--nav-height) - 10rem);
    }
}

@media(min-width: 1024px) and (max-height: 650px) {
    .block__hero .show__hero {
        gap: .5rem;
    }

        .block__hero .show__hero .h1--artist {
            font-size: 2.4rem;
            line-height: 2.4rem;
            margin-bottom: .5rem;
        }

        .block__hero .show__hero .h1--title {
            font-size: 6rem;
            line-height: 6rem;
        }

            .block__hero .show__hero .h1--title em {
                transform: translate(-1.5rem, -2.5rem);
            }
}

@media(max-width: 1023px) {
    .block__hero .container h1,
    .block__hero .container span {
        font-size: 6.4rem;
    }

    .block__hero .show__hero .h1--title em {
        font-size: var( --fontsize-body-md);
        line-height: var( --fontsize-body-md);
        transform: translate(-1rem, -2rem);
    }
}

@media(max-width: 767px) {
    .block__hero .container {
        height: calc(100% - 6rem);
    }

    /* Een landingpage heeft vaak één lang woord als titel ("Herfstvakantie"), dat past niet op een telefoon.
       Laat de browser het afbreken (Nederlands via lang="nl"); anywhere voorkomt dat de titel buiten beeld loopt. */
    .body--landingpage .block__hero .container h1 {
        max-width: 100%;
        hyphens: auto;
        overflow-wrap: anywhere;
    }

    .body--production .block__hero .container {
        height: calc(100% - 6rem);
        padding-bottom: 4rem;
    }

    /* .show__hero valt hier terug op gap: 0, dus de ruimte onder de badges zelf meegeven. */
    .show__hero__badges {
        margin-bottom: .8rem;
    }

    .block__hero--theatre .hero__images {
        margin-top: 8.4rem;
        width: calc(100% - 4rem);
        margin-left: 2rem;
    }

        .block__hero--theatre .hero__images[data-circles="1"] {
            -webkit-clip-path: url(#square1);
            clip-path: url(#square1);
            aspect-ratio: 1 / 1;
        }

        .block__hero--theatre .hero__images[data-circles="2"] {
            -webkit-clip-path: url(#square2);
            clip-path: url(#square2);
            aspect-ratio: 1 / 1;
        }

        .block__hero--theatre .hero__images[data-circles="3"] {
            -webkit-clip-path: url(#square3);
            clip-path: url(#square3);
            aspect-ratio: 1 / 1;
        }

    .block__hero--film .hero__images {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .block__hero--film .hero__images > div {
            top: unset;
        }

        .block__hero--film .hero__images[data-circles="1"] > div {
            -webkit-clip-path: url(#vertical1);
            clip-path: url(#vertical1);
            aspect-ratio: 345 / 548;
        }

        .block__hero--film .hero__images[data-circles="2"] > div {
            -webkit-clip-path: url(#vertical2);
            clip-path: url(#vertical2);
            aspect-ratio: 345 / 479;
        }

        .block__hero--film .hero__images[data-circles="3"] > div {
            -webkit-clip-path: url(#vertical3);
            clip-path: url(#vertical3);
            aspect-ratio: 345 / 531;
        }

    .block__hero .show__hero {
        gap: 0;
        max-width: calc(100dvw - 4rem);
        overflow: hidden;
    }

        .block__hero .show__hero h1 {
            margin-bottom: .8rem;
        }

        .block__hero .show__hero .h1--artist {
            font-size: var(--fontsize-header-md);
            line-height: var(--fontsize-header-md);
        }

        .block__hero .show__hero .h1--title {
            margin-bottom: .8rem;
        }

            .block__hero .show__hero .h1--title em {
                font-size: var( --fontsize-body-md);
                line-height: var( --fontsize-body-md);
                transform: translate(-1rem, -2rem);
            }

        .block__hero .show__hero .hero__tagline {
            line-height: 100%;
            margin-bottom: .8rem;
        }

        .block__hero .show__hero p:not(.hero__tagline) {
            font-size: var(--fontsize-body-md);
        }

        .block__hero .show__hero .buttons {
            margin-top: 2.4rem;
        }
}

@media(max-width: 575px) {
    .block__hero .show__hero .h1--title--long {
        font-size: var(--fontsize-header-lg);
        line-height: var(--fontsize-header-lg);
    }
}