/* ==========================================================================
   Pages — pagina-specifieke layouts en kleine varianten (mobile first)
   ========================================================================== */

/* Lijsten die als raster dienen */
ul.raster,
ul.events,
ul.tegels,
ul.ingangen {
    list-style: none;
}

.raster > li {
    display: flex;
    min-width: 0;
}

.raster > li > * {
    flex: 1;
    min-width: 0;
}

.tegels > li,
.ingangen > li {
    display: grid;
}

/* Varianten van bestaande componenten */
.praktisch__kaart--zacht {
    background: var(--poederroze);
    border-color: transparent;
    box-shadow: none;
}

.sectie--zacht .praktisch__kaart--zacht {
    background: var(--wit);
}

.formulier-kaart--wit {
    background: var(--wit);
}

.foto--portret-klein {
    width: 100%;
    max-width: 380px;
    justify-self: center;
}

.foto--breed {
    max-width: 820px;
    margin: 0 auto var(--space-6);
}

.ratio-4-5 > .beeld-ph,
.ratio-16-9 > .beeld-ph {
    height: 100%;
}

.galerij__item {
    aspect-ratio: 4 / 5;
}

.galerij__item .foto,
.galerij__item .foto img {
    height: 100%;
}

.uitgelicht--wit {
    background: var(--wit);
    box-shadow: var(--shadow-kaart);
    margin-bottom: var(--space-6);
}

/* Lichaamswerk-overzicht: alle sessies als brede kaart, één per rij */
.aanbod-lijst {
    display: grid;
    gap: var(--space-6);
}

.aanbod-lijst .uitgelicht--wit {
    margin-bottom: 0;
}

.aanbod-lijst .kaart-prijzen {
    margin-top: 0;
}

/* Zelfde volgorde als op de homekaarten: eerst 'Ontdek', dan de boekknop */
.aanbod-knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.uitgelicht__beeld .beeld-ph {
    min-height: 280px;
    border-radius: 0;
    border: 0;
}

.tegel__beeld .beeld-ph {
    border-radius: 0;
}

.kaart-link-plain {
    color: inherit;
    text-decoration: none;
}

.kaart-link-plain:hover {
    color: var(--accent);
}

.h3-maat {
    font-size: var(--fs-h3);
}

.meta-lijst a {
    font-weight: 600;
}

