/*
 * Weergaven blog, vacature en nieuws van stream (plg.stream-2.0.php, templates plugins/stream/bootstrap-5/) - rustige standaardopmaak.
 * Aankleden per site in de eigen site-CSS, bij voorkeur via deze variabelen:
 *
 * .zl-blog, .zl-vacancy, .zl-news {
 *     --zl-blog-gap: 24px;          ruimte tussen kaarten
 *     --zl-blog-space: 32px;        ruimte tussen blokken
 *     --zl-blog-muted: #6b6b6b;     meta-regels, labels
 *     --zl-blog-border: #f2f2f2;    lijnen
 *     --zl-blog-hero-ratio: 5 / 2;  verhouding brede hero (auto = eigen verhouding)
 *     --zl-blog-accent: #0f5c55;    labels, links in inhoudsopgave en auteursblok, ook kaders en knoppen
 *     --zl-blog-soft-bg: #f5f5f3;   initialen, lege afbeeldingen (vlakken: bggrey in basis.css)
 *     --zl-blog-photo-overlay: rgba(0, 0, 0, .45);
 * }
 */

.zl-blog,
.zl-vacancy,
.zl-news {
    --zl-blog-gap: 24px;
    --zl-blog-space: 32px;
    --zl-blog-muted: #6b6b6b;
    --zl-blog-border: #f2f2f2;
    --zl-blog-hero-ratio: 5 / 2;
    --zl-blog-soft-bg: #f5f5f3;
    --zl-blog-accent: #0f5c55;
    --zl-blog-photo-overlay: rgba(0, 0, 0, .45);
}

.zl-blog img,
.zl-vacancy img,
.zl-news img {
    max-width: 100%;
    height: auto;
}

.zl-blog-sep {
    margin: 0 .4em;
}

/* Label (categorie in kaarten, tags op de detailpagina): overal hetzelfde groene label */
.zl-blog-label {
    display: inline-block;
    align-self: flex-start; /* in een kaart (flex-kolom) niet uitrekken */
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--zl-blog-accent);
    background: color-mix(in srgb, var(--zl-blog-accent) 10%, #fff);
    border-radius: 999px;
    padding: .3rem .75rem;
    text-decoration: none;
    margin-bottom: .5rem;
}

.zl-blog-section-title {
    margin: 0 0 calc(var(--zl-blog-space) / 2);
}

/* Overzicht */

/* Ruimte tussen de kop van de websitepagina en het overzicht (nieuws, vacature). Het blogoverzicht werkt met divider-mdm
   tussen de blokken (blog-container-1.0.html) en heeft geen eigen marge. */
.zl-news-overview,
.zl-vacancy-overview {
    margin-top: 1.5rem;
}

/* Met het grijze kopvlak bovenaan (zl-stream-head) sluit het schermbrede vlak direct aan, zoals bij het blog */
.zl-news-overview:has(> .zl-stream-head) {
    margin-top: 0;
}

/* Blog- en nieuwsoverzicht: categoriekop en onderwerpen in één grijs vlak (bggrey, basis.css), schermbreed. De
   box-shadow tekent dezelfde kleur tot de randen van het scherm, clip-path houdt hem op de hoogte van het vlak; geen
   100vw (geen horizontale scrollbalk). Kleur gelijk aan .bggrey. */
.zl-stream-head {
    box-shadow: 0 0 0 100vmax #f4f4f4;
    clip-path: inset(0 -100vmax);
}

/* Onderwerpen (tags) als knoppen; Alles/actief = btn-highlight, de rest btn-default (basics.css) */
.zl-blog-topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Blog- en nieuwsoverzicht: nieuwste artikel breed (featured-1.0.html), afbeelding links in de bootstrap-row */
.zl-featured-media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--zl-radius);
    background: var(--zl-blog-soft-bg);
}

/* Nieuws: lijn om het hele uitgelichte bericht */
.zl-featured-news {
    padding: var(--zl-blog-gap);
    border: 1px solid var(--zl-blog-border);
    border-radius: var(--zl-radius);
}

.zl-featured-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zl-featured-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.zl-featured-labels .zl-blog-label {
    margin-bottom: 0;
}

.zl-featured-latest {
    font-size: .825rem;
    color: var(--zl-blog-muted);
}

.zl-featured .zl-blog-avatar {
    width: 32px;
    height: 32px;
    margin-right: .5rem;
}

/* Link in een kop (titel van het uitgelichte artikel, kaarten): geen rand of onderstreping, ook niet bij hover */
:is(.zl-blog, .zl-news, .zl-vacancy) .contentLayout :is(h1, h2, h3, h4, h5, h6) a,
:is(.zl-blog, .zl-news, .zl-vacancy) .contentLayout :is(h1, h2, h3, h4, h5, h6) a:hover,
:is(.zl-blog, .zl-news, .zl-vacancy) .contentLayout :is(h1, h2, h3, h4, h5, h6) a:focus {
    border: 0;
    text-decoration: none;
}

