/* =========================================================
   CHRISTINE DE WINTER — LAAG 2026
   Versie: 20260824-0500

   Wordt NA style.css, enhance.css en gallery.css geladen.
   Verandert niets aan bestaande bestanden; alles staat hier.

   Bevat:
   1. Hartjes die de muis volgen
   2. Drie locatiekaarten naast elkaar
   3. Kenmerkchips per locatie
   4. Live datumstatus (vandaag / binnenkort / geweest)
   5. Kleine moderniseringen (focus, selectie, tekstafbreking)
   ========================================================= */


/* =========================================================
   1. HARTJES DIE DE MUIS VOLGEN
   Alleen op een echte muis, nooit bij "beperk beweging".
   Uit te zetten: zie bovenin cdw-2026.js.
   ========================================================= */

.cdw-hearts {
    position: fixed;
    inset: 0;

    z-index: 9990;

    overflow: hidden;

    pointer-events: none;

    contain: layout paint style;
}


.cdw-heart {
    --cdw-heart-size: 14px;
    --cdw-heart-drift: 0px;
    --cdw-heart-rise: -46px;
    --cdw-heart-turn: 0deg;
    --cdw-heart-life: 1100ms;

    position: absolute;

    width: var(--cdw-heart-size);
    height: var(--cdw-heart-size);

    margin:
        calc(var(--cdw-heart-size) / -2)
        0 0
        calc(var(--cdw-heart-size) / -2);

    background: currentColor;

    -webkit-mask:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.6l-1.5-1.4C5.1 15.4 1.6 12.2 1.6 8.3 1.6 5.2 4 2.8 7.1 2.8c1.8 0 3.5.8 4.6 2.2 1.1-1.4 2.8-2.2 4.6-2.2 3.1 0 5.5 2.4 5.5 5.5 0 3.9-3.5 7.1-8.9 11.9L12 21.6z' fill='%23000'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.6l-1.5-1.4C5.1 15.4 1.6 12.2 1.6 8.3 1.6 5.2 4 2.8 7.1 2.8c1.8 0 3.5.8 4.6 2.2 1.1-1.4 2.8-2.2 4.6-2.2 3.1 0 5.5 2.4 5.5 5.5 0 3.9-3.5 7.1-8.9 11.9L12 21.6z' fill='%23000'/%3E%3C/svg%3E")
        center / contain no-repeat;

    opacity: 0;

    will-change: transform, opacity;

    animation:
        cdw-heart-rise var(--cdw-heart-life) cubic-bezier(.22, .62, .3, 1) forwards;
}


@keyframes cdw-heart-rise {

    0% {
        opacity: 0;

        transform:
            translate3d(0, 4px, 0)
            scale(.35)
            rotate(var(--cdw-heart-turn));
    }

    16% {
        opacity: .82;

        transform:
            translate3d(calc(var(--cdw-heart-drift) * .18), calc(var(--cdw-heart-rise) * .16), 0)
            scale(1)
            rotate(var(--cdw-heart-turn));
    }

    62% {
        opacity: .5;
    }

    100% {
        opacity: 0;

        transform:
            translate3d(var(--cdw-heart-drift), var(--cdw-heart-rise), 0)
            scale(.5)
            rotate(calc(var(--cdw-heart-turn) * 2.4));
    }

}


/* De galerij verbergt de cursor voor de loep. Daar houden
   de hartjes zich stil, anders vecht het om aandacht. */

body.cg-locked .cdw-hearts,
.cdw-hearts.is-paused {
    opacity: 0;

    transition: opacity .2s ease;
}


@media (prefers-reduced-motion: reduce) {

    .cdw-hearts {
        display: none;
    }

}


/* =========================================================
   2. DE LOCATIEKAARTEN

   De inhoudskolom van deze site is op de desktop 760 pixels
   breed. Twee kaarten naast elkaar past; drie wordt te
   benauwd om te lezen. De LAATSTE kaart ligt daarom altijd
   over de volle breedte, met de datums links en de tekst
   rechts.

   Nu staat er nog maar één kaart (Utrecht). Die is dus ook
   meteen de laatste, en krijgt vanzelf die brede opmaak —
   precies wat je wilt voor een enkele locatie.

   Zet je er later een tweede bij? Dan komt de nieuwe kaart
   automatisch onderaan over de volle breedte en schuift
   Utrecht naar de linkerkolom. Zonder dat je hier iets
   hoeft te veranderen.
   ========================================================= */