a.filterknop {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

a.filterknop[aria-current="true"] {
    background: var(--rozenhout);
    border-color: var(--rozenhout);
    color: var(--wit);
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
/* Hero: iets kleinere, bredere titel, zodat hij in minder regels past */
.pagina-home .bb-herofoto__tekst {
    max-width: 860px;
}

.pagina-home .bb-herofoto .display {
    max-width: 22ch;
    font-size: clamp(2.3rem, 1.6rem + 2.6vw, 4.25rem);   /* 37 → 68 */
}

/* Ervaringen: minder witruimte tussen de titel en het grote aanhalingsteken van de carrousel */
.bb-sectiekop:has(+ .carrousel) {
    margin-bottom: 0;
}

.lichaamswerk-rij {
    margin-top: var(--space-5);
}

.uitgelicht + .lichaamswerk-rij {
    margin-top: var(--space-6);
}

/* Werkwijze op lichtroze: rozenhout voor accenten, aarde voor lopende tekst */
.werkwijze .principe p {
    color: var(--aarde);
}

.werkwijze .principe .principe__kort {
    color: var(--rozenhout);
}

/* Meer dan lichaamswerk: vier compacte tegels naast elkaar */
.tegels--4 .tegel {
    grid-template-rows: auto 1fr;
    gap: var(--space-3);
}

/* links onderaan uitlijnen, ook als de teksten verschillend lang zijn */
.tegels--4 .tegel__tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tegels--4 .tegel__tekst .bb-tekstlink {
    margin-top: auto;
    padding-top: var(--space-3);
}

.tegels--4 .tegel__beeld {
    aspect-ratio: 4 / 3;
}

.tegels--4 .tegel h3 {
    font-size: clamp(1.375rem, 1.25rem + .4vw, 1.625rem);
}

.tegels--4 .tegel p {
    font-size: var(--fs-small);
}

.werkwijze .principe h3 {
    font-size: var(--fs-h3);
}

/* 'Mijn werkwijze' (home en lichaamswerk-overzicht): geen streepje onder de titels */
.werkwijze .principe h3 {
    padding-bottom: 0;
}

.werkwijze .principe h3::after {
    content: none;
}

/* --------------------------------------------------------------------------
   Sessiepagina's
   -------------------------------------------------------------------------- */
/* Tweede rij binnen 'Over deze sessie' (Psoas Release) */
.omschrijving-rij + .omschrijving-rij {
    margin-top: var(--space-7);
}

/* Anatomische tekening: witte achtergrond, geen kader, rustig bijschrift */
.anatomie {
    margin: 0;
    width: 100%;
    max-width: 480px;
    justify-self: center;
}

.anatomie img {
    width: 100%;
    height: auto;
}

.anatomie figcaption {
    margin-top: var(--space-2);
    font-size: var(--fs-small);
    font-style: italic;
    text-align: center;
    color: var(--ink);
}

.verdieping__kop {
    font-size: var(--fs-h3);
    line-height: 1.2;
    color: var(--ink-heading);
}

/* Online agenda op de sessiepagina's */
.container--agenda {
    max-width: calc(960px + 2 * var(--gutter));
}

/* Praktisch (sessiepagina's): links 'Duur en prijs' compact + 'Goed om vooraf te weten', rechts de praktische info */
.praktisch__kolom {
    display: grid;
    gap: var(--space-4);
    align-content: start;
    min-width: 0;
}

.praktisch__kaart.praktisch__kaart--compact {
    padding: var(--space-4);
}

/* Beide kolommen even hoog */
.praktisch:has(.praktisch__kolom) {
    align-items: stretch;
}

/* Praktische info in dezelfde lettergrootte als 'Goed om vooraf te weten' */
.praktisch:has(.praktisch__kolom) > .praktisch__kaart :is(p, li, dd, dt) {
    font-size: .9375rem;
}

/* Met contra-indicaties: de linkerkolom rekt mee en de meldingskaart vult de resterende hoogte,
   zodat beide kolommen onderaan gelijk eindigen */
@media (min-width: 900px) {
    .praktisch__kolom:has(> .melding) {
        grid-template-rows: auto 1fr;
        align-content: stretch;
    }
}

/* Zonder contra-indicaties staat de prijskaart alleen in de linkerkolom: laat ze even hoog worden
   als de rechterkaart en zet de afspraakknop onderaan */
@media (min-width: 900px) {
    .praktisch__kolom:has(> .praktisch__kaart--compact:only-child) {
        align-content: stretch;
    }

    .praktisch__kolom > .praktisch__kaart--compact:only-child {
        display: flex;
        flex-direction: column;
    }

    .praktisch__kolom > .praktisch__kaart--compact:only-child > .knoppen {
        margin-top: auto;
        padding-top: var(--space-4);
    }
}

/* Rechterkaart met dezelfde binnenmarge, zodat beide titels op één lijn staan */
.praktisch:has(.praktisch__kolom) > .praktisch__kaart {
    padding: var(--space-4);
}

@media (min-width: 600px) {
    .praktisch:has(.praktisch__kolom) > .praktisch__kaart {
        padding: var(--space-5);
    }
}

.praktisch__kaart--compact > * + * {
    margin-top: 12px;
}

/* Compact en zonder lijnen */
.praktisch__kaart--compact .tarieven th,
.praktisch__kaart--compact .tarieven td {
    padding-block: 4px;
    border: 0;
}

/* 'Voor wie' als laatste rij van de tabel: zelfde letter als de naam van de massage, waarden op één lijn */
.praktisch__kaart--compact .tarieven .tarieven__voorwie th,
.praktisch__kaart--compact .tarieven .tarieven__voorwie td {
    padding-top: 12px;
    font-weight: 600;
    text-align: left;
}

.praktisch__kaart--compact .tarieven .tarieven__voorwie td {
    font-weight: 400;
    color: var(--ink);
}

.praktisch__kaart--compact .knoppen {
    margin-top: var(--space-4);
}

.melding--kaart {
    padding: var(--space-4);
}

@media (min-width: 600px) {
    .praktisch__kaart.praktisch__kaart--compact {
        padding: var(--space-5);
    }

    .melding--kaart {
        padding: var(--space-5);
    }
}

/* Voordelen: witte kaartjes met een vinkje, in twee kolommen */
.voordelen {
    display: grid;
    gap: var(--space-3);
    list-style: none;
}

.voordeel {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 18px 22px;
    border-radius: var(--radius-md);
    background: var(--wit);
    box-shadow: var(--shadow-kaart);
    color: var(--ink-heading);
    line-height: 1.45;
}

.voordeel__icoon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--poederroze);
    color: var(--accent);
}

