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

@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;
}

    .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;
        }

            .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;
        }
}