.availability-grid > .location-card {
    display: flex;

    flex-direction: column;
}


.availability-grid > .location-card > .location-copy {
    flex: 1 1 auto;
}


@media (min-width: 768px) {

    .availability-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* De laatste kaart ligt over de volle breedte en verdeelt
       zijn inhoud over twee kolommen. */

    .availability-grid > .location-card:last-child {
        grid-column: 1 / -1;

        display: grid;

        grid-template-columns:
            minmax(0, .88fr) minmax(0, 1.12fr);

        column-gap:
            clamp(30px, 4.5vw, 62px);

        align-content: start;
    }


    .availability-grid > .location-card:last-child > .location-card-top {
        grid-column: 1 / -1;
        grid-row: 1;
    }


    .availability-grid > .location-card:last-child > .location-name {
        grid-column: 1;
        grid-row: 2;
    }


    .availability-grid > .location-card:last-child > .location-dates {
        grid-column: 1;
        grid-row: 3;
    }


    .availability-grid > .location-card:last-child > .location-tags {
        grid-column: 1;
        grid-row: 4;

        align-content: start;

        margin-bottom: 0;
    }


    .availability-grid > .location-card:last-child > .location-copy {
        grid-column: 2;
        grid-row: 2 / 5;

        max-width: none;
    }


    .availability-grid > .location-card:last-child > .location-whatsapp-button {
        grid-column: 2;
        grid-row: 5;

        justify-self: end;

        width: auto;

        min-width: 280px;

        padding: 0 26px;
    }

}


/* De plaatsnaam mag weer gelezen worden.
   In style.css staat onderaan een blok dat de naam op een
   breed scherm naar 13 pixels duwt — kleiner dan op een
   telefoon. Dat zetten we hier recht. */

@media (min-width: 1200px) {

    .location-name {
        font-size: 30px !important;

        white-space: normal !important;
    }

    .availability-grid > .location-card:last-child .location-name {
        font-size: 34px !important;
    }

}


@media (min-width: 900px) and (max-width: 1199px) {

    .location-name {
        font-size: 27px !important;

        white-space: normal !important;
    }

}


.location-name-sub {
    display: block;

    font-size: .56em;

    line-height: 1.1;

    letter-spacing: -.02em;

    opacity: .6;
}


.location-card-dark .location-name-sub {
    opacity: .78;
}


/* Contactgegevens: hetzelfde blok zet het e-mailadres op een
   breed scherm op 8 pixels. Dat is niet te lezen. */

@media (min-width: 900px) {

    .contact-direct-value {
        font-size: 13px !important;
    }

}


/* =========================================================
   3. KENMERKCHIPS
   ========================================================= */

.location-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin: 0 0 clamp(24px, 2.6vw, 34px);
    padding: 0;

    list-style: none;
}


.location-tags li {
    padding: 6px 12px;

    border-radius: 999px;

    border:
        1px solid rgba(41, 51, 47, .14);

    background:
        rgba(255, 255, 255, .6);

    font-size: 10.5px;
    font-weight: 700;

    letter-spacing: .07em;
    text-transform: uppercase;

    color: #29332F;

    white-space: nowrap;
}


.location-tags li.is-muted {
    background: transparent;

    border-style: dashed;

    color: #8A918D;
}


.location-card-dark .location-tags li {
    border-color:
        rgba(248, 195, 208, .28);

    background:
        rgba(248, 195, 208, .1);

    color: #F8C3D0;
}


.location-card-dark .location-tags li.is-muted {
    background: transparent;

    color: rgba(255, 255, 255, .5);
}


/* De wellness-kaart mag één accent meer hebben. */

.location-card.is-featured .location-tags li:first-child {
    background: #F8C3D0;

    border-color: #F8C3D0;

    color: #29332F;
}


/* =========================================================
   4. LIVE DATUMSTATUS
   cdw-2026.js zet de klassen op basis van de datum van vandaag.
   ========================================================= */

.availability-lede {
    max-width: 30ch;

    margin: 12px 0 0;

    font-size: 14px;

    line-height: 1.6;

    color: #626864;

    text-wrap: pretty;
}