.voordeel__icoon .icoon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* Voordelen in groepen (bv. Fysiek / Emotioneel & energetisch) */
.voordelen-groepen {
    display: grid;
    gap: var(--space-4);
}

.voordelen-groep {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--wit);
    box-shadow: var(--shadow-kaart);
}

.voordelen-groep h3 {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-3);
}

.voordelen-groep__lijst {
    display: grid;
    gap: 12px;
    list-style: none;
}

.voordelen-groep__lijst li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--ink-heading);
    line-height: 1.45;
}

.voordelen-groep__lijst .voordeel__icoon {
    width: 28px;
    height: 28px;
    margin-top: -2px;
}

.voordelen-groep__lijst .voordeel__icoon .icoon {
    width: 15px;
    height: 15px;
}

@media (min-width: 700px) {
    .voordelen-groepen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .voordelen-groep {
        padding: var(--space-5);
    }
}

@media (min-width: 700px) {
    .voordelen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3) var(--space-4);
    }
}

/* --------------------------------------------------------------------------
   Over mij
   -------------------------------------------------------------------------- */
.bb-herofoto--overmij,
.bb-herofoto--binnen {
    min-height: min(80svh, 640px);
}

/* Kerngegevens (duur, prijs, doelgroep) op een donkere fotohero */
.bb-herofoto .chip {
    background: rgba(43, 33, 31, .35);
    border-color: rgba(255, 255, 255, .35);
    color: var(--wit);
}

.bb-herofoto .chip .icoon {
    color: var(--roze);
}

/* Groot, gecentreerd citaat op wit (Over mij) */
.citaat-sectie {
    padding-block: 40px;                 /* mobiel (standaard sectie: 56px) */
}

@media (min-width: 900px) {
    .citaat-sectie {
        padding-block: 72px;             /* desktop (standaard sectie: 96px) */
    }
}

.citaat-groot {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.citaat-groot__teken {
    display: block;
    height: .42em;
    margin-bottom: var(--space-3);
    font-family: var(--font-titel);
    font-size: clamp(11rem, 8rem + 9vw, 17rem);   /* bewust groot: het teken draagt de sectie */
    line-height: 1;
    color: var(--roze);
    user-select: none;
}

.citaat-groot blockquote {
    margin: 0;
    font-family: var(--font-titel);
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);   /* 32 → 56 */
    line-height: 1.15;
    color: var(--ink-heading);
    text-wrap: balance;
}

.citaat-groot blockquote p {
    max-width: none;
}

