/**
 * kdBlocks — front-end layout van de blokken.
 *
 * Bewust minimaal: typografie, knoppen en de patronen (.steps, .pullquote, .img-pair,
 * .img-gallery, .report-box, .cta) komen uit de stylesheet van het thema. Hier staat alleen
 * wat kdBlocks zelf nodig heeft: de kolom-layout met inhoudsopgave, de volle-breedte
 * achtergronden en de split-varianten.
 *
 * Verwachte opbouw in de template:
 *   <div class="kd-layout">
 *     [[!kdBlocks? &part=`toc`]]
 *     <div class="kd-blocks">[[kdBlocks]]</div>
 *   </div>
 */

:root {
    /* Hoeveel een blok met "Breder tonen" links en rechts uit de tekstkolom breekt. */
    --kd-breakout: 40px;
    /* Breedte van de inhoudsopgave-kolom en de ruimte ernaast. */
    --kd-toc-width: 240px;
    --kd-layout-gap: 48px;
}

.kd-layout {
    display: grid;
    grid-template-columns: var(--kd-toc-width) minmax(0, 1fr);
    gap: var(--kd-layout-gap);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: start;
}

/* Expliciete kolommen: zonder dit belandt .kd-blocks in de smalle eerste kolom zodra de
   inhoudsopgave ontbreekt (blok zonder quicklabel, of de inline-editor). */
/* --kd-sticky-top: afstand tot de bovenkant bij het meescrollen. Zet die per site op de
   hoogte van een vaste header (bijv. calc(106px + 24px)). */
/* Standaard transparant; met --kd-toc-bg kun je er een achtergrond onder leggen als de
   gekleurde banden er storend doorheen lopen. */
.kd-layout > .kd-toc {
    grid-column: 1;
    position: sticky;
    top: var(--kd-sticky-top, 40px);
    z-index: 2;
    background: var(--kd-toc-bg, transparent);
}

.kd-layout > .kd-blocks {
    grid-column: 2;
}

/* Helemaal geen inhoudsopgave? Dan mag de content de volle breedte hebben. */
.kd-layout:not(:has(> .kd-toc)) {
    grid-template-columns: minmax(0, 1fr);
}

.kd-layout:not(:has(> .kd-toc)) > .kd-blocks {
    grid-column: 1;
    /* Geen smalle tekstkolom meer: de blokken vullen de hele container. */
    --kd-inner-max: none;
}

.kd-blocks {
    min-width: 0;
}

/**
 * De volle-breedte banden worden getekend met een enorme box-shadow. Die loopt dus ook
 * langs de inhoudsopgave-kolom. Zonder eigen stapelniveau verdwijnt die kolom (en een
 * eventueel CTA-kaartje) achter zo'n band.
 */
.kd-toc,
.article-toc {
    /* Geen position hier: het thema zet de kolom op sticky en die mag niet overschreven
       worden. Een sticky element is al gepositioneerd, dus z-index werkt gewoon. */
    z-index: 2;
    /* Altijd ruimte onder de kolom, zodat het CTA-kaartje niet tegen het volgende blok
       (of de footer) plakt. */
    padding-bottom: 40px;
}

/**
 * Eén blok = één sectie. Zonder achtergrond loopt hij mee in de kolom.
 *
 * Elk blok krijgt dezelfde ruimte erboven (--kd-block-gap). De eerste kop of alinea in een
 * blok verliest zijn eigen bovenmarge, zodat de afstand tussen blokken altijd gelijk is en
 * niet afhangt van wat er toevallig bovenin staat.
 */
.kd-block {
    position: relative;
    margin-top: var(--kd-block-gap, 48px);
}

.kd-blocks > .kd-block:first-of-type,
.kd-blocks > .kd-ew:first-of-type .kd-block {
    margin-top: 0;
}

/**
 * Laatste blok sluit af zonder witruimte eronder (bijvoorbeeld een CTA-band tegen de
 * footer). Let op: :last-child werkt hier niet, want de snippet zet na de blokken nog een
 * <script> in de stroom — vandaar :last-of-type op de <section>.
 */
.kd-blocks > .kd-block:last-of-type,
.kd-blocks > .kd-ew:last-of-type .kd-block {
    margin-bottom: 0;
}