@media (max-width: 767px) {

    .availability-heading-side {
        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 6px;
    }


    .availability-lede {
        max-width: none;

        margin-top: 4px;
    }

}


/* Relatief label achter een datum: vandaag, morgen, over 5 dagen */

.date-relative {
    grid-column: 2 / 3;

    justify-self: start;

    margin-top: 2px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;

    color: #A8AEAA;
}


.location-card-dark .date-relative {
    color: rgba(255, 255, 255, .42);
}


.location-date.is-today .date-relative,
.location-date.is-tomorrow .date-relative {
    color: #C1798F;
}


.location-card-dark .location-date.is-today .date-relative,
.location-card-dark .location-date.is-tomorrow .date-relative {
    color: #F8C3D0;
}


.location-date.has-relative {
    padding: 8px 0;

    row-gap: 0;
}


/* Vandaag krijgt een zacht lichtje links. */

.location-date.is-today {
    position: relative;
}


.location-date.is-today::before {
    content: "";

    position: absolute;
    left: -14px;
    top: 50%;

    width: 4px;
    height: 26px;

    border-radius: 999px;

    background: #F0AFC0;

    transform: translateY(-50%);
}


.location-date.is-today .date-number {
    color: #C1798F;
}


.location-card-dark .location-date.is-today .date-number {
    color: #F8C3D0;
}


/* Geweest: rustig wegzakken, niet verbergen. */

.location-date.is-past {
    opacity: .34;
}


.location-date.is-past .date-number {
    text-decoration: line-through;

    text-decoration-thickness: 1px;
}


.location-card.is-past {
    opacity: .58;

    filter: saturate(.55);
}


.location-card.is-past:hover {
    opacity: .82;

    transform: none;

    box-shadow: none;
}


/* Statuspil krijgt kleur naar gelang de stand. */

.location-status[data-state="vandaag"] {
    background: #F8C3D0;

    border-color: #F8C3D0;

    color: #29332F;
}


.location-status[data-state="vandaag"]::before {
    background: #29332F;

    animation: cdw-status-beat 1.9s ease-in-out infinite;
}


.location-status[data-state="binnenkort"]::before {
    background: #C6A15B;
}


.location-status[data-state="geweest"] {
    opacity: .6;
}


.location-status[data-state="geweest"]::before {
    background: currentColor;

    opacity: .4;
}


@keyframes cdw-status-beat {

    0%,
    100% {
        transform: scale(1);

        opacity: 1;
    }

    50% {
        transform: scale(1.45);

        opacity: .55;
    }

}


@media (prefers-reduced-motion: reduce) {

    .location-status[data-state="vandaag"]::before {
        animation: none;
    }

}


/* =========================================================
   5. KLEINE MODERNISERINGEN
   ========================================================= */

/* Eén duidelijke focusring voor toetsenbordgebruikers. */

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid #C1798F;
    outline-offset: 3px;

    border-radius: 6px;
}


::selection {
    background: #F8C3D0;

    color: #29332F;
}


/* Koppen breken op een natuurlijke plek in plaats van
   met één los woord op de laatste regel. */

.availability-title,
.contact-title,
.cg-title,
.hero-title {
    text-wrap: balance;
}


.hero-intro p,
.contact-copy p,
.cg-lead {
    text-wrap: pretty;
}


/* Ankerlinks landen niet meer onder de vaste header. */

:where(#films, #availability, #galerij, #contact, #top) {
    scroll-margin-top: clamp(80px, 12vh, 120px);
}


/* Beelden houden hun plek vast terwijl ze laden. */

.hero-photo-slide,
.cg-frame img {
    background: rgba(41, 51, 47, .05);
}


/* =========================================================
   6. VIDEOSECTIE — TSCHRISTINEXXX.NL

   De kaart gebruikt bewust dezelfde klassen als je
   locatiekaart (.location-card en de donkere variant). Zo
   ziet hij er vanzelf hetzelfde uit en beweegt hij mee als
   die opmaak ooit verandert. Hier staan alleen de paar
   dingen die anders moeten.
   ========================================================= */


/* Twee witte secties onder elkaar loopt in elkaar over.
   Een heel lichte tint zet de videosectie apart zonder dat
   het een ander blok van een andere site wordt. */

.films-section {
    background: #FBF8F9;
}


/* De prijs mag nooit afbreken over twee regels. */