.citaat-groot figcaption {
    margin-top: var(--space-5);
    font: 600 var(--fs-label)/1.4 var(--font-tekst);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Gevolgde opleidingen (Over mij): drie kolommen (tablet twee) met een bolletje per opleiding.
   Bredere container dan de intro erboven, zodat lange namen in drie kolommen niet te smal worden. */
.container--opleidingen {
    max-width: calc(1040px + 2 * var(--gutter));
}

.opleidingen {
    margin-top: var(--space-6);
}

.opleidingen__lijst {
    margin: 0 auto;
    list-style: none;
    text-align: left;
    column-gap: var(--space-6);
}

.opleidingen__lijst li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 var(--space-3) 26px;
    break-inside: avoid;
}

.opleidingen__lijst li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--kaarslicht);
}

.opleidingen__naam {
    font-family: var(--font-titel);
    font-size: var(--fs-h4);
    line-height: 1.25;
    color: var(--ink-heading);
}

.opleidingen__waar {
    font-size: var(--fs-small);
    color: var(--ink);
}

@media (min-width: 600px) {
    .opleidingen__lijst {
        column-count: 2;
    }
}

@media (min-width: 900px) {
    .opleidingen__lijst {
        column-count: 3;
    }
}

.verhaal .bb-lead {
    color: var(--ink-heading);
}

/* --------------------------------------------------------------------------
   Cadeaubon
   -------------------------------------------------------------------------- */
.cadeau-raster {
    display: grid;
    gap: var(--space-7);
    align-items: start;
}

.cadeau__preview > * + * {
    margin-top: var(--space-4);
}

.keuzes--4 {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

.keuze--compact {
    justify-content: flex-start;
    align-items: center;
    padding: 12px 14px;
}

.keuze--compact input {
    margin-top: 0;
}

.cadeau__info {
    padding-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-raster {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}

.contact__info > * + * {
    margin-top: var(--space-5);
}

.contact__info .bb-label + h2 {
    margin-top: var(--space-2);
}

.contact__info address {
    font-style: normal;
}

/* Contactgegevens: zelfde opbouw als de footer (hart → Over mij, adres → Google Maps, sociale knoppen) */
.contact-lijst {
    display: grid;
    gap: 10px;
    list-style: none;
}

.contact-lijst a {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    padding-block: 2px;
    font-weight: 600;
    text-decoration: none;
}

.contact-lijst a:hover {
    text-decoration: underline;
    text-underline-offset: .25em;
}

.contact-lijst .icoon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    color: var(--accent);
}

.contact-lijst a.contact-lijst__kaartlink {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 28px;
    font-size: var(--fs-small);
    font-weight: 700;
}

.contact-lijst__kaartlink .icoon {
    width: 14px;
    height: 14px;
    margin-top: 0;
}

.contact__info .contact-sociaal {
    display: flex;
    gap: 8px;
    margin-top: var(--space-4);
}

.contact-sociaal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--lijn);
    border-radius: 50%;
    color: var(--accent);
    transition: border-color 300ms, color 300ms, background-color 300ms;
}

.contact-sociaal a:hover {
    border-color: var(--accent);
    background-color: var(--poederroze);
    color: var(--accent-hover);
}

.contact-sociaal .icoon {
    width: 19px;
    height: 19px;
}

/* --------------------------------------------------------------------------
   Agenda, juridisch, 404
   -------------------------------------------------------------------------- */
.agenda-info {
    margin-bottom: var(--space-6);
}

.juridisch h2 {
    font-size: var(--fs-h3);
}

.juridisch .todo-blok {
    margin-bottom: var(--space-5);
}

.niet-gevonden {
    position: relative;
    overflow: hidden;
    min-height: 70svh;
    display: grid;
    align-items: center;
    isolation: isolate;
}

.niet-gevonden > .container > * + * {
    margin-top: var(--space-4);
}

.niet-gevonden__figuur {
    position: absolute;
    right: -40px;
    bottom: -120px;
    height: 120%;
    width: auto;
    opacity: .35;
    z-index: -1;
}

.niet-gevonden__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--space-4);
    list-style: none;
    padding-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   Opleiding: accent per type zonder andere HTML
   -------------------------------------------------------------------------- */