/* En dan ook geen ruimte meer onder de kolom zelf. */
.kd-layout:has(.kd-block--cta:last-of-type),
.kd-layout:has(.kd-block--cta:last-of-type) .kd-blocks {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Leesbare tekstkolom naast een inhoudsopgave. Staat die er niet, dan mag de inhoud de
   volle containerbreedte gebruiken (zie --kd-inner-max hieronder). */
.kd-block__inner {
    max-width: var(--kd-inner-max, 720px);
}

.kd-block__inner > :first-child,
.kd-block__inner > .article > :first-child {
    margin-top: 0;
}

/**
 * Met achtergrond loopt de kleur door tot de schermranden, terwijl de inhoud in de kolom
 * blijft staan. Dat gebeurt met een enorme box-shadow in dezelfde kleur (--kd-band, gezet
 * in config/bgcss.php), horizontaal afgeknipt met clip-path. Geen negatieve marges dus —
 * die rekenen in een grid-kolom met de verkeerde breedte en schuiven het blok scheef.
 */
.kd-block[class*="kd-bg--"] {
    box-shadow: 0 0 0 100vmax var(--kd-band, transparent);
    clip-path: inset(0 -100vmax);
    /* Ruimte binnen de band; bij een witte achtergrond zet config/bgcss.php dit op 0. */
    padding-block: var(--kd-band-padding, 56px);
    margin-bottom: var(--kd-block-gap, 48px);
}

/**
 * Breder dan de tekstkolom: blokken met de optie "Breder tonen" (kd-block--breakout)
 * breken links en rechts --kd-breakout uit. Pas vanaf 1200px, anders zou de uitloop buiten
 * het venster vallen en door de clip op body worden afgesneden.
 */
@media (min-width: 1200px) {
    .kd-block--breakout .kd-block__inner {
        max-width: calc(720px + 2 * var(--kd-breakout, 40px));
        margin-inline: calc(-1 * var(--kd-breakout, 40px));
    }

    /* Zonder inhoudsopgave is er niets om uit te breken: de kolom is al zo breed als de
       container. Anders zou "Breder tonen" de inhoud juist smaller maken. */
    .kd-layout:not(:has(> .kd-toc)) .kd-block--breakout .kd-block__inner {
        max-width: none;
        margin-inline: 0;
    }
}

/**
 * De CTA is altijd een band over de volle breedte, ook zonder gekozen achtergrondkleur.
 * De kleur komt uit --kd-band (gekozen achtergrond) of anders uit de themakleur van .cta.
 */
.kd-block--cta {
    box-shadow: 0 0 0 100vmax var(--kd-band, var(--ink, transparent));
    clip-path: inset(0 -100vmax);
}

/* De CTA-band gebruikt de hele container en schuift daarvoor links langs de kolom met de
   inhoudsopgave heen. De brede blokken (profiel, opleidingen, kop+tekst) doen dat bewust
   níét: die blijven naast de kolom staan, zoals op een pagina met inhoudsopgave hoort. */
@media (min-width: 900px) {
    .kd-layout:has(> .kd-toc) .kd-block--cta {
        margin-left: calc(-1 * (var(--kd-toc-width) + var(--kd-layout-gap)));
    }
}

.kd-block--cta .container,
.kd-block--wide .container {
    padding-inline: 0;
}

/**
 * De .section-padding van het thema (96/104px) is bedoeld voor één sectie per pagina. Bij
 * losse blokken stapelt die op met de blokafstand; ruimte komt hier van --kd-block-gap en
 * van de patronen zelf.
 */
.kd-block.section {
    /* Geen achtergrond → geen binnenruimte; met een gekleurde band levert bgcss.php 56px
       (en bij wit 0), zodat de tekst niet tegen de rand van de band plakt. */
    padding-block: var(--kd-band-padding, 0px);
}

/**
 * Elke rij is een eigen blok en dus altijd :first-child én :last-child in zijn container;
 * daardoor vielen de scheidingslijn en de binnenruimte uit het thema weg. Hier terug,
 * met een lijn zolang er nog een rij volgt.
 */
/* Zonder band brengt de rij zijn eigen ruimte mee; mét band moet de kleur niet tegen het
   vorige blok plakken, dus dan geldt de gewone blokafstand. */
.kd-block--about-row:not([class*="kd-bg--"]) {
    margin-top: 0;
}

.kd-block--about-row .about-row {
    padding: 40px 0;
}

/* Eerste blok op de pagina: geen ruimte boven de eerste rij (zoals .about-row:first-child). */
.kd-blocks > .kd-block:first-of-type .about-row,
.kd-blocks > .kd-ew:first-of-type .kd-block .about-row {
    padding-top: 0;
}

.kd-block--about-row:has(+ .kd-block--about-row) .about-row,
.kd-ew:has(.kd-block--about-row) + .kd-ew:has(.kd-block--about-row) .about-row {
    border-bottom: 1px solid rgba(10, 60, 66, 0.10);
}

@media (min-width: 960px) {
    .kd-block--about-row .about-row {
        padding: 64px 0;
    }
}

/* Logo of afbeelding in een kop+tekst-rij blijft bescheiden van formaat. */
.about-row .about-logo {
    display: block;
    margin-top: 20px;
    max-width: 200px;
    height: auto;
}

/* Brede blokken (die van het thema .section meekrijgen) regelen hun ruimte via de
   patronen zelf; alleen blokken zónder .section krijgen de band-padding. */

/* Twee kolommen: tekst+afbeelding, afbeelding+tekst, tekst+tekst. */
.kd-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.kd-split__media img {
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 900px) {
    .kd-split {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
    }
    .kd-split--reverse .kd-split__media {
        order: -1;
    }
}

/**
 * Afbeeldingenblok — het raster volgt het aantal afbeeldingen:
 *   1 = volle contentbreedte, 2 = naast elkaar, 3 of meer = raster van drie.
 * Met het veld "Weergave" kun je dat per blok overrulen (kd-images--pair / --gallery).
 */
.kd-images {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.kd-images img {
    width: 100%;
    height: auto;
    display: block;
}

/* 1 afbeelding: volle breedte van de kolom. */
.kd-images > * {
    grid-column: span 6;
}

/* 2 afbeeldingen: naast elkaar, elk op halve breedte. */
.kd-images:has(> :nth-child(2)) > * {
    grid-column: span 3;
}

/* 3 of meer: de eerste twee blijven groot, de rest volgt in rijen van drie. */
.kd-images:has(> :nth-child(3)) > :nth-child(n + 3) {
    grid-column: span 2;
}

/* Vanaf twee afbeeldingen even hoge vlakken, anders wordt het raster rommelig. */
.kd-images:has(> :nth-child(2)) img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Handmatige override via het veld "Weergave". */
.kd-images--pair > *,
.kd-images--pair:has(> :nth-child(3)) > :nth-child(n + 3) { grid-column: span 3; }
.kd-images--gallery > *,
.kd-images--gallery:has(> :nth-child(3)) > :nth-child(n + 3) { grid-column: span 2; }

@media (max-width: 599px) {
    .kd-images > *,
    .kd-images:has(> :nth-child(2)) > *,
    .kd-images:has(> :nth-child(3)) > :nth-child(n + 3),
    .kd-images--pair > *,
    .kd-images--gallery > * {
        grid-column: span 6;
    }
}

/* Knoppen */
.kd-actions {
    display: flex;
    margin: 8px 0 32px;
}

.kd-actions > a {
    display: inline-flex;
}

.kd-actions--center { justify-content: center; }
.kd-actions--right  { justify-content: flex-end; }

/* Kleine tekstelementen */
.kd-eyebrow {
    margin: 0 0 12px;
    font-size: 11px;
    letter-spacing: 0.24em;
    font-weight: 500;
    color: var(--kd-accent, currentColor);
}

.kd-align--center { text-align: center; }
.kd-align--right  { text-align: right; }

.kd-rte > *:last-child { margin-bottom: 0; }

/**
 * Lijsten in rich-text velden: streepje in de accentkleur in plaats van een bullet, met
 * lucht tussen de regels. Het thema doet dit binnen .article; hier geldt het voor elk blok.
 */
.kd-rte ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kd-rte ul li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    line-height: 1.6;
}

.kd-rte ul li::before {
    content: "—";
    color: var(--kd-accent, var(--accent, currentColor));
    flex: none;
}

.kd-rte ol {
    margin: 0 0 16px;
    padding-left: 1.25em;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kd-rte ol li::marker {
    color: var(--kd-accent, var(--accent, currentColor));
}

/* De afstand tot het vorige blok komt van --kd-block-gap; de eigen marges van .pullquote
   zouden daar bovenop komen. */
.kd-block--pullquote .pullquote {
    margin-block: 0;
}

.pullquote__source {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    letter-spacing: 0.08em;
    font-style: normal;
    opacity: 0.75;
}

/* Slider — Splide levert alleen de mechaniek; de opmaak van de slides staat hier. */
.kd-slider {
    margin-bottom: 32px;
}

/* Themastijlen voor lijsten binnen de tekstkolom (.article ul) mogen de Splide-onderdelen
   niet raken: die zetten de lijst op kolom met gaps en plakken een streepje voor elk item.
   Geldt zowel voor de track als voor de paginatie — beide zijn een <ul> met <li>. */
.kd-slider .splide__list,
.kd-slider .splide__pagination {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kd-slider .splide__pagination {
    justify-content: center;
    gap: 8px;
}

.kd-slider .splide__pagination li::before,
.kd-slider .splide__pagination li::marker {
    content: none;
    display: none;
}

.kd-slider .splide__slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.kd-slider .splide__slide::before,
.kd-slider .splide__slide::marker {
    content: none;
    display: none;
}

.kd-slider__img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.kd-slider__caption {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.8;
}

/* Pijlen en bolletjes in de sitekleuren in plaats van het Splide-blauw. */
.kd-slider .splide__arrow {
    background: var(--kd-accent, #96C23D);
    opacity: 1;
}

.kd-slider .splide__arrow svg {
    fill: #fff;
}

.kd-slider .splide__pagination__page.is-active {
    background: var(--kd-accent, #96C23D);
}

/* Inhoudsopgave — basis; het thema mag dit overschrijven (.article-toc). */
.kd-toc h4 {
    margin: 0 0 16px;
    font-size: 11px;
    letter-spacing: 0.24em;
    font-weight: 500;
}

.kd-toc nav {
    display: flex;
    flex-direction: column;
}

@media (max-width: 899px) {
    .kd-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* Zonder deze reset houden de kolomtoewijzingen hierboven een tweede kolom in stand. */
    .kd-layout > .kd-toc,
    .kd-layout > .kd-blocks {
        grid-column: 1;
    }

    /* De inhoudsopgave staat boven de blokken, scrollt gewoon mee en houdt de items
       onder elkaar — net als op desktop. */
    .kd-layout > .kd-toc {
        position: static;
        margin-top: 24px;
        padding: 0;
    }

    .kd-layout > .kd-toc nav {
        flex-direction: column;
    }
}

/* Geen graad ingevuld? Dan een streepje in de accentkleur in plaats van een lege kolom. */
.edu-list .degree--line::before,
.edu-list .degree:empty::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 14px;
    background: var(--kd-accent, var(--accent, currentColor));
}

/**
 * Kaartenblok — aantal per rij komt uit het veld "Kaarten naast elkaar" (kd-cards--1..4).
 * De kaartopmaak zelf komt uit het thema (.blog-card).
 */
.kd-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    /* Lucht tussen de inleiding en de rij kaarten; zonder titel/tekst staat de rij
       bovenaan, want dan is dit het eerste element in het blok. */
    margin: 40px 0 32px;
}

.kd-cards:first-child {
    margin-top: 0;
}

.kd-cards .kd-card img.thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    margin-bottom: 16px;
}

.kd-cards .kd-card h3 {
    margin: 0 0 10px;
}

/* Extra links per kaart: elk als "Lees verder"-link (read-more-stijl van de site),
   gestapeld onder elkaar. */
.kd-card__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 10px;
}

.kd-card__links .read-more-link {
    font-size: 1.0625rem;
    text-decoration: none;
    margin-top: 0;
}

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

@media (min-width: 1000px) {
    .kd-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kd-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}