.zl-blog-card-link {
    border: 0;
}

.zl-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--zl-blog-gap);
}

@media (max-width: 991.98px) {
    .zl-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .zl-blog-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2rem; /* mobiel onder elkaar: zelfde ruimte als een divider-mdm */
    }
}

.zl-blog-empty {
    color: var(--zl-blog-muted);
}

/* Kaart */

.zl-blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.zl-blog-card-media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--zl-radius);
    margin-bottom: .75rem;
}

.zl-blog-card-media .zl-blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nieuws ("Meer nieuws" op nieuwsdetail): beeld met een lijn zoals de nieuwslijst (zl-news-media); zonder afbeelding
   een grijs vlak met icoon (card-1.0.html met bCardEmptyMedia) */
.zl-news .zl-blog-card-media {
    border: 1px solid var(--zl-blog-border);
}

.zl-blog-card-media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zl-blog-soft-bg);
    color: var(--zl-blog-muted);
    font-size: 1.25rem;
}

.zl-blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Kaarttitel en -tekst: typografie uit contentLayout (op .zl-blog-card-body). Uitzondering: de tekst zonder marge,
   de ruimte naar de metaregel komt van de divider-smll erboven. */
.zl-blog-card-body .zl-blog-card-text {
    margin: 0;
}

/* Divider-smll boven de metaregel (blog-cardmeta-1.0.html): in een kaart onderaan, zodat de metaregels gelijk staan */
.zl-blog-card-body > .div-divider {
    margin-top: auto;
}

.zl-blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: .825rem;
    color: var(--zl-blog-muted);
}

.zl-blog-card-author {
    font-weight: 600;
    color: var(--bs-body-color, inherit);
}

/* Fotokaart: alleen titel + afbeelding, hele kaart klikt door */

.zl-blog-card-photo .zl-blog-card-link {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-radius: var(--zl-radius);
}

.zl-blog-card-photo .zl-blog-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zl-blog-card-overlay {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 1rem 1.25rem;
    color: #fff;
    background: var(--zl-blog-photo-overlay);
}

.zl-blog-card-photo .zl-blog-card-title {
    color: inherit;
    margin: 0;
}

/* Detail */

/* Detailpagina's (blog, nieuws, vacature): de ruimte tussen de blokken/rijen komt van een divider-mdm (basics.css)
   ertussen, niet van marges op de blokken zelf. Een divider als laatste in het artikel of een kolom, of aan het begin of
   eind van de tekst (rond foto's/vragen/kaders van processBody()), valt weg: daar staat al een divider of niets meer. Twee divider-mdm direct na elkaar: alleen de eerste telt. */
:is(.zl-blog-detail, .zl-news-detail, .zl-vacancy-detail, .zl-vacancy-content, .zl-blog-overview) > .div-divider:last-child,
:is(.zl-blog-body, .zl-vacancy-body) > .div-divider:first-child,
:is(.zl-blog-body, .zl-vacancy-body) > .div-divider:last-child,
:is(.zl-blog-detail, .zl-news-detail, .zl-vacancy-detail) .divider-mdm + .divider-mdm {
    display: none;
}

/* Hero: breed (banner-verhouding) bij een grote liggende foto; anders op 3:2. */
.zl-blog-hero {
    margin: 0;
}

.zl-blog-hero img {
    display: block;
    width: 100%;
    aspect-ratio: var(--zl-blog-hero-ratio);
    object-fit: cover;
    border-radius: var(--zl-radius);
    background: var(--zl-blog-soft-bg);
}

.zl-blog-hero-inline img {
    aspect-ratio: 3 / 2;
}

@media (max-width: 767.98px) {
    .zl-blog-hero img {
        aspect-ratio: 3 / 2;
    }
}

/* Kruimelpad boven de kop (menupad > artikel, zonder Home): items zoals het kruimelpad van de site, kleinere letter */
.zl-blog-breadcrumb {
    font-size: .825rem;
}

/* Zelfde ruimte rond het pijltje als .breadcrumbDiv .fal (basics.css) */
.zl-blog-breadcrumb .fal {
    margin: 0 5px;
}

/* Kop: tags als labels, titel, auteur met avatar | datum en leestijd */
.zl-blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.zl-blog-detail .zl-blog-tags .zl-blog-label,
.zl-vacancy-detail .zl-blog-tags .zl-blog-label {
    margin-bottom: 0;
}

