/**
 * MD-act — Sleepbare dienstblokken
 * Geenqueued vanuit functions.php (frontend + Elementor-preview).
 * Hoort bij shortcode [mdact_dienstblokken].
 *
 * Bevat alleen het gedeelde chroom: de gekleurde banden, de contentbreedte
 * en de gedeelde blok-koppen (eyebrow/titel/intro/outro). De kern van elk
 * bloktype (fasen, tabellen, wel-niet, pills) leunt op de bestaande
 * blok-CSS (mdact-fasen.css, mdact-vergelijking.css, ...).
 *
 * Kleuren (MD-act design system):
 *   creme       = #F5EFE6   (1e zichtbare band)
 *   wit         = #FFFFFF
 *   groen       = #4A7C6B   (eyebrow)
 *   donkergroen = #2C4A3E   (bullets, quote-band)
 *   goud        = #E8C89A   (accent: sterren, naam bij de quote)
 *   titel       = #1E1E1A
 *   body-tekst  = #54595F
 */

:root {
    --mdact-creme: #F5EFE6;
    --mdact-wit: #FFFFFF;
    --mdact-groen: #4A7C6B;
    --mdact-donkergroen: #2C4A3E;
    --mdact-goud: #E8C89A;
    --mdact-titel: #1E1E1A;
    --mdact-body: #54595F;
    --mdact-blok-max: 1040px;   /* 1000px content + 2x20px padding = zelfde kolom als de oude containers */
    --mdact-blok-py: 80px;      /* verticale padding per band (zoals de oude containers) */
    --mdact-blok-px: 20px;      /* horizontale padding */
}

/* --- De band ---
   Elk blok vult de volle breedte van zijn parent en sluit naadloos aan op
   het vorige blok (de kleurwissel is de scheiding, dus geen marges). Zet de
   Elementor-container waar [mdact_dienstblokken] in staat op volle breedte
   zonder padding, dan lopen de banden van rand tot rand. */
.mdact-blok {
    width: 100%;
    margin: 0;
    padding: 0;
}

.mdact-blok.is-creme { background-color: var(--mdact-creme); }
.mdact-blok.is-wit   { background-color: var(--mdact-wit); }

/* --- Inner: contentbreedte + verticale ademruimte --- */
.mdact-blok__inner {
    max-width: var(--mdact-blok-max);
    margin: 0 auto;
    padding: var(--mdact-blok-py) var(--mdact-blok-px);
    box-sizing: border-box;   /* content wordt exact 1000px (1040 - 2x20 padding) */
    font-family: 'Inter', sans-serif;
    color: var(--mdact-body);
}

/* --- Gedeelde blok-koppen --- */
.mdact-blok__eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mdact-groen);
}

.mdact-blok__titel {
    margin: 0 0 16px 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mdact-titel);
}

.mdact-blok__intro {
    margin-bottom: 24px;
    color: var(--mdact-body);
    line-height: 1.6;
}

.mdact-blok__outro {
    margin-top: 24px;
    color: var(--mdact-body);
    line-height: 1.6;
}

.mdact-blok__intro > *:last-child,
.mdact-blok__outro > *:last-child {
    margin-bottom: 0;
}

/* --- Tekstblok --- */
.mdact-tekstblok__inhoud {
    color: var(--mdact-body);
    line-height: 1.6;
}

.mdact-tekstblok__inhoud > *:last-child {
    margin-bottom: 0;
}

/* Pills volgen op de tekst binnen een tekstblok */
.mdact-tekstblok .mdact-linkpills {
    margin-top: 24px;
}

/* --- Opsomming in de wysiwyg-velden van de nieuwe blokken ---
   Zelfde groene bullets als in mdact-blocks.css, maar nu gescoped op de
   nieuwe render-containers (die niet in .elementor-widget-text-editor zitten). */
.mdact-tekstblok__inhoud ul,
.mdact-blok__intro ul,
.mdact-blok__outro ul,
.mdact-welniet__doorverwijzing ul {
    list-style: none;
    margin: 20px 0 20px 0;
    padding-left: 0;
}