.opleiding--masterclass .bb-hero {
    border-top: 3px solid var(--roze);
}

.opleiding--basis .bb-hero .chip:first-child {
    background: var(--nachtaarde);
    border-color: var(--nachtaarde);
    color: var(--wit);
}

/* ==========================================================================
   Grotere schermen
   ========================================================================== */
@media (min-width: 600px) {
    .stappen--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

}

@media (min-width: 900px) {
    .stappen--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stappen--4,
    .kenmerken--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

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

    .cadeau-raster {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    }

    .cadeau__preview {
        position: sticky;
        top: 24px;
    }

    .contact-raster {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        gap: var(--space-7);
        align-items: stretch;
    }

    /* Formulierkaart even hoog als de linkerkolom: het berichtveld vult de extra hoogte */
    .contact-raster > .formulier {
        display: flex;
        flex-direction: column;
    }

    .contact-raster > .formulier > .bb-veld--groei {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .bb-veld--groei textarea {
        flex: 1 1 auto;
        min-height: 10rem;
    }

    .foto--portret-klein {
        justify-self: start;
    }

    .split--omgekeerd .foto--portret-klein {
        justify-self: end;
    }

}

@media (min-width: 1000px) {
    .raster--dienst {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Online agenda op de sessiepagina's: rechtstreekse Calendly-widget met optionele keuzeknoppen */
.calendly-agenda {
    display: grid;
    gap: var(--space-4);
}

.calendly-keuze {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.calendly-keuze__knop {
    padding: 10px 22px;
    border: 1px solid var(--roze);
    border-radius: var(--radius-pill);
    background: var(--wit);
    color: var(--accent);
    font: inherit;
    font-size: .9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--duur) var(--ease), border-color var(--duur) var(--ease), color var(--duur) var(--ease);
}

.calendly-keuze__knop:hover {
    background: var(--poederroze);
}

.calendly-keuze__knop[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--wit);
}

.calendly-keuze__knop:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.calendly-agenda__widget {
    overflow: hidden;
    border-radius: var(--radius-md);
}

/* Cranio Sacraal: de hero-foto heeft Lesley en de cliënte in het midden van het beeld.
   Op brede schermen schuift de foto naar rechts en wordt het tekstblok smaller,
   zodat de titel niet over de gezichten valt. */
@media (min-width: 900px) {
    .sessie-cranioSacraal .bb-herofoto > picture img,
    .sessie-cranioSacraal .bb-herofoto > img {
        inset: 0 auto 0 0;
        width: 125%;
        max-width: none;
    }

    .sessie-cranioSacraal .bb-herofoto__tekst {
        max-width: 560px;
    }
}

/* Hero met het onderwerp links in de foto (bv. de massagehand op DSC01113): op desktop schuift de foto
   naar rechts en vloeit ze links zacht over in de donkere achtergrond, zodat de tekst er niet over valt. */
@media (min-width: 900px) {
    .bb-herofoto--foto-rechts > picture img,
    .bb-herofoto--foto-rechts > img {
        inset: 0 0 0 auto;
        width: 72%;
        max-width: none;
        object-position: center 45%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
    }

    .bb-herofoto--foto-rechts .bb-herofoto__tekst {
        max-width: 580px;
    }
}

/* --------------------------------------------------------------------------
   Vrouwenfiguur uit het logo als zachte lijntekening in elke lichtroze sectie
   zonder foto (op alle pagina's). Voor de rust staat de figuur altijd rechts,
   verticaal gecentreerd. :has() bekijkt ook inhoud die later via JavaScript
   verschijnt (bv. agenda-items met beeld); oudere browsers tonen gewoon geen figuur.
   -------------------------------------------------------------------------- */
.sectie--zacht:not(:has(img, picture, iframe)) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.sectie--zacht:not(:has(img, picture, iframe))::before {
    content: "";
    position: absolute;
    z-index: -1;
    /* Altijd verticaal gecentreerd en meeschalend met de hoogte van de sectie */
    top: 50%;
    right: -30px;
    height: 88%;
    aspect-ratio: 515 / 1199;
    transform: translateY(-50%);
    background: url("../assets/logo/figuur-roze.svg") no-repeat center / contain;
    opacity: .22;
    pointer-events: none;
}

/* Op kleine schermen staat de figuur achter de tekst: kleiner en nog zachter */
@media (max-width: 899.98px) {
    .sectie--zacht:not(:has(img, picture, iframe))::before {
        /* Mobiel: ook meeschalend, maar nooit breder dan ongeveer twee derde van het scherm */
        height: min(80%, 150vw);
        opacity: .12;
    }
}

/* ==========================================================================
   Vrouwencirkels (en herbruikbaar fotoalbum)
   ========================================================================== */

/* Statement over de volle breedte (geen citaat) */
.statement {
    padding-block: clamp(88px, 9vw, 136px);
}

.statement__tekst {
    max-width: 40ch;
    margin-inline: auto;
    font-family: var(--font-titel);
    font-size: var(--fs-citaat);
    line-height: 1.2;
    color: var(--ink-heading);
    text-align: center;
    text-wrap: balance;
}

/* Praktisch zonder scheidingslijnen */
.feitenlijst--zonder-lijnen div,
.feitenlijst--zonder-lijnen div:first-child {
    border: 0;
    padding-block: 8px;
}

/* Fotoalbum: collage. Mobiel twee kolommen, desktop vier kolommen met grote, hoge en brede tegels */
.album {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 44vw;
    grid-auto-flow: dense;
    gap: 10px;
    margin-top: var(--space-6);
    list-style: none;
    padding: 0;
}

.album__item--groot,
.album__item--breed,
.album__item--vol {
    grid-column: 1 / -1;
}

.album__item--groot,
.album__item--breed {
    grid-column: span 2;
}

.album__item--groot {
    grid-row: span 2;
}

.album__item--hoog {
    grid-row: span 2;
}

.album__knop {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius-foto);
    overflow: hidden;
    background: var(--zacht-vlak);
    cursor: zoom-in;
    isolation: isolate;
}

.album__knop img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform var(--duur-traag) var(--ease), filter var(--duur) var(--ease);
}