/* Titel, intro en tekst van blog-, nieuws- en vacaturedetail staan in .contentLayout: geen eigen lettergrootte, marges of paddings,
   die komen uit de site (basics.css / site-CSS). Uitzondering: de blogtitel staat alleen in zijn contentLayout, met een
   kleinere ondermarge naar de metaregel. */
.zl-blog-head .contentLayout .zl-blog-title {
    margin: 0 0 1rem 0;
}

.zl-blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    font-size: .875rem;
    color: var(--zl-blog-muted);
    margin: 0;
}

.zl-blog-meta-author {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.zl-blog-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    font-size: .825rem;
}

.zl-blog-meta-who {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.zl-blog-meta-name {
    font-weight: 600;
    color: var(--bs-body-color, inherit);
}

.zl-blog-meta-name a {
    color: inherit;
    text-decoration: none;
}

.zl-blog-meta-role {
    font-size: .825rem;
}

.zl-blog-meta-author + .zl-blog-meta-facts {
    padding-left: 1rem;
    border-left: 1px solid var(--zl-blog-border);
}

@media (max-width: 575.98px) {
    .zl-blog-meta-author + .zl-blog-meta-facts {
        padding-left: 0;
        border-left: 0;
    }
}

.zl-blog-toc {
    border-radius: var(--zl-radius);
    padding: 1.25rem 1.5rem;
}

.zl-blog-toc-title {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zl-blog-muted);
    margin: 0 0 .75rem;
}

.zl-blog-toc ol {
    margin: 0;
    padding-left: 1.25rem;
}

.zl-blog-toc li {
    margin-bottom: .35rem;
}

.zl-blog-toc li:last-child {
    margin-bottom: 0;
}

.zl-blog-toc a {
    color: var(--zl-blog-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Koppen in de tekst zijn ankers van de inhoudsopgave: niet onder een vaste sitekop laten verdwijnen */
:is(.zl-blog-body, .zl-vacancy-body) > .contentLayout > h2 {
    scroll-margin-top: 100px;
}

.zl-blog-body img {
    border-radius: var(--zl-radius);
}

.zl-blog-reviewed {
    font-size: .875rem;
    color: var(--zl-blog-muted);
}

.zl-blog-author {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    border: 1px solid var(--zl-blog-border);
    border-radius: var(--zl-radius);
    padding: 1.5rem;
}

.zl-blog-author-img {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.zl-blog-author-eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zl-blog-muted);
}

.zl-blog-author-link a {
    font-size: .875rem;
    font-weight: 600;
    color: var(--zl-blog-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.zl-blog-author-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zl-blog-soft-bg);
    font-weight: 600;
}

.zl-blog-author-body p {
    margin: 0 0 .25rem;
}

.zl-blog-author-name {
    font-size: 1.0625rem;
    font-weight: 600;
}

.zl-blog-author-role,
.zl-blog-author-credentials {
    font-size: .875rem;
    color: var(--zl-blog-muted);
}

.zl-blog-author-bio {
    margin-top: .5rem !important;
}

/* Veelgestelde vragen onder het artikel (faq-1.0.html): opmaak en in-/uitklappen via zl_faq.css/js, zoals de FAQ-plugin */
.zl-blog-faq {
    scroll-margin-top: 100px;
}


/* Vacature */

/* Lijst (vacancy-messages-1.0.html): elke vacature een kaart met rand, tekst links en de knop rechts; tussen de kaarten
   een divider-smll (de laatste valt weg). Titel in contentLayout, de knop is btn btn-highlight (basics.css). */
.zl-vacancy-list > .div-divider:last-child {
    display: none;
}

.zl-vacancy-row {
    border: 1px solid var(--zl-blog-border);
    border-radius: var(--zl-radius);
}

.zl-vacancy-link {
    display: flex;
    align-items: center;
    gap: var(--zl-blog-gap);
    padding: 1.5rem;
    color: inherit;
    text-decoration: none;
    border: 0;
}

.zl-vacancy-main {
    flex: 1 1 auto;
    min-width: 0;
}

.zl-vacancy-labels {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 .5rem;
}

.zl-vacancy-labels .zl-blog-label {
    margin-bottom: 0;
}

/* Label "Nieuw": oranje variant van het label */
.zl-vacancy-label-new {
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 15%, #fff);
}

/* Uitzondering: titel zonder marge, de ruimte naar de kenmerkenregel komt van de divider-smllst erna */
.zl-vacancy-main .contentLayout .zl-vacancy-title {
    margin: 0;
}

.zl-vacancy-more {
    flex: 0 0 auto;
}

.zl-vacancy-facts-line {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin: 0;
    font-size: .875rem;
    color: var(--zl-blog-muted);
}

.zl-vacancy-facts-line .fal {
    margin-right: .25rem;
}

/* Onderaan het vacatureoverzicht: "Geen passende vacature?" met knop naar de contactpagina. Titel en tekst in contentLayout;
   uitzondering: de laatste alinea zonder ondermarge, het vlak heeft zelf padding. */
.zl-vacancy-open {
    display: flex;
    align-items: center;
    gap: var(--zl-blog-gap);
    padding: 1.5rem;
    border: 1px solid var(--zl-blog-border);
    border-radius: var(--zl-radius);
}

.zl-vacancy-open .contentLayout {
    flex: 1 1 auto;
    min-width: 0;
}

.zl-vacancy-open .contentLayout > :last-child {
    margin-bottom: 0;
}

.zl-vacancy-open-btn {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .zl-vacancy-open {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Auteur onder de belknop in de rechterbalk (vacancy-detail-1.0.html): avatar of initialen, "[naam] helpt je graag",
   functie eronder; de lijn (divider-mdm divider-line) staat in .zl-vacancy-author, onder .zl-vacancy-author-person */
.zl-vacancy-author-person {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.zl-vacancy-author .zl-blog-avatar {
    width: 48px;
    height: 48px;
}

.zl-vacancy-author-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.zl-vacancy-author-name {
    font-weight: 600;
}

.zl-vacancy-author-role {
    font-size: .825rem;
    color: var(--zl-blog-muted);
}

/* Vacatureformulier in de rechterbalk (vacancy-detail-1.0.html) in een kader */
#sollform {
    border: 1px solid var(--zl-blog-border);
    border-radius: var(--zl-radius);
    padding: 1.25rem;
}

/* Kenmerken (vacancy-detail-1.0.html): per li de naam (div) klein en grijs, de waarde vet; afstanden uit contentLayout */
.zl-vacancy-facts .zl-vacancy-facts-list div {
    font-size: .875rem;
    color: var(--zl-blog-muted);
}

.zl-vacancy-apply {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: .5rem;
}

.zl-vacancy-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--zl-blog-border);
}

.zl-vacancy-cta p {
    margin: 0;
}

@media (max-width: 575.98px) {
    .zl-vacancy-link {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }
}

/* Nieuws */

/* Lijst (news-messages-1.0.html): rijen onder elkaar met een lijn erboven en eronder; maand en jaar, beeld, dan label,
   titel en samenvatting in contentLayout (typografie van de site) */
.zl-news-list {
    border-top: 1px solid var(--zl-blog-border);
}

/* Vervolgpagina: geen lijn boven de lijst */
.zl-news-list-next {
    border-top: 0;
}

.zl-news-row {
    border-bottom: 1px solid var(--zl-blog-border);
}

.zl-news-link {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--zl-blog-gap);
    align-items: center;
    padding: 1.5rem 0;
    color: inherit;
    text-decoration: none;
    border: 0;
}