.mdact-tekstblok__inhoud ul li,
.mdact-blok__intro ul li,
.mdact-blok__outro ul li,
.mdact-welniet__doorverwijzing ul li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 14px;
}

.mdact-tekstblok__inhoud ul li:last-child,
.mdact-blok__intro ul li:last-child,
.mdact-blok__outro ul li:last-child,
.mdact-welniet__doorverwijzing ul li:last-child {
    margin-bottom: 0;
}

.mdact-tekstblok__inhoud ul li::before,
.mdact-blok__intro ul li::before,
.mdact-blok__outro ul li::before,
.mdact-welniet__doorverwijzing ul li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    top: -0.1em;
    color: var(--mdact-donkergroen);
    font-size: 1.5em;
    line-height: 1;
}

/* Genummerde opsomming: zelfde ruimte als de bullets, nummers blijven staan. */
.mdact-tekstblok__inhoud ol,
.mdact-blok__intro ol,
.mdact-blok__outro ol,
.mdact-welniet__doorverwijzing ol {
    margin: 20px 0 20px 0;
    padding-left: 1.6em;
}

/* Lijst direct onder de titel (Bronnen): geen extra ruimte erboven. */
.mdact-tekstblok__inhoud > ol:first-child {
    margin-top: 0;
}

.mdact-tekstblok__inhoud ol li,
.mdact-blok__intro ol li,
.mdact-blok__outro ol li,
.mdact-welniet__doorverwijzing ol li {
    margin-bottom: 14px;
}

.mdact-tekstblok__inhoud ol li:last-child,
.mdact-blok__intro ol li:last-child,
.mdact-blok__outro ol li:last-child,
.mdact-welniet__doorverwijzing ol li:last-child {
    margin-bottom: 0;
}

/* --- Quote (donkergroene band, reviews op categorie-match) --- */
.mdact-blok--quote {
    position: relative;
    overflow: hidden;
    background-color: var(--mdact-donkergroen);
}

/* Foto vol in beeld, van rand tot rand (de dispatcher zet hem op de band). */
.mdact-quote__achtergrond {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Donkergroene overlay, linksonder het donkerst: daar staat de quote. */
.mdact-quote__achtergrond::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right,
        rgba(26, 46, 38, 0.96) 0%,
        rgba(44, 74, 62, 0.78) 45%,
        rgba(44, 74, 62, 0.4) 100%);
}

/* Content linksonder; met foto krijgt de band extra hoogte */
.mdact-blok--quote .mdact-blok__inner {
    position: relative; /* boven de foto-laag */
    display: flex;
    align-items: flex-end;
}

.mdact-blok--quote.heeft-foto .mdact-blok__inner {
    min-height: 480px;
}

.mdact-quote {
    margin: 0;
    max-width: 640px;
}

.mdact-quote__tekst {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 30px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: var(--mdact-wit);
}

.mdact-quote__bron {
    margin-top: 24px;
}

.mdact-quote__naam {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--mdact-goud);
}

.mdact-quote__meta {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    color: #C5D9CE;
}

/* Slider: quotes gestapeld, rustige wissel van links naar rechts.
   Het wisselen zelf doet assets/js/mdact-quote.js (interval 10 s, geen knopjes);
   de hoogte van de band volgt de langste quote, dus geen versprongen layout. */
.mdact-quote-slider {
    display: grid;
    width: 100%;
}

.mdact-quote-slider .mdact-quote {
    grid-area: 1 / 1;
    align-self: end;
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 1.2s ease, transform 1.2s ease;
    pointer-events: none;
}

.mdact-quote-slider .mdact-quote.is-actief {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    :root {
        --mdact-blok-py: 48px;
        --mdact-blok-px: 20px;
    }
    .mdact-blok__titel {
        font-size: 24px;
    }
    .mdact-blok--quote.heeft-foto .mdact-blok__inner {
        min-height: 380px;
    }
    .mdact-quote::before {
        font-size: 56px;
    }
    .mdact-quote__tekst {
        font-size: 22px;
    }
}