.films-section .date-number {
    white-space: nowrap;
}


/* De 18+ regel onderaan de tekst: kleiner en rustiger,
   zodat hij informeert zonder te schreeuwen. */

.films-section .location-copy small {
    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: .06em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .42);
}


/* Deze kaart heeft geen datums die verlopen, dus het roze
   stipje in de pil hoort hier niet te kloppen — het mag
   gewoon een accent zijn. */

.films-section .location-status {
    letter-spacing: .16em;
}


/* =========================================================
   7. DE FILMSTRIP

   Eén kaart, met de aanbieding onderin en daarboven een
   strip die je zijwaarts doorbladert. Het idee is hetzelfde
   als je fotogalerij: genummerde kaders op een rij, alleen
   kleiner en horizontaal.

   GEEN FILMSTILLS. Op tschristinexxx.nl bestaan die ook niet
   als losse bestanden — de voorproefjes zijn spelers van
   Bunny. En belangrijker: daar staat een leeftijdspoort en
   hier niet. De kaders zijn daarom typografisch: filmnummer,
   soort, titel, duur, prijs. Klikken brengt je naar de film
   achter je eigen poort.
   ========================================================= */


.film-card {
    padding-bottom:
        clamp(26px, 3vw, 40px);
}


.film-card-name {
    margin-bottom:
        clamp(26px, 3vw, 38px);
}


/* --- Kopregel boven de strip ------------------------------ */

.film-rail-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding-bottom: 13px;

    border-bottom:
        1px solid rgba(255, 255, 255, .13);

    margin-bottom:
        clamp(16px, 1.8vw, 22px);
}


.film-rail-label {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: .20em;

    color: rgba(255, 255, 255, .7);
}


.film-rail-nav {
    display: flex;

    align-items: center;

    gap: 9px;
}


.film-rail-counter {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: .14em;

    color: rgba(255, 255, 255, .42);

    font-variant-numeric: tabular-nums;
}


.film-rail-btn {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(248, 195, 208, .3);

    background: transparent;

    color: #F8C3D0;

    font-size: 14px;

    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        opacity .2s ease;
}


.film-rail-btn:hover:not(:disabled) {
    background: #F8C3D0;

    border-color: #F8C3D0;

    color: #29332F;
}


.film-rail-btn:disabled {
    opacity: .26;

    cursor: default;
}


/* --- De strip zelf ---------------------------------------- */

.film-rail-wrap {
    position: relative;

    margin:
        0 calc(clamp(28px, 3vw, 44px) * -1);
}


/* Rechts een vervaging, zodat je ziet dat er meer staat.
   De kleur is die van de donkere kaart. */

.film-rail-wrap::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 14px;

    width: clamp(24px, 4vw, 52px);

    background:
        linear-gradient(to right, rgba(41, 51, 47, 0), #29332F);

    pointer-events: none;
}


.film-rail {
    display: flex;

    gap: clamp(11px, 1.2vw, 15px);

    padding:
        2px clamp(28px, 3vw, 44px) 14px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    scroll-padding-left:
        clamp(28px, 3vw, 44px);

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}


.film-rail::-webkit-scrollbar {
    display: none;
}


.film-rail:focus-visible {
    outline: 2px solid #F8C3D0;

    outline-offset: -2px;

    border-radius: 12px;
}


/* --- Eén kader ------------------------------------------- */

.film-slide {
    flex: 0 0 auto;

    width: clamp(158px, 17vw, 196px);

    scroll-snap-align: start;

    display: flex;

    flex-direction: column;

    gap: 10px;

    text-decoration: none;

    color: #FFFFFF;
}


.film-slide-frame {
    position: relative;

    display: block;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 15px;

    border:
        1px solid rgba(248, 195, 208, .2);

    background:
        linear-gradient(148deg,
            rgba(248, 195, 208, .17),
            rgba(248, 195, 208, .04) 62%,
            rgba(255, 255, 255, .02));

    transition:
        border-color .24s ease,
        transform .24s ease;
}


.film-slide:hover .film-slide-frame,
.film-slide:focus-visible .film-slide-frame {
    border-color: #F8C3D0;

    transform: translateY(-3px);
}


/* Het filmnummer als groot spookcijfer, net als de tags in
   je fotogalerij. */