.zl-news-main .zl-news-title {
    margin-bottom: .5rem;
}

/* Datum onder de samenvatting */
.zl-news-main .zl-news-date {
    display: block;
    margin-top: .5rem;
    font-size: .825rem;
    color: var(--zl-blog-muted);
}

/* Beeldvak met een lijn eromheen; zonder beeld een grijs vlak met een icoon */
.zl-news-media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border: 1px solid var(--zl-blog-border);
    border-radius: var(--zl-radius);
}

.zl-news-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zl-news-media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zl-blog-soft-bg);
    color: var(--zl-blog-muted);
    font-size: 1.25rem;
}

/* Uitzondering: geen marge onder de samenvatting, de rij heeft zelf al ruimte (padding) */
.zl-news-main .zl-news-text {
    margin: 0;
}

/* Vestiging (extra veld locatie): kleine regel onder de samenvatting, de naam onderstreept zoals in de mockup */
.zl-news-main .zl-news-location {
    margin: 0;
    font-size: .825rem;
    color: var(--zl-blog-muted);
}

.zl-news-location span {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.zl-news-meta {
    font-size: .875rem;
    color: var(--zl-blog-muted);
    margin-bottom: .5rem;
}

/* Foto's bij het artikel (media-1.0.html): extra afbeeldingen + galerij, klik = lightbox. Ruimte erboven/eronder: divider-mdm */

.zl-blog-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

@media (max-width: 575.98px) {
    .zl-blog-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.zl-blog-media-grid a {
    display: block;
    overflow: hidden;
    border-radius: var(--zl-radius);
    background: var(--zl-blog-soft-bg);
}

.zl-blog-media-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s ease;
}

.zl-blog-media-grid a:hover img,
.zl-blog-media-grid a:focus-visible img {
    transform: scale(1.03);
}

@media (max-width: 575.98px) {
    /* Mobiel: alleen de tekst, zonder beeld */
    .zl-news-link {
        grid-template-columns: minmax(0, 1fr);
        gap: .5rem;
    }

    .zl-news-media {
        display: none;
    }
}