/*
 * Domyn Stack - Klant Specifieke Block Styling
 * De AI zal hier de custom CSS genereren op basis van de .cursorrules
 * en het aangeleverde design.
 */

/* ============================================================
   Block: CTA — Klantspecifieke override
   ============================================================ */
.dmn-cta {
    background: #2b6b6e;
    padding: clamp(16px, 3vw, 24px) 0;
}

.dmn-cta-inner {
    gap: clamp(16px, 3vw, 32px);
}

.dmn-cta-content {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
}

.dmn-cta-content::before {
    content: "!";
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.dmn-cta-title {
    font-size: clamp(16px, 1.4vw, 20px);
    margin: 0 0 2px;
}

.dmn-cta-subtitle {
    font-size: clamp(13px, 1.1vw, 15px);
    opacity: 0.85;
}

.dmn-cta .dmn-button-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    padding: clamp(10px, 1.2vw, 14px) clamp(20px, 2vw, 28px);
    font-size: clamp(14px, 1.2vw, 16px);
    white-space: nowrap;
}

.dmn-cta .dmn-button-white::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.dmn-cta .dmn-button-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    transform: none;
}

@media (max-width: 767px) {
    .dmn-cta-content {
        flex-direction: column;
        text-align: center;
    }

    .dmn-cta-content::before {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}

/* ============================================================
   Block: Content Combo (DGO)  —  .dmn-content-combo
   Mobile-first, gescoped onder de hoofd-class. Gebruikt de globale
   Domyn-kleurvariabelen (--dmn-primary / --dmn-secondary / --dmn-tertiary).
   ============================================================ */
.dmn-content-combo {
    position: relative;
    overflow: hidden; /* houdt decoratieve vormen binnen het blok */
    padding: clamp(2.5rem, 6vw, 5rem) 0;
    /* Grote afronding voor de buitenhoek van de afbeelding; de vorm krijgt
       deze straal + de overhang, zodat de bochten concentrisch lopen. */
    --dmn-cc-shape-radius: clamp(40px, 8vw, 110px);
    /* Hoeveel de vorm achter de afbeelding uitsteekt (px, gelijk in x én y
       zodat de hoeken netjes concentrisch kunnen aansluiten). */
    --dmn-cc-overhang: clamp(16px, 3vw, 40px);
}

/* --- Achtergrondkleur (full-width) --- */
.dmn-content-combo.bg-primary   { background-color: var(--dmn-primary, #793185); }
.dmn-content-combo.bg-secondary { background-color: var(--dmn-secondary, #935bb3); }
.dmn-content-combo.bg-tertiary  { background-color: var(--dmn-tertiary, #6b6b72); }

/* Gekleurd blok krijgt dezelfde afronding als de afbeeldingen */
.dmn-content-combo.bg-primary,
.dmn-content-combo.bg-secondary,
.dmn-content-combo.bg-tertiary {
    border-radius: var(--dmn-image-radius, 12px);
}

/* Tekst wit op alle gekleurde achtergronden */
.dmn-content-combo.bg-primary,
.dmn-content-combo.bg-secondary,
.dmn-content-combo.bg-tertiary,
.dmn-content-combo.bg-primary .dmn-cc-title,
.dmn-content-combo.bg-secondary .dmn-cc-title,
.dmn-content-combo.bg-tertiary .dmn-cc-title,
.dmn-content-combo.bg-primary .dmn-cc-text,
.dmn-content-combo.bg-secondary .dmn-cc-text,
.dmn-content-combo.bg-tertiary .dmn-cc-text {
    color: #fff;
}

/* Button-kleuromkering per achtergrond.
   - Primair = doorgaans dezelfde kleur als de knop, dus knop wordt wit met
     primaire tekst (contrast).
   - Secundair (≈ lichtere primair) en tertiair (grijstint) houden juist de
     sterke primaire knopkleur aan zodat de knop opvalt. */
.dmn-content-combo.bg-primary .dmn-button {
    background: #fff;
    color: var(--dmn-primary, #793185);
}
.dmn-content-combo.bg-primary .dmn-button:hover {
    background: rgba(255, 255, 255, 0.85);
    color: var(--dmn-primary, #793185);
}
.dmn-content-combo.bg-secondary .dmn-button,
.dmn-content-combo.bg-tertiary .dmn-button {
    background: var(--dmn-button, var(--dmn-primary, #793185));
    color: var(--dmn-button-text, #fff);
}
.dmn-content-combo.bg-secondary .dmn-button:hover,
.dmn-content-combo.bg-tertiary .dmn-button:hover {
    background: var(--dmn-hover, #fff);
    color: var(--dmn-button-hover-text, var(--dmn-primary, #793185));
}

/* --- Container --- */
.dmn-cc-container {
    position: relative;
    z-index: 2; /* boven de decoratieve vormen */
    box-sizing: border-box;
    width: min(100%, var(--dmn-site-width, 1280px));
    /* Zonder deze padding raakt de inhoud beide schermranden zolang het venster
       smaller is dan --dmn-site-width (voor DGO 1400px): min() is dan gelijk aan
       de vensterbreedte, dus margin-inline:auto heeft niets te centreren. */
    padding-inline: var(--dgo-gutter, clamp(20px, 4vw, 48px));
    margin-inline: auto;
    display: grid;
    gap: clamp(2rem, 9vw, 9rem);
    align-items: start; /* kolommen bovenaan; niet rekken/centreren bij uitklappen */
}

/* --- Tekstkolom --- */
.dmn-cc-title {
    margin: 0 0 1.75rem;
    font-size: clamp(1.6rem, 1rem + 2vw, 2rem);
    line-height: 1.15;
}
.dmn-cc-text {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.65;
}
.dmn-cc-text > :first-child { margin-top: 0; }
.dmn-cc-text > :last-child  { margin-bottom: 0; }

/* Intro boven bullets/accordion/tabs */
.dmn-cc-intro {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.65;
    margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}
.dmn-cc-intro > :first-child { margin-top: 0; }
.dmn-cc-intro > :last-child  { margin-bottom: 0; }

/* CTA: één of twee knoppen naast elkaar */
.dmn-cc-cta {
    margin-top: clamp(1.25rem, 3vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Tweede knop: outline-variant */
.dmn-cc-cta .dmn-button-outline {
    background: transparent;
    color: var(--dmn-primary, #793185);
    border: 2px solid var(--dmn-primary, #793185);
}
.dmn-cc-cta .dmn-button-outline:hover {
    background: var(--dmn-primary, #793185);
    color: #fff;
}
/* Outline op gekleurde achtergrond: wit */
.dmn-content-combo.bg-primary .dmn-cc-cta .dmn-button-outline,
.dmn-content-combo.bg-secondary .dmn-cc-cta .dmn-button-outline,
.dmn-content-combo.bg-tertiary .dmn-cc-cta .dmn-button-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}
.dmn-content-combo.bg-primary .dmn-cc-cta .dmn-button-outline:hover,
.dmn-content-combo.bg-secondary .dmn-cc-cta .dmn-button-outline:hover,
.dmn-content-combo.bg-tertiary .dmn-cc-cta .dmn-button-outline:hover {
    background: #fff;
    color: var(--dmn-primary, #793185);
    border-color: #fff;
}

/* --- Tekstuitlijning --- */
.dmn-content-combo.text-left   .dmn-cc-content { text-align: left; }
.dmn-content-combo.text-center .dmn-cc-content { text-align: center; }
.dmn-content-combo.text-right  .dmn-cc-content { text-align: right; }
.dmn-content-combo.text-center .dmn-cc-cta { display: flex; justify-content: center; }
.dmn-content-combo.text-right  .dmn-cc-cta { display: flex; justify-content: flex-end; }

/* --- Media --- */
.dmn-cc-media {
    position: relative; /* anker voor de achtergrond-vorm */
}
.dmn-cc-media-image,
.dmn-cc-media-video {
    position: relative;
    z-index: 1; /* afbeelding/video boven de achtergrond-vorm */
}
.dmn-cc-media-image img,
.dmn-cc-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--dmn-image-radius, 12px);
}
.dmn-cc-media-video {
    border-radius: var(--dmn-image-radius, 12px);
    overflow: hidden;
}
.dmn-cc-media-video iframe,
.dmn-cc-media-video .youtube-lazy-load {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 12px;
}

/* --- Decoratief: achtergrond-vorm ---------------------------------------- */
/* Paars vierkant achter de afbeelding (z-index 0, afbeelding z-index 1).
   Steekt boven/onder en aan de buitenzijde uit. De buitenhoek krijgt een
   grote afronding; de overige hoeken volgen de img-rand (--dmn-image-radius).
   Dezelfde grote afronding wordt ook op de bijpassende hoek van de afbeelding
   gezet, zodat vorm en afbeelding naadloos aansluiten. */
.dmn-cc-bg-shape {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 78%;
    aspect-ratio: 2 / 1;
    background: var(--dmn-secondary, #935bb3);
    border-radius: var(--dmn-image-radius, 12px); /* basis = img-rand */
}

/* Op een secundaire achtergrond zou de vorm wegvallen => primaire kleur */
.dmn-content-combo.bg-secondary .dmn-cc-bg-shape {
    background: var(--dmn-primary, #793185);
}

/* Vorm blijft binnen de mediakolom (geen overflow). De afbeelding wordt met
   de overhang naar binnen getrokken, zodat de vorm aan de buitenhoek vandaan
   piept i.p.v. dat de vorm naar buiten steekt. Overhang is gelijk in x én y,
   dus de hoeken sluiten concentrisch aan (zie radius-regels hieronder). */
.dmn-cc-media.pos-above .dmn-cc-bg-shape { top: 0; }
.dmn-cc-media.pos-below .dmn-cc-bg-shape { bottom: 0; }
.dmn-cc-media.side-left  .dmn-cc-bg-shape { left: 0; }
.dmn-cc-media.side-right .dmn-cc-bg-shape { right: 0; }

/* Afbeelding/video naar binnen trekken aan de hoek-zijden (= de overhang) */
.dmn-cc-media.pos-above .dmn-cc-media-image,
.dmn-cc-media.pos-above .dmn-cc-media-video  { margin-top: var(--dmn-cc-overhang); }
.dmn-cc-media.pos-below .dmn-cc-media-image,
.dmn-cc-media.pos-below .dmn-cc-media-video  { margin-bottom: var(--dmn-cc-overhang); }
.dmn-cc-media.side-left  .dmn-cc-media-image,
.dmn-cc-media.side-left  .dmn-cc-media-video { margin-left: var(--dmn-cc-overhang); }
.dmn-cc-media.side-right .dmn-cc-media-image,
.dmn-cc-media.side-right .dmn-cc-media-video { margin-right: var(--dmn-cc-overhang); }

/* Buitenhoek afbeelding/video = straal R */
.dmn-cc-media.side-left.pos-above  .dmn-cc-media-image img,
.dmn-cc-media.side-left.pos-above  .dmn-cc-media-video  { border-top-left-radius: var(--dmn-cc-shape-radius); }
.dmn-cc-media.side-left.pos-below  .dmn-cc-media-image img,
.dmn-cc-media.side-left.pos-below  .dmn-cc-media-video  { border-bottom-left-radius: var(--dmn-cc-shape-radius); }
.dmn-cc-media.side-right.pos-above .dmn-cc-media-image img,
.dmn-cc-media.side-right.pos-above .dmn-cc-media-video  { border-top-right-radius: var(--dmn-cc-shape-radius); }
.dmn-cc-media.side-right.pos-below .dmn-cc-media-image img,
.dmn-cc-media.side-right.pos-below .dmn-cc-media-video  { border-bottom-right-radius: var(--dmn-cc-shape-radius); }

/* Zelfde hoek op de vorm = R + overhang => bochten lopen concentrisch */
.dmn-cc-media.side-left.pos-above  .dmn-cc-bg-shape { border-top-left-radius:     calc(var(--dmn-cc-shape-radius) + var(--dmn-cc-overhang)); }
.dmn-cc-media.side-left.pos-below  .dmn-cc-bg-shape { border-bottom-left-radius:  calc(var(--dmn-cc-shape-radius) + var(--dmn-cc-overhang)); }
.dmn-cc-media.side-right.pos-above .dmn-cc-bg-shape { border-top-right-radius:    calc(var(--dmn-cc-shape-radius) + var(--dmn-cc-overhang)); }
.dmn-cc-media.side-right.pos-below .dmn-cc-bg-shape { border-bottom-right-radius: calc(var(--dmn-cc-shape-radius) + var(--dmn-cc-overhang)); }

/* --- Tablet / Desktop: 2-koloms layouts --- */
@media (min-width: 768px) {
    .dmn-content-combo.layout-text-left .dmn-cc-container,
    .dmn-content-combo.layout-text-right .dmn-cc-container {
        grid-template-columns: 1fr 1fr;
    }

    /* Tekst links + media rechts (DOM-volgorde: tekst, media) */
    .dmn-content-combo.layout-text-left .dmn-cc-content { order: 1; }
    .dmn-content-combo.layout-text-left .dmn-cc-media   { order: 2; }

    /* Tekst rechts + media links */
    .dmn-content-combo.layout-text-right .dmn-cc-content { order: 2; }
    .dmn-content-combo.layout-text-right .dmn-cc-media   { order: 1; }
}

/* ============================================================
   Inhoudstypes binnen Content Combo  —  bullets / accordion / tabs
   Leven in .dmn-cc-content; erven kleur/uitlijning van het blok.
   ============================================================ */

/* --- Bullets --- */
.dmn-ci-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(0.5rem, 2vw, 0.5rem);
}
.dmn-ci-bullet {
    position: relative;
    padding-left: 2rem;
    text-align: left; /* opsomming altijd links uitlijnen */
}
.dmn-ci-bullet::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    /* checkmark als masker */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 70% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 70% no-repeat;
    background-color: var(--dmn-secondary, #935bb3);
}
.dmn-content-combo.bg-secondary .dmn-ci-bullet::before { background-color: var(--dmn-primary, #793185); }
.dmn-content-combo.bg-primary .dmn-ci-bullet::before,
.dmn-content-combo.bg-tertiary .dmn-ci-bullet::before { background-color: #fff; }
.dmn-ci-bullet-title { font-weight: 400; }
.dmn-ci-bullet-text { margin-top: 0.15rem; }

/* Bullets 2-koloms alleen in 1-koloms layout (niet naast media) */
@media (min-width: 768px) {
    .dmn-content-combo.layout-single .dmn-ci-bullets {
        grid-template-columns: 1fr;
        gap: clamp(0.5rem, 2.5vw, 0.5rem) clamp(2rem, 4vw, 1.5rem);
    }
}

/* --- Accordion (native details) --- */
.dmn-ci-accordion { display: grid; gap: 0.75rem; text-align: left; }
.dmn-ci-acc-item {
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: var(--dmn-image-radius, 12px);
    overflow: hidden;
    background: color-mix(in srgb, currentColor 4%, transparent);
}
.dmn-ci-acc-header {
    cursor: pointer;
    list-style: none;
    padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.dmn-ci-acc-header::-webkit-details-marker { display: none; }
.dmn-ci-acc-header::after {
    content: "+";
    font-weight: 400;
    font-size: 1.5em;
    line-height: 1;
    color: var(--dmn-primary, #793185);
    transition: transform 0.2s ease;
}
.dmn-content-combo.bg-primary .dmn-ci-acc-header::after,
.dmn-content-combo.bg-secondary .dmn-ci-acc-header::after,
.dmn-content-combo.bg-tertiary .dmn-ci-acc-header::after { color: #fff; }
.dmn-ci-acc-item[open] .dmn-ci-acc-header::after { content: "−"; }
.dmn-ci-acc-panel { padding: 0 clamp(1rem, 2.5vw, 1.5rem) clamp(0.85rem, 2vw, 1.15rem); }

/* --- Tabs (button-uitstraling) --- */
.dmn-ci-tabs { text-align: left; }
.dmn-ci-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.dmn-ci-tab {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-weight: var(--dmn-font-weight-bold, 700);
    padding: var(--dmn-button-padding, 12px 24px);
    border-radius: var(--dmn-button-radius, 6px);
    border: 2px solid var(--dmn-primary, #793185);
    background: transparent;
    color: var(--dmn-primary, #793185);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dmn-ci-tab:hover {
    background: color-mix(in srgb, var(--dmn-primary, #793185) 12%, transparent);
}
.dmn-ci-tab[aria-selected="true"] {
    background: var(--dmn-button, var(--dmn-primary, #793185));
    border-color: var(--dmn-button, var(--dmn-primary, #793185));
    color: var(--dmn-button-text, #fff);
}

/* Op gekleurde achtergrond: witte outline, actief = wit gevuld */
.dmn-content-combo.bg-primary .dmn-ci-tab,
.dmn-content-combo.bg-secondary .dmn-ci-tab,
.dmn-content-combo.bg-tertiary .dmn-ci-tab {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}
.dmn-content-combo.bg-primary .dmn-ci-tab:hover,
.dmn-content-combo.bg-secondary .dmn-ci-tab:hover,
.dmn-content-combo.bg-tertiary .dmn-ci-tab:hover {
    background: rgba(255, 255, 255, 0.15);
}
.dmn-content-combo.bg-primary .dmn-ci-tab[aria-selected="true"],
.dmn-content-combo.bg-secondary .dmn-ci-tab[aria-selected="true"],
.dmn-content-combo.bg-tertiary .dmn-ci-tab[aria-selected="true"] {
    background: #fff;
    border-color: #fff;
    color: var(--dmn-primary, #793185);
}
.dmn-ci-tabpanel[hidden] { display: none; }

/* ============================================================
   Block: Card Overview — zij-gutter (DGO)
   ============================================================ */
/* Stond hier op `padding: 0 !important` met een gutter alleen onder 768px.
   Omdat --dmn-site-width voor DGO op 1400px staat, raakten de kaarten daardoor
   tussen 769 en 1400px beide schermranden. Nu één gutter voor alle breedtes;
   zie --dgo-gutter in style.css. */
.card-overview-inner {
    box-sizing: border-box;
    padding: 0 var(--dgo-gutter, clamp(20px, 4vw, 48px)) !important;
}

/* Bestuur-kaarten.
   Voeg op het Card Overzicht-blok de extra CSS-class 'bestuur-cards' toe
   (Blok → Geavanceerd → Extra CSS-class). Zo blijft het gescoped.

   De excerpt bevat sinds 10-09-2026 twee dingen, gescheiden door een regeleinde:
   de functie op regel 1 en daaronder het persoonlijke verhaal (inc/bestuur.php).
   Daarom staat de naam nu weer bovenaan: met alleen een functie erbij kon die
   eronder, maar met een verhaal erachter leest naam, functie, verhaal beter.
   Wil je terug naar functie-boven-naam, dan is dit het blok om aan te passen. */
/* Geen `order` meer. De stack zet .card-item en .card-content zelf al op flex
   met `flex: 1`, en de DOM-volgorde is precies wat we willen: naam, functie,
   verhaal, knop. Met een order op titel en excerpt maar niet op .card-button
   zou die knop naar boven springen. */
.bestuur-cards .card-content .card-title   { margin: 0 0 2px; }
.bestuur-cards .card-content .card-excerpt { margin: 0 0 14px; }

/* Knop onderaan uitlijnen. Nu de verhalen in lengte verschillen, staan de
   Contact-links anders op elke kaart; dit trekt ze weer gelijk. */
.bestuur-cards .card-content .card-button { margin-top: auto; }

/* Functie en verhaal zijn twee losse spans, gezet door de render_block-filter
   in inc/bestuur.php. Via de excerpt kon het niet: Card Overzicht haalt daar
   `wp_trim_words()` overheen, en dat plakt alle witruimte plat en kapt de tekst
   af op woorden. Vandaar dat de opmaak hier op de spans zit en niet op regels. */
.bestuur-cards .card-content .card-excerpt {
    display: block;          /* de -webkit-box van de stack uitzetten, anders   */
    overflow: visible;       /* klemt de line-clamp de twee spans samen         */
    -webkit-line-clamp: none;
    line-clamp: none;
}

.bestuur-cards .bestuur-functie {
    display: block;
    font-weight: 700;
    color: var(--dmn-primary, #793185);
    margin-bottom: 6px;
}

/* Het verhaal wél afkappen, zodat de kaarten gelijk hoog blijven. Zeven regels
   is ongeveer 45 woorden. Dit is het getal om aan te draaien als DGO langere of
   kortere stukjes aanlevert. */
.bestuur-cards .bestuur-verhaal {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bestuur-cards .card-content .card-button  { order: 3; }