.film-slide-ghost {
    position: absolute;

    right: 9px;
    bottom: 2px;

    font-family:
        "Rubik Mono One",
        sans-serif;

    font-size: 44px;

    line-height: 1;

    letter-spacing: -.04em;

    color: rgba(255, 255, 255, .085);

    pointer-events: none;
}


.film-slide-kind {
    position: absolute;

    top: 9px;
    left: 9px;

    padding: 4px 9px;

    border-radius: 999px;

    background: rgba(41, 51, 47, .62);

    font-size: 8.5px;

    font-weight: 700;

    letter-spacing: .15em;

    color: #F8C3D0;
}


.film-slide-flag {
    position: absolute;

    top: 9px;
    right: 9px;

    padding: 4px 8px;

    border-radius: 999px;

    border:
        1px dashed rgba(255, 255, 255, .3);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .62);
}


/* Het driehoekje. Puur CSS, geen plaatje nodig. */

.film-slide-play {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 38px;
    height: 38px;

    margin: -19px 0 0 -19px;

    border-radius: 50%;

    border:
        1px solid rgba(248, 195, 208, .45);

    transition:
        background .24s ease,
        border-color .24s ease;
}


.film-slide-play::after {
    content: "";

    position: absolute;

    left: 15px;
    top: 12px;

    width: 0;
    height: 0;

    border-left: 11px solid #F8C3D0;

    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;

    transition: border-left-color .24s ease;
}


.film-slide:hover .film-slide-play {
    background: #F8C3D0;

    border-color: #F8C3D0;
}


.film-slide:hover .film-slide-play::after {
    border-left-color: #29332F;
}


.film-slide-title {
    font-family:
        "Fraunces",
        Georgia,
        serif;

    font-size: 15px;

    font-style: italic;

    line-height: 1.28;

    text-wrap: pretty;
}


.film-slide-meta {
    display: flex;

    align-items: baseline;

    gap: 8px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.film-slide-dur {
    color: rgba(255, 255, 255, .45);
}


.film-slide-price {
    margin-left: auto;

    font-size: 14px;

    letter-spacing: -.01em;

    color: #F8C3D0;
}


.film-rail-hint {
    margin:
        13px 0 clamp(30px, 3.4vw, 46px);

    font-size: 9.5px;

    font-weight: 700;

    letter-spacing: .13em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .32);
}


/* --- De aanbieding onder de strip ------------------------- */

.film-offer {
    display: grid;

    gap: clamp(24px, 3vw, 42px);

    padding-top:
        clamp(24px, 2.8vw, 36px);

    border-top:
        1px solid rgba(255, 255, 255, .13);
}


@media (min-width: 768px) {

    .film-offer {
        grid-template-columns:
            minmax(0, 1.15fr) minmax(0, .85fr);

        align-items: start;
    }

}


.film-offer-copy {
    max-width: 540px;

    font-size:
        clamp(15px, 1.1vw, 16.5px);

    line-height: 1.75;

    color: rgba(255, 255, 255, .68);
}


.film-offer-copy p {
    margin: 0 0 1.15em;
}


.film-offer-copy p:last-child {
    margin-bottom: 0;
}


.film-offer-copy small {
    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: .06em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .42);
}


.film-offer-deal {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 9px;

    padding:
        clamp(20px, 2.2vw, 28px);

    border-radius: 22px;

    border:
        1px solid rgba(248, 195, 208, .26);

    background:
        rgba(248, 195, 208, .08);
}


.film-offer-label {
    font-size: 9.5px;

    font-weight: 700;

    letter-spacing: .2em;

    color: rgba(248, 195, 208, .8);
}


.film-offer-price {
    display: flex;

    align-items: baseline;

    gap: 11px;
}


.film-offer-price b {
    font-family:
        "Rubik Mono One",
        sans-serif;

    font-size:
        clamp(30px, 3.2vw, 42px);

    line-height: 1;

    letter-spacing: -.04em;

    color: #FFFFFF;
}


.film-offer-price s {
    font-size: 15px;

    font-weight: 600;

    color: rgba(255, 255, 255, .38);
}


.film-offer-save {
    font-size: 12.5px;

    font-weight: 600;

    line-height: 1.5;

    color: #F8C3D0;
}


.film-offer-single {
    font-size: 12.5px;

    line-height: 1.5;

    color: rgba(255, 255, 255, .55);
}


.film-offer-deal .location-whatsapp-button {
    margin-top: 12px;
}


/* Op een smal scherm mogen de kaders wat groter, want er
   past er toch maar één tegelijk in beeld. */

@media (max-width: 520px) {

    .film-slide {
        width: 63vw;

        max-width: 235px;
    }


    .film-slide-title {
        font-size: 16px;
    }

}


/* Wie "beperk beweging" aan heeft staan, krijgt geen
   schuivende strip maar een directe sprong. */

@media (prefers-reduced-motion: reduce) {

    .film-slide:hover .film-slide-frame {
        transform: none;
    }

}


/* =========================================================
   6. DE OPROEP — PERFORMERS GEZOCHT
   Hoort bij de sectie met id="performers" in index.html.
   Links de tekst, rechts het roze blok met de twee
   voorwaarden. Op een telefoon staat alles onder elkaar.
   ========================================================= */

.cast-body {
    display: grid;

    gap: clamp(24px, 3vw, 42px);

    margin-top:
        clamp(20px, 2.4vw, 30px);

    padding-top:
        clamp(24px, 2.8vw, 36px);

    border-top:
        1px solid rgba(255, 255, 255, .13);
}


@media (min-width: 768px) and (max-width: 1099px) {

    .cast-body {
        grid-template-columns:
            minmax(0, 1.05fr) minmax(0, .95fr);

        align-items: start;
    }

}


.cast-copy {
    max-width: 540px;

    font-size:
        clamp(15px, 1.1vw, 16.5px);

    line-height: 1.75;

    color: rgba(255, 255, 255, .68);
}


.cast-copy p {
    margin: 0 0 1.15em;
}


.cast-copy p:last-child {
    margin-bottom: 0;
}


/* Het roze kader met de voorwaarden. */

.cast-rules {
    display: flex;

    flex-direction: column;

    gap: 16px;

    padding:
        clamp(20px, 2.2vw, 28px);

    border-radius: 22px;

    border:
        1px solid rgba(248, 195, 208, .26);

    background:
        rgba(248, 195, 208, .08);
}


.cast-rules-label {
    font-size: 9.5px;

    font-weight: 700;

    letter-spacing: .2em;

    color: rgba(248, 195, 208, .8);
}


.cast-rule {
    display: flex;

    gap: 14px;

    align-items: flex-start;
}


.cast-rule-num {
    flex: 0 0 auto;

    min-width: 26px;

    padding: 3px 0;

    font-family:
        "Rubik Mono One",
        sans-serif;

    font-size: 13px;

    line-height: 1;

    letter-spacing: -.03em;

    color: rgba(248, 195, 208, .75);
}


.cast-rule-text strong {
    display: block;

    margin-bottom: 4px;

    font-size: 14.5px;

    font-weight: 700;

    letter-spacing: .01em;

    color: #FFFFFF;
}


.cast-rule-text p {
    margin: 0;

    font-size: 13.5px;

    line-height: 1.6;

    color: rgba(255, 255, 255, .66);
}


.cast-rules-rest {
    margin: 0;

    padding-top: 14px;

    border-top:
        1px solid rgba(248, 195, 208, .2);

    font-size: 13px;

    line-height: 1.6;

    color: #F8C3D0;
}


/* De twee knoppen onderaan de kaart. */

.cast-actions {
    display: grid;

    gap: 12px;

    margin-top:
        clamp(24px, 2.8vw, 34px);
}


@media (min-width: 620px) and (max-width: 1099px) {

    .cast-actions {
        grid-template-columns:
            minmax(0, 1fr) minmax(0, 1fr);

        align-items: stretch;
    }

}


/* De WhatsApp-knop heeft van zichzelf een grote marge boven,
   maar hier zit die marge al op het blok eromheen. */

.cast-actions .location-whatsapp-button {
    margin-top: 0;
}


/* De mailknop: dezelfde vorm, maar alleen een lijntje. */