/* Warme gloed onderaan en een vergrootglas dat verschijnt bij hover of focus */
.album__knop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(43, 33, 31, .38));
    opacity: 0;
    transition: opacity var(--duur) var(--ease);
}

.album__zoom {
    position: absolute;
    z-index: 1;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--accent);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--duur) var(--ease), transform var(--duur) var(--ease);
}

.album__zoom .icoon {
    width: 20px;
    height: 20px;
}

.album__knop:hover img,
.album__knop:focus-visible img {
    transform: scale(1.05);
}

.album__knop:hover::after,
.album__knop:focus-visible::after,
.album__knop:hover .album__zoom,
.album__knop:focus-visible .album__zoom {
    opacity: 1;
    transform: none;
}

.album__knop:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* Op aanraakschermen geen hover: het vergrootglas blijft zacht zichtbaar als hint */
@media (hover: none) {
    .album__zoom {
        opacity: .9;
        transform: none;
        width: 34px;
        height: 34px;
    }
}

@media (min-width: 900px) {
    .album {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 210px;
        gap: 14px;
    }

    .album__item--breed {
        grid-row: span 1;
    }

    .album__item--vol {
        grid-column: 1 / -1;
        grid-row: span 2;
    }
}

/* Lichtbak: volledig scherm, donkere achtergrond */
html.lichtbak-open {
    overflow: hidden;
}

.lichtbak {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(24, 18, 17, .96);
    color: var(--tekst-op-donker);
    overflow: hidden;
}

.lichtbak::backdrop {
    background: rgba(24, 18, 17, .96);
}

