/* ZoLive contentblokken uit zl-editor (data-blocks="content"): citaat, kader, actiesectie en label (mark). Knoppen zijn btn btn-calltoaction (site-CSS).
   Kleur: zl-block-light / -dark / -accent. Breedte: standaard in de tekstkolom, zl-block-wide = achtergrond over de hele pagina.
   Rustig en neutraal met een groen accent (#0f5c55); in een blog volgt het --zl-blog-accent. Een sitethema kan alles overschrijven met:
     --zl-block-light-bg / -fg / -muted / -border     lichte variant
     --zl-block-dark-bg / -fg / -muted                 donkere variant
     --zl-block-accent-bg                              accentvariant en knoppen (standaard groen #0f5c55)
     --zl-block-radius                                 hoeken (standaard 8px) */
.zl-quote, .zl-callout, .zl-cta {
    --zl-blk-accent: var(--zl-block-accent-bg, var(--zl-blog-accent, #0f5c55));
    --zl-blk-bg: var(--zl-block-light-bg, #f4f4f4); /* zelfde grijs als bggrey (basis.css), voor de brede variant */
    --zl-blk-fg: var(--zl-block-light-fg, inherit);
    --zl-blk-muted: var(--zl-block-light-muted, #6b6b6b);
    --zl-blk-border: var(--zl-block-light-border, #e3e3e3);
    --zl-blk-row-bg: #fff;
    --zl-blk-row-border: var(--zl-blk-border);
    --zl-blk-radius: var(--zl-block-radius, 8px);
    color: var(--zl-blk-fg); /* achtergrond licht: class bggrey van de site (streamLayout::processBody), donker/accent hieronder */
    border: 1px solid var(--zl-blk-border); border-radius: var(--zl-blk-radius);
    margin: 0; /* ruimte erboven/eronder: divider-mdm (in stream gezet door streamLayout::processBody) */
}
.zl-block-dark {
    --zl-blk-bg: var(--zl-block-dark-bg, #1f2328); --zl-blk-fg: var(--zl-block-dark-fg, #fff);
    background: var(--zl-blk-bg);
    --zl-blk-muted: var(--zl-block-dark-muted, rgba(255, 255, 255, .7)); --zl-blk-border: transparent;
    --zl-blk-row-bg: rgba(255, 255, 255, .06); --zl-blk-row-border: rgba(255, 255, 255, .12);
}
.zl-block-accent {
    --zl-blk-bg: var(--zl-blk-accent); --zl-blk-fg: #fff;
    background: var(--zl-blk-bg);
    --zl-blk-muted: rgba(255, 255, 255, .8); --zl-blk-border: transparent;
    --zl-blk-row-bg: rgba(255, 255, 255, .1); --zl-blk-row-border: rgba(255, 255, 255, .2);
}
.zl-quote :is(h1, h2, h3, h4, h5, h6),
.zl-callout :is(h1, h2, h3, h4, h5, h6),
.zl-cta :is(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* Bovenkopje: korte regel direct boven de kop */
.zl-cta .row > div > p:first-child:has(+ h2, + h3, + h4),
.zl-callout-body > p:first-child:has(+ h2, + h3, + h4) {
    text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 600;
    color: var(--zl-blk-muted); margin: 0 0 .5rem;
}

/* Citaat */
.zl-quote { padding: 2rem 2rem 1.75rem; }
.zl-quote blockquote { position: relative; margin: 0 0 1.25rem; padding: 0; border: 0; font-size: 1.25rem; line-height: 1.5; font-weight: 500; color: inherit; }
.zl-quote blockquote::before {
    content: '\201C'; display: block; height: 2rem; margin-bottom: .25rem;
    font-family: Georgia, 'Times New Roman', serif; font-size: 3.5rem; line-height: 1; color: var(--zl-blk-muted);
}
.zl-quote blockquote p { font-size: inherit; line-height: inherit; } /* site-CSS zet p vaak op een vaste grootte */
.zl-quote blockquote p:last-child { margin-bottom: 0; }
.zl-quote figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; margin: 0; font-size: .9rem; color: inherit; }
.zl-quote figcaption:not([data-initials]) { display: block; }
.zl-quote figcaption:not(:has(span:not(:empty))) { display: none; }
.zl-quote figcaption[data-initials]::before {
    content: attr(data-initials); grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600;
    background: var(--zl-blk-row-bg); border: 1px solid var(--zl-blk-row-border);
}
.zl-quote-name { display: block; font-weight: 600; }
.zl-quote-role { display: block; color: var(--zl-blk-muted); }
.zl-quote-name:empty, .zl-quote-role:empty { display: none; }

/* Kader: tekst links, actie rechts (onder elkaar op een telefoon). */
.zl-callout { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 1.75rem; }
.zl-callout-body { flex: 1 1 auto; min-width: 0; }
.zl-callout-body :is(h1, h2, h3, h4, h5, h6) { font-size: 1.15rem; font-weight: 600; margin: 0 0 .35rem; }
.zl-callout-body p { color: var(--zl-blk-muted); margin-bottom: .5rem; }
.zl-callout-body > :last-child, .zl-cta .row > div > :last-child { margin-bottom: 0; }
.zl-callout-action { flex: 0 0 auto; }
.zl-callout-action p { margin: 0; font-weight: 600; }
.zl-callout-action:not(:has(> :not(p:empty))) { display: none; } /* alleen lege <p>'s: verbergen */
@media (max-width: 575.98px) {
    .zl-callout { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem; }
}

/* Actiesectie: kop + toelichting links, keuzes rechts */
.zl-cta { padding: 2.25rem; }
.zl-cta > .row { row-gap: 1.75rem; align-items: center; }
.zl-cta :is(h2, h3, h4) { font-size: 1.5rem; font-weight: 600; line-height: 1.25; margin: 0 0 .75rem; }
.zl-cta p { color: var(--zl-blk-muted); }
/* Lijst met keuzes: .row erbij zodat contentLayout (marges op ul/li, vette link) en site-CSS (onderstreping) niet winnen */
.zl-cta .row ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.zl-cta .row > div > p:first-child:has(+ ul) { font-size: .875rem; color: var(--zl-blk-muted); margin: 0 0 .75rem; }
.zl-cta .row li { margin: 0; }
.zl-cta .row li > p { margin: 0; color: inherit; }
.zl-cta .row li:not(:has(a)) {
    padding: .8rem 1rem; border-radius: var(--zl-blk-radius); font-weight: 600;
    background: var(--zl-blk-row-bg); border: 1px solid var(--zl-blk-row-border);
}
.zl-cta .row li a {
    display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: var(--zl-blk-radius);
    background: var(--zl-blk-row-bg); border: 1px solid var(--zl-blk-row-border);
    color: inherit; text-decoration: none; font-weight: 600; transition: border-color .15s ease;
}
.zl-cta .row li a::after { content: "\f105"; font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro"; font-weight: 300 !important; margin-left: auto; }
.zl-cta .row li a:hover, .zl-cta .row li a:focus { border-color: currentColor; color: inherit; text-decoration: none; }
@media (max-width: 575.98px) {
    .zl-cta { padding: 1.5rem 1.25rem; }
}

/* Breed (zl-block-wide): achtergrond over de hele paginabreedte, inhoud blijft in de tekstkolom.
   border-image met outset i.p.v. 100vw of schaduw: één vlak (geen naad op halve pixels), geen horizontale scrollbalk. */
.zl-block-wide {
    border: 0; border-radius: 0; padding-left: 0; padding-right: 0; padding-top: 2.75rem; padding-bottom: 2.75rem;
    margin: 0; border-image: conic-gradient(var(--zl-blk-bg) 0 0) fill 0 / 0 / 0 100vmax;
    background: none; /* alleen het border-image tekent: de eigen achtergrond gaf een naadje op halve pixels */
}
.zl-block-wide.bggrey, .zl-block-wide.zl-block-dark, .zl-block-wide.zl-block-accent { background: none; }
@media (max-width: 575.98px) {
    .zl-block-wide { padding-top: 2rem; padding-bottom: 2rem; }
}

/* Label */
.zl-quote mark, .zl-callout mark, .zl-cta mark {
    display: inline-block; vertical-align: middle; background: var(--zl-blk-row-bg); color: inherit;
    border: 1px solid var(--zl-blk-row-border); border-radius: 999px; padding: .15rem .6rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}