.tile {
    display: flex;
    flex-flow: column;
    position: relative;
    opacity: 0;
    transform: translateY(1rem);
    animation: showTile .3s ease-out forwards;
    animation-delay: .2s;
}

    /* Nog niet getoonde tegel (blockShowsPicked, 'Toon meer'); display: flex hierboven zou [hidden] anders overrulen */
    .tile[hidden] {
        display: none;
    }

@keyframes showTile {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tile--default .tile__image {
    overflow: hidden;
    border-radius: 2.4rem;
    margin-bottom: 1.6rem;
    border: .4rem solid var(--antracite);
    line-height: 0;
}

/* Container linksboven in de tegel; kan één of meerdere badges bevatten. Ligt ingesprongen op de afbeelding,
   zodat meerdere badges naast elkaar los in beeld staan i.p.v. in de hoek geklemd. */
.tile__badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: .4rem;
    z-index: 1;
}

/* Badge met de naam van de gekozen label-node (bv. "Première"). De kleur volgt de kleur van de tegel. */
.tile__badge {
    padding: 1rem 1.2rem .8rem 1.2rem;
    border-radius: 2rem;
    /* Expliciet de body-font: in contexten als de show-hero worden losse spans anders met de header-font
       (var(--fontheader), --fontsize-header-xl) opgemaakt, wat de badge enorm groot maakt. */
    font-family: var(--fontbody);
    font-size: var(--fontsize-body-sm);
    font-weight: 600;
    line-height: 1;
    color: var(--white);
    background-color: var(--antracite);
}

.tile--green .tile__badge {
    background-color: var(--green);
}

.tile--purple .tile__badge {
    background-color: var(--purple);
}

.tile--red .tile__badge {
    background-color: var(--red);
}

.tile--brown .tile__badge {
    background-color: var(--brown);
}

/* Lichte achtergronden krijgen donkere tekst voor voldoende contrast. */
.tile--pink .tile__badge {
    background-color: var(--pink);
    color: var(--antracite);
}

.tile--yellow .tile__badge {
    background-color: var(--yellow);
    color: var(--antracite);
}

/* Statusbadges (uitverkocht / bijna uitverkocht) hebben een vaste kleur die losstaat van de tegelkleur,
   zodat de status altijd herkenbaar is (rood valt af, want dat is óók een mogelijke tegelkleur).
   De dubbele class geeft dezelfde specificiteit als .tile--kleur .tile__badge (0,2,0); door de latere
   positie wint deze. Bewust NIET onder .tile gescoped, zodat dezelfde chips ook in de show-hero werken. */
.tile__badge.tile__badge--soldout {
    background-color: var(--antracite);
    color: var(--white);
}

.tile__badge.tile__badge--almostsoldout {
    background-color: var(--white);
    color: var(--antracite);
}

    .tile--default .tile__image img {
        aspect-ratio: 400 / 225;
    }

.tile--default.tile--brown .tile__image {
    border-color: var(--brown);
}

.tile--default.tile--green .tile__image {
    border-color: var(--green);
}

.tile--default.tile--pink .tile__image {
    border-color: var(--pink);
}

.tile--default.tile--purple .tile__image {
    border-color: var(--purple);
}

.tile--default.tile--red .tile__image {
    border-color: var(--red);
}

.tile--default.tile--yellow .tile__image {
    border-color: var(--yellow);
}

@media (pointer: fine) {
    .tile .tile__image img {
        transition: transform .7s cubic-bezier(.17,.88,.22,.98);
    }

    .tile:has(a:hover) .tile__image img {
        transform: scale(1.05);
    }
}

.tile__content {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    line-height: 150%;
}

    .tile__content h3 {
        line-height: 100%;
    }

        .tile__content h3 + p {
            margin-bottom: .8rem;
        }

    .tile__content .tile__date {
        text-transform: lowercase;
    }

    .tile__content .button {
        margin-top: .8rem;
    }

    .tile__content > a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }

.tile--horizontal {
    flex-flow: row;
    gap: 4.8rem;
}

    .tile--horizontal .tile__image {
        margin-bottom: 0;
        width: 51.2rem;
    }

        .tile--horizontal .tile__image img {
            min-width: 51.2rem;
            height: auto;
        }

    .tile--horizontal .tile__content h3 {
        font-size: var(--fontsize-header-lg);
        margin-bottom: .8rem;
    }

        .tile--horizontal .tile__content h3 + p {
            font-size: 2.2rem;
            margin-bottom: .8rem;
        }

    .tile--horizontal .tile__content p {
        margin-bottom: 2.4rem;
    }

.tile--featured {
    position: relative;
    color: var(--white);
    height: 39.6rem;
    overflow: hidden;
}

    .tile--featured.tile--brown,
    .tile--featured.tile--brown .tile__image > div {
        background-color: var(--brown);
    }

    .tile--featured.tile--green,
    .tile--featured.tile--green .tile__image > div {
        background-color: var(--green);
    }

    .tile--featured.tile--pink,
    .tile--featured.tile--pink .tile__image > div {
        background-color: var(--pink);
    }

    .tile--featured.tile--purple,
    .tile--featured.tile--purple .tile__image > div {
        background-color: var(--purple);
    }

    .tile--featured.tile--red,
    .tile--featured.tile--red .tile__image > div {
        background-color: var(--red);
    }

    .tile--featured.tile--yellow,
    .tile--featured.tile--yellow .tile__image > div {
        background-color: var(--yellow);
    }

    .tile--featured .tile__image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    /* .tile__image is gepositioneerd als image-area zelf (geen padding, met offset 2.4rem). Dat maakt z'n border-box == image-area, zodat clip-path op deze parent precies de juiste cloud-shape geeft en de img inside vrij kan scalen op hover zonder de mask mee te trekken. */
    .tile--featured:not(.tile--film) .tile__image {
        top: 2.4rem;
        left: 2.4rem;
        width: calc(100% - 4.8rem);
        padding: 0;
        height: auto;
        aspect-ratio: 1/1;
    }

    .tile--featured .tile__image picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .tile--featured .tile__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

        .tile--featured .tile__image img:not(:first-of-type),
        .tile--featured .tile__image picture:not(:first-of-type) {
            display: none;
        }

    .tile--featured .tile__content {
        height: 100%;
        padding: 2.4rem 1.6rem;
        justify-content: flex-end;
        position: relative;
    }

    /* :after vult de hele image-area (nu == .tile__image zelf). Parent's clip-path clipt 'm naar de cloud-shape, dus geen eigen clip-path nodig. */
    .tile--featured.tile--theatre .tile__image:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, .75) 100%);
    }

    /* Clip-path op de PARENT .tile__image — niet op img — zodat de mask fixed blijft als de img op hover schaalt. */
    .tile--featured.tile--theatre[data-circles="1"] .tile__image {
        -webkit-clip-path: url(#square1);
        clip-path: url(#square1);
    }

    .tile--featured.tile--theatre[data-circles="2"] .tile__image {
        -webkit-clip-path: url(#square2);
        clip-path: url(#square2);
    }

    .tile--featured.tile--theatre[data-circles="3"] .tile__image {
        -webkit-clip-path: url(#square3);
        clip-path: url(#square3);
    }

    .tile--featured.tile--film .tile__image > div {
        width: calc(100% - 4.8rem);
        height: auto;
        position: absolute;
        top: 2.4rem;
        left: 2.4rem;
        aspect-ratio: 1 / 1;
        opacity: .6;
    }

    .tile--featured.tile--film.tile--yellow .tile__image > div {
        background-color: var(--yellow);
    }

    .tile--featured.tile--film[data-circles="2"] .tile__image > div {
        -webkit-clip-path: url(#square2);
        clip-path: url(#square2);
    }

    .tile--featured.tile--film[data-circles="3"] .tile__image > div {
        -webkit-clip-path: url(#square3);
        clip-path: url(#square3);
    }

    .tile--featured.tile--film[data-circles="1"] .tile__image > div {
        -webkit-clip-path: url(#square1);
        clip-path: url(#square1);
    }

    .tile--featured.tile--film .tile__image:after {
        content: "";
        width: 100%;
        height: 75%;
        position: absolute;
        left: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 49.82%, rgba(0, 0, 0, 0.75) 100%);
        z-index: 0;
    }

.shows__featured .tile--featured:nth-child(1),
.shows__featured .tile--featured:nth-child(10) {
    grid-column: span 2;
}

.shows__featured .tile--featured.tile--theatre:nth-child(1) .tile__image,
.shows__featured .tile--featured.tile--theatre:nth-child(10) .tile__image {
    aspect-ratio: 648 / 329;
}

.shows__featured .tile--featured.tile--theatre:nth-child(1)[data-circles="1"] .tile__image,
.shows__featured .tile--featured.tile--theatre:nth-child(10)[data-circles="1"] .tile__image {
    -webkit-clip-path: url(#horizontal1);
    clip-path: url(#horizontal1);
}

.shows__featured .tile--featured.tile--theatre:nth-child(1)[data-circles="2"] .tile__image,
.shows__featured .tile--featured.tile--theatre:nth-child(10)[data-circles="2"] .tile__image {
    -webkit-clip-path: url(#horizontal2);
    clip-path: url(#horizontal2);
}

.shows__featured .tile--featured.tile--theatre:nth-child(1)[data-circles="3"] .tile__image,
.shows__featured .tile--featured.tile--theatre:nth-child(10)[data-circles="3"] .tile__image {
    -webkit-clip-path: url(#horizontal3);
    clip-path: url(#horizontal3);
}

.shows__featured .tile--featured.tile--film:nth-child(1) .tile__image > div,
.shows__featured .tile--featured.tile--film:nth-child(10) .tile__image > div {
    aspect-ratio: 600 / 276;
}

.shows__featured .tile--featured.tile--film:nth-child(1)[data-circles="1"] .tile__image > div,
.shows__featured .tile--featured.tile--film:nth-child(10)[data-circles="1"] .tile__image > div {
    -webkit-clip-path: url(#horizontal1);
    clip-path: url(#horizontal1);
}

.shows__featured .tile--featured.tile--film:nth-child(1)[data-circles="2"] .tile__image > div,
.shows__featured .tile--featured.tile--film:nth-child(10)[data-circles="2"] .tile__image > div {
    -webkit-clip-path: url(#horizontal2);
    clip-path: url(#horizontal2);
}

.shows__featured .tile--featured.tile--film:nth-child(1)[data-circles="3"] .tile__image > div,
.shows__featured .tile--featured.tile--film:nth-child(10)[data-circles="3"] .tile__image > div {
    -webkit-clip-path: url(#horizontal3);
    clip-path: url(#horizontal3);
}

.tile--featured-lg {
    aspect-ratio: 1296 / 727;
    border-radius: 2.4rem;
}

    .tile--featured-lg .tile__label {
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--black);
        color: var(--white);
        height: 3.3rem;
        padding: .4rem 2.4rem .2rem;
        display: inline-flex;
        align-items: center;
        border-radius: 0 0 2.4rem;
    }

    .tile--featured-lg.tile--theatre.tile__image {
        padding: 4rem;
    }

    .tile--featured-lg.tile--theatre[data-circles="1"] .tile__image,
    .tile--featured-lg.tile--film[data-circles="1"] .tile__image > div {
        aspect-ratio: 648 / 329 !important;
    }

        /* Theatre: clip-path naar de parent .tile__image (zodat mask fixed blijft bij hover). Film houdt clip-path op > div omdat de img daar achter ligt en > div een opaque overlay is. */
        .tile--featured-lg.tile--theatre[data-circles="1"] .tile__image,
        .tile--featured-lg.tile--film[data-circles="1"] .tile__image > div {
            -webkit-clip-path: url(#horizontal1);
            clip-path: url(#horizontal1);
        }

    .tile--featured-lg.tile--theatre[data-circles="2"] .tile__image,
    .tile--featured-lg.tile--film[data-circles="2"] .tile__image > div {
        aspect-ratio: 648 / 329 !important;
    }

        .tile--featured-lg.tile--theatre[data-circles="2"] .tile__image,
        .tile--featured-lg.tile--film[data-circles="2"] .tile__image > div {
            -webkit-clip-path: url(#horizontal2);
            clip-path: url(#horizontal2);
        }

    .tile--featured-lg.tile--theatre[data-circles="3"] .tile__image,
    .tile--featured-lg.tile--film[data-circles="3"] .tile__image > div {
        aspect-ratio: 648 / 329 !important;
    }

        .tile--featured-lg.tile--theatre[data-circles="3"] .tile__image,
        .tile--featured-lg.tile--film[data-circles="3"] .tile__image > div {
            -webkit-clip-path: url(#horizontal3);
            clip-path: url(#horizontal3);
        }

    .tile--featured-lg.tile--film .tile__image > div {
        top: 4rem;
        left: 4rem;
        width: calc(100% - 8rem);
    }

    .tile--featured-lg .tile__content {
        padding: 4rem 2.4rem;
        align-items: flex-start;
    }

        .tile--featured-lg .tile__content h3 {
            font-size: 5.6rem;
            margin-bottom: .8rem;
        }

        .tile--featured-lg .tile__content p {
            font-size: 2.2rem;
            margin-bottom: .8rem;
        }

        .tile--featured-lg .tile__content .button {
            margin-top: 2.4rem;
        }

@media (pointer: fine) {
    .tile--featured-lg:has(a:hover) .tile__image img {
        transform: scale(1.01);
    }
}

.tile--placeholder {
}

    .tile--placeholder .tile__image {
        width: 100%;
        aspect-ratio: 400 / 231;
        background-color: var(--grey-100);
        border-radius: 2.4rem;
        border: none;
        animation: placeholder 2s infinite;
    }

    .tile--placeholder span {
        border-radius: 2rem;
        background-color: var(--grey-100);
        width: 50%;
        height: 2rem;
        margin-bottom: 1rem;
        animation: placeholder 2s infinite;
    }

        .tile--placeholder span:first-of-type {
            height: 5.2rem;
            margin-bottom: 1.5rem;
            width: 75%;
        }

        .tile--placeholder span:last-of-type {
            height: 5.2rem;
            width: 20rem;
            border-radius: 4rem;
        }

    .tile--placeholder.tile--horizontal .tile__image {
        width: 51.2rem;
    }

    .tile--placeholder.tile--horizontal .tile__content {
        width: 100%;
    }

@keyframes placeholder {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

@media(max-width: 767px) {
    .tile--default {
        flex-flow: row;
        gap: 1.6rem;
    }

        .tile--default:not(.tile--horizontal):not(.tile--carousel) .tile__image {
            align-self: flex-start;
            border-width: .2rem;
            border-radius: 1.6rem;
            min-width: 8.4rem;
        }

        /* Kleinere tegelronding op mobiel, dus de hoekbadge volgt met 1.6rem. */
        .tile__badge:first-child {
            border-top-left-radius: 1.6rem;
        }

    /* CC-32: op de compacte agenda-rij is de thumbnail nog maar 8rem breed, dus daar passen de badges
       niet meer op. Ze verlaten de absolute positionering en krijgen een eigen regel boven de hele rij:
       flex-basis 100% forceert de wrap, order -1 zet ze vóór de afbeelding. Alleen tegels die ook echt
       badges hebben gaan wrappen, zodat de skeleton-tegels (.tile--placeholder) hun rij houden. Het
       overzicht (.tile--horizontal) en de carrousel tonen op mobiel een volledige afbeelding, dus daar
       blijven de badges gewoon op het beeld staan. */
    .tile--default:not(.tile--horizontal):not(.tile--carousel):has(.tile__badges) {
        flex-wrap: wrap;
        row-gap: .8rem;
    }

        .tile--default:not(.tile--horizontal):not(.tile--carousel):has(.tile__badges) .tile__badges {
            position: static;
            order: -1;
            flex-basis: 100%;
            /* Meer labels dan er op één regel passen lopen door naar de volgende. */
            flex-wrap: wrap;
            row-gap: .4rem;
        }

            /* Deze badges liggen niet meer in een tegelhoek, dus terug naar de ronding van .tile__badge. */
            .tile--default:not(.tile--horizontal):not(.tile--carousel):has(.tile__badges) .tile__badge:first-child {
                border-top-left-radius: 2rem;
            }

        /* Basis 0 in plaats van de content-breedte: nu de tegel mag wrappen zou een lange titel de
           tekstkolom anders onder de afbeelding duwen in plaats van ernaast te krimpen. */
        .tile--default:not(.tile--horizontal):not(.tile--carousel):has(.tile__badges) .tile__content {
            flex: 1 1 0;
            min-width: 0;
        }

            .tile--default:not(.tile--horizontal):not(.tile--carousel) .tile__image img {
                width: 8rem;
                height: 8rem;
                aspect-ratio: 1 / 1;
            }

        .tile--default .tile__content h3 {
            font-weight: 500;
        }

        .tile--default .tile__content .button--ticket {
            padding-left: 0;
            padding-right: 0;
            background-color: transparent;
            border-color: transparent;
            color: var(--antracite);
            margin-top: 0;
        }

            .tile--default .tile__content .button--ticket:before {
                background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 8.5V7.5M10 13V12M10 17.5V16.5M5.2 4.5H18.8C19.9201 4.5 20.4802 4.5 20.908 4.71799C21.2843 4.90973 21.5903 5.21569 21.782 5.59202C22 6.01984 22 6.5799 22 7.7V9C20.067 9 18.5 10.567 18.5 12.5C18.5 14.433 20.067 16 22 16V17.3C22 18.4201 22 18.9802 21.782 19.408C21.5903 19.7843 21.2843 20.0903 20.908 20.282C20.4802 20.5 19.9201 20.5 18.8 20.5H5.2C4.0799 20.5 3.51984 20.5 3.09202 20.282C2.71569 20.0903 2.40973 19.7843 2.21799 19.408C2 18.9802 2 18.4201 2 17.3V16C3.933 16 5.5 14.433 5.5 12.5C5.5 10.567 3.933 9 2 9V7.7C2 6.5799 2 6.01984 2.21799 5.59202C2.40973 5.21569 2.71569 4.90973 3.09202 4.71799C3.51984 4.5 4.0799 4.5 5.2 4.5Z' stroke='%232A2A2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
            }

    .tile--horizontal {
        flex-flow: column;
    }

    .tile--horizontal .tile__image {
        border-radius: 1.6rem;
        width: 100%;
    }

        .tile--horizontal .tile__image img {
            min-width: 100%;
        }

        .tile--horizontal .tile__content h3 {
            font-size: var(--fontsize-body-lg);
        }

            .tile--horizontal .tile__content h3 + p {
                font-size: var(--fontsize-body-md);
                margin-bottom: .8rem;
            }

            .tile--horizontal .tile__content p {
                font-size: var(--fontsize-body-md);
                margin-bottom: 0;
            }

        .tile--horizontal .tile__content .tile__date {
            margin-bottom: 1.6rem;
        }

        .tile--horizontal .tile__content .button {
            margin-top: 1.6rem;
        }

        .tile--horizontal .tile__content .tile__date + .button {
            margin-top: 0;
        }
}