.cast-button-line {
    width: 100%;

    min-height: 54px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    border-radius: 999px;

    border:
        1px solid rgba(248, 195, 208, .45);

    background: transparent;

    color: #F8C3D0;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .04em;

    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.cast-button-line:hover {
    transform: translateY(-2px);

    border-color: #F8C3D0;

    background: rgba(248, 195, 208, .12);

    color: #FFFFFF;
}


.cast-note {
    margin:
        14px 0 0;

    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: .06em;
    text-transform: uppercase;

    text-align: center;

    color: rgba(255, 255, 255, .42);
}


@media (prefers-reduced-motion: reduce) {

    .cast-button-line:hover {
        transform: none;
    }

}


/* De twee oproepkaarten onder elkaar. Elke kaart heeft van
   binnen al twee kolommen, dus ze staan nooit naast elkaar. */

.cast-grid {
    display: grid;

    gap: clamp(18px, 2.4vw, 30px);
}


/* Op een desktop staan de oproep en de gangbang naast elkaar,
   allebei een kleine helft. Daaronder blijven ze onder elkaar. */

@media (min-width: 1100px) {

    .cast-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        align-items: start;
    }

    .cast-copy {
        max-width: none;
    }

}


/* Regeltje boven de voorwaarden: waarom ze er staan. */

.cast-rules-intro {
    margin: -4px 0 2px;

    font-size: 13px;

    line-height: 1.6;

    color: rgba(255, 255, 255, .66);
}


/* De betaalmanieren als kleine labels onder de filmtekst. */

.film-pay-tags {
    margin: 4px 0 14px;
}


/* =========================================================
   7. BOEKEN PER DAG
   Twee knoppen onder de datums, zodat meteen duidelijk is
   dat je per dag reserveert. Op een telefoon onder elkaar.
   ========================================================= */

.location-book {
    margin-top:
        clamp(20px, 2.4vw, 28px);
}


.location-book-label {
    display: block;

    margin-bottom: 10px;

    font-size: 9.5px;

    font-weight: 700;

    letter-spacing: .2em;

    color: rgba(41, 51, 47, .5);
}


.location-card-dark .location-book-label {
    color: rgba(255, 255, 255, .5);
}


.location-book-row {
    display: grid;

    gap: 10px;
}


@media (min-width: 560px) {

    .location-book-row {
        grid-template-columns:
            minmax(0, 1fr) minmax(0, 1fr);
    }

}


/* De knoppen hebben van zichzelf een marge boven; hier zit
   die al op het blok eromheen. */

.location-book .location-whatsapp-button {
    margin-top: 0;
}


.location-alt-link {
    display: inline-block;

    margin-top: 14px;

    font-size: 12.5px;

    font-weight: 600;

    letter-spacing: .01em;

    color: rgba(41, 51, 47, .62);

    text-decoration: underline;

    text-underline-offset: 3px;

    transition: color .2s ease;
}


.location-alt-link:hover {
    color: #29332F;
}


.location-card-dark .location-alt-link {
    color: rgba(255, 255, 255, .6);
}


.location-card-dark .location-alt-link:hover {
    color: #F8C3D0;
}


/* =========================================================
   8. VOORPROEFJES IN DE FILMSTRIP
   De tegel is nu een knop: klik erop en de speler van Bunny
   verschijnt op dezelfde plek.
   ========================================================= */

.film-slide-facade {
    width: 100%;

    padding: 0;

    margin: 0;

    font: inherit;

    color: inherit;

    text-align: left;

    cursor: pointer;

    -webkit-appearance: none;
    appearance: none;
}


/* Het labeltje linksonder in de tegel. */

.film-slide-tag {
    position: absolute;

    left: 10px;
    bottom: 10px;

    padding: 4px 9px;

    border-radius: 999px;

    background: rgba(21, 26, 24, .72);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .12em;

    color: #F8C3D0;

    pointer-events: none;
}


/* De titel en de prijs eronder blijven een gewone link. */

.film-slide-link {
    display: flex;

    flex-direction: column;

    gap: 6px;

    text-decoration: none;

    color: inherit;
}


.film-slide-link:hover .film-slide-title {
    color: #F8C3D0;
}


/* Zodra de speler geladen is. */

.film-slide-frame.is-playing {
    background: #000000;

    border-color: #F8C3D0;
}


.film-slide-frame.is-playing iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* Een tegel met een speler erin mag wat breder, anders kijk
   je door een brievenbus. */

@media (min-width: 700px) {

    .film-slide:has(.is-playing) {
        width: clamp(260px, 30vw, 340px);

        transition: width .24s ease;
    }

}