.lichtbak[open] {
    animation: lichtbak-in var(--duur) var(--ease);
}

@keyframes lichtbak-in {
    from { opacity: 0; }
}

.lichtbak__spoor {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.lichtbak__spoor::-webkit-scrollbar {
    display: none;
}

.lichtbak__spoor:focus {
    outline: none;
}

.lichtbak__dia {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.lichtbak__dia figure {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    padding: 64px 0;
}

/* Mobiel: de foto neemt de volle breedte van het scherm */
.lichtbak__dia img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

.lichtbak__teller {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    margin: 0;
    font-size: var(--fs-small);
    letter-spacing: .08em;
    color: var(--tekst-op-donker);
}

.lichtbak__sluit,
.lichtbak__pijl {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(239, 228, 225, .35);
    border-radius: 50%;
    background: rgba(24, 18, 17, .45);
    color: var(--wit);
    cursor: pointer;
    transition: background var(--duur) var(--ease), border-color var(--duur) var(--ease), opacity var(--duur) var(--ease);
}

.lichtbak__sluit .icoon,
.lichtbak__pijl .icoon {
    width: 22px;
    height: 22px;
}

.lichtbak__sluit:hover,
.lichtbak__pijl:hover {
    background: var(--rozenhout);
    border-color: var(--rozenhout);
}

.lichtbak__sluit:focus-visible,
.lichtbak__pijl:focus-visible {
    outline: 2px solid var(--wit);
    outline-offset: 3px;
}

.lichtbak__sluit {
    top: 12px;
    right: 12px;
}

.lichtbak__pijl {
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

.lichtbak__pijl--vorige {
    left: 24px;
}

.lichtbak__pijl--volgende {
    right: 24px;
}

.lichtbak__pijl:disabled {
    opacity: .25;
    cursor: default;
    pointer-events: none;
}

/* Desktop: pijlen links en rechts, foto met ruimte rondom */
@media (min-width: 900px) {
    .lichtbak__pijl {
        display: grid;
    }

    .lichtbak__sluit {
        top: 24px;
        right: 24px;
    }

    .lichtbak__dia figure {
        padding: 72px 104px;
    }

    .lichtbak__dia img {
        border-radius: var(--radius-sm);
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lichtbak[open] {
        animation: none;
    }

    .album__knop img {
        transition: none;
    }
}

/* Opleidingen en masterclasses: programma zonder scheidingslijnen tussen de rubrieken;
   enkel de lijn onder de dagtitel blijft */
.template-opleidingdetail .programma__blok li + li {
    border-top: 0;
}

/* Opleidingen en masterclasses: titels in 'Alles op een rij' iets groter (22px → 26–28px) */
.template-opleidingdetail .praktisch__kaart h3 {
    font-size: clamp(1.625rem, 1.5rem + .3vw, 1.75rem);
}

/* Zelfde witruimte onder 'Gegevens' als onder de titels in de rechterkolom (alle pagina's) */
.praktisch__kaart > h3 + .feitenlijst {
    margin-top: var(--space-3);
}

/* Compacte hero met achtergrondfoto voor eenvoudige pagina's (agenda, juridische pagina's) */
@media (min-width: 900px) {
    .bb-herofoto.bb-herofoto--compact {
        min-height: min(52vh, 460px);
    }

    .bb-herofoto--compact .bb-herofoto__tekst {
        padding-block: var(--space-7);
    }
}

/* Tantradag: begeleiders als kaart (foto bovenaan, tekst in een kader) en titels van 26px */
.pagina-retreats .begeleider h3,
.pagina-retreats .praktisch__kaart h3 {
    font-size: 1.625rem;
}

.begeleider .bb-kaart__tekst {
    padding: var(--space-5);
}

/* Sessiepagina's: zelfde witruimte onder 'Duur en prijs' als onder 'Praktische informatie' */
.praktisch__kaart--compact > h3 + .tarieven {
    margin-top: 27px;
}

/* Tantradag: kop boven een opsomming en een afsluitende zin eronder */
.lijst-kop {
    font-size: 1.625rem;
    margin-bottom: var(--space-4);
}

.lijst-slot {
    margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Lees meer — uitklapbare tekst (bv. bio Sylvia op de tantradag).
   Zonder JS staat alles open; JS zet de klasse is-dicht en toont de knop.
   Uitklappen animeert via grid-template-rows (0fr → 1fr).
   -------------------------------------------------------------------------- */
.leesmeer {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--duur) var(--ease), opacity var(--duur) var(--ease), margin var(--duur) var(--ease);
}

.leesmeer.is-dicht {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: -10px; /* geen dubbele flex-gap rond het dichte blok */
}

.leesmeer__binnen {
    min-height: 0;
    overflow: hidden;
}

.leesmeer__binnen > p {
    margin: 0;
}

.leesmeer__binnen > p + p {
    margin-top: 10px; /* zelfde ritme als de flex-gap van de kaarttekst */
}

.leesmeer__knop {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.leesmeer__pijl {
    display: inline-block;
    width: 14px;
    height: 14px;
    transition: transform var(--duur) var(--ease);
}

.leesmeer__knop[aria-expanded="true"] .leesmeer__pijl {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .leesmeer,
    .leesmeer__pijl {
        transition: none;
    }
}

/* Lichtere variant (tantradag): de foto is breder en blijft links zichtbaar, gedempt in plaats van volledig weg.
   Leesbaarheid van de tekst komt van de donkere verloop-laag (::before) die links iets sterker is. */
@media (min-width: 900px) {
    .bb-herofoto--foto-rechts-licht > picture img,
    .bb-herofoto--foto-rechts-licht > img {
        width: 100%;
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .7) 25%, #000 55%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .7) 25%, #000 55%);
    }
}

/* Statement als citaat met naam eronder (bv. slogan van Lesley op de opleidingspagina) */
.statement__citaat {
    margin: 0;
    text-align: center;
}

.statement__citaat blockquote {
    margin: 0;
}

.statement__bron {
    margin-top: var(--space-5);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Verloop in de lichtroze secties: op de Bloom-roze gloed haalt rozenhout bij kleine tekst het leescontrast niet.
   Links en schuine accentzinnen worden daar aarde; labels blijven bewust rozenhout (merkaccent).
   Op witte kaarten binnen die secties blijft alles zoals elders op de site. */
.sectie--zacht .bb-tekstlink,
.sectie--zacht .principe .principe__kort,
.sectie--zacht p a:not(.bb-knop),
.sectie--zacht .bb-sectiekop__rechts a:not(.bb-knop) {
    color: var(--aarde);
}

.sectie--zacht .bb-tekstlink {
    text-decoration-color: currentColor;
}

.sectie--zacht .ingang__nummer {
    color: var(--rozenhout);
}

/* Het golfje onder de titels: rozenhout zodat het op de gloed zichtbaar blijft */
.sectie--zacht .bb-golf {
    color: var(--rozenhout);
}

.sectie--zacht :is(.praktisch__kaart, .programma__blok, .voordelen-groep, .bb-kaart, .eventkaart) :is(.bb-tekstlink, p a:not(.bb-knop)) {
    color: var(--accent);
    text-decoration-color: var(--roze);
}

/* Gevolgde opleidingen (Over mij) op gsm: eerst vier, de rest via 'Toon meer'. JS zet de klasse is-ingeklapt. */
.opleidingen__meer {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.opleidingen__meer[aria-expanded="true"] .leesmeer__pijl {
    transform: rotate(180deg);
}

@media (max-width: 599.98px) {
    .opleidingen.is-ingeklapt .opleidingen__lijst li:nth-child(n + 5) {
        display: none;
    }
}

@media (min-width: 600px) {
    .opleidingen__meer {
        display: none;
    }
}