/* ============================================================================
   Proxmi — Grid-lay-out voor de linkerkolom van het krantje
   Bestand: /assets/css/krantje-grid.css

   Vervangt de verticale lijst van artikeltegels door een 6-koloms grid met
   wisselende tegelgroottes. Doel: meer dynamiek, minder witruimte.

   De template-CSS (main.css) blijft ongemoeid: alle regels hieronder werken
   uitsluitend binnen .krantje-grid en overschrijven daar de Hewo-defaults.

   Titels staan ALTIJD onder het beeld (geen overlays), zodat leesbaarheid
   niet afhangt van de beeldkwaliteit.
   ============================================================================ */

/* ─────────────────────────────────────────────
   GRID-CONTAINER
   ───────────────────────────────────────────── */
.krantje-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px 20px;
    align-items: start;
    /* Bewust GEEN grid-auto-flow: dense. Dense vult gaten op door latere tegels
       naar voren te halen, waardoor het evenementenblok en het artikel ernaast
       uit elkaar getrokken kunnen worden en de volgorde onvoorspelbaar wordt.
       Het patroon in krantjeGridVariant() telt al op tot hele rijen. */
    margin-bottom: 30px;
}

/* Blokken die géén tegel zijn maar wel de volle breedte moeten innemen
   (werfbanner, evenementkop, CTA-stroken). */
.krantje-grid__vol {
    grid-column: 1 / -1;
}

/* De AJAX-wrapper (#krantje-meer-lijst) mag zelf geen gridcel worden:
   display:contents laat zijn kinderen rechtstreeks in de grid vallen, zodat
   bijgeladen tegels dezelfde kolomindeling volgen als de initiële.
   Browsers zonder display:contents (zeer oud) tonen ze als één blok — dat is
   een acceptabele terugval. */
.krantje-grid__doorgeef {
    display: contents;
}

/* ─────────────────────────────────────────────
   TEGEL — BASIS
   Binnen de grid nemen we de Hewo-marges weg: de gap regelt de ruimte.
   ───────────────────────────────────────────── */
.krantje-grid .latest_style_2_item {
    grid-column: span 2;          /* standaardvariant */
    /* main.css zet hier border-bottom, margin-bottom:20px en padding-bottom:20px
       plus overflow:hidden. Binnen de grid regelt de gap alle tussenruimte, en
       overflow:hidden zou het categorielabel afknippen. */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    overflow: visible !important;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;                 /* voorkomt dat lange titels de kolom oprekken */
}

/* Hewo zet op sommige tegels een onderrand/marge — binnen de grid weg. */
.krantje-grid .latest_style_2_item::after { content: none; }

/* ── Beeld ────────────────────────────────────
   Vaste beeldverhouding per variant via de padding-top-techniek: de figure
   krijgt hoogte 0 met een percentage-padding, het beeld wordt daarbinnen
   absoluut gepositioneerd en met object-fit: cover bijgesneden.

   Bewust GEEN aspect-ratio op de figure: die eigenschap geeft een flex-kind
   binnen een grid geen definitieve hoogte, waardoor height:100% op de <img>
   niets doet en het beeld op ware grootte in de container blijft staan.

   De !important-vlaggen overschrijven .latest_style_2_item figure uit
   main.css (float:left; width:35%; margin-right:15px), dat anders wint.
   ───────────────────────────────────────────── */
.krantje-grid .latest_style_2_item figure.alith_news_img {
    display: block !important;
    float: none !important;
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 0 66.667% 0 !important;   /* 3:2 — standaardverhouding */
    margin: 0 0 10px 0 !important;
    overflow: hidden;
    border-radius: 3px;
    background: #f2f2f2;
}

.krantje-grid .alith_news_img a {
    position: absolute;
    inset: 0;
    display: block;
}

.krantje-grid .alith_news_img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    transition: transform .35s ease;
}

.krantje-grid .latest_style_2_item:hover .alith_news_img img {
    transform: scale(1.04);
}

/* ── Titel ───────────────────────────────────
   line-clamp op 4 regels: conservatief gekozen zodat er in de praktijk
   zelden iets wegvalt. Bij ongelijke rijhoogtes kan dit later omlaag.
   ───────────────────────────────────────────── */
.krantje-grid .alith_post_title {
    margin: 0 0 6px;
    font-size: 17px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.krantje-grid .alith_post_title a {
    color: #1a1a1a;
    text-decoration: none;
}
.krantje-grid .alith_post_title a:hover { color: var(--accent, #c0392b); }

/* ── Meta + AI-label ─────────────────────────── */
.krantje-grid .post_meta {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12px;
    color: #999;
}
.krantje-grid .post_meta .meta_bronzone { margin-left: 6px; }

.krantje-grid .ai-label { margin-top: 3px; }

/* ── Samenvatting (alleen hero/breed/groot) ─── */
.krantje-grid__samenvatting {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Categorielabel (bron_type) ─────────────── */
.krantje-grid__label {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--accent, #c0392b);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 9px;
    border-radius: 2px;
}

/* ─────────────────────────────────────────────
   VARIANTEN
   ───────────────────────────────────────────── */

/* HERO — volle breedte, 16:9, grote titel + samenvatting */
.krantje-grid .krantje-tegel--hero {
    grid-column: 1 / -1;
}
.krantje-grid .krantje-tegel--hero figure.alith_news_img {
    padding-bottom: 56.25% !important;   /* 16:9 */
    margin-bottom: 14px !important;
}
.krantje-grid .krantje-tegel--hero .alith_post_title {
    font-size: 30px;
    line-height: 1.2;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* BREED — volle breedte, 21:9, compacter dan hero */
.krantje-grid .krantje-tegel--breed {
    grid-column: 1 / -1;
}
.krantje-grid .krantje-tegel--breed figure.alith_news_img {
    padding-bottom: 42.85% !important;   /* 21:9 */
    margin-bottom: 12px !important;
}
.krantje-grid .krantje-tegel--breed .alith_post_title {
    font-size: 24px;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* GROOT — halve breedte (3 van 6), 3:2 */
.krantje-grid .krantje-tegel--groot {
    grid-column: span 3;
}
.krantje-grid .krantje-tegel--groot figure.alith_news_img {
    padding-bottom: 66.667% !important;  /* 3:2 */
}
.krantje-grid .krantje-tegel--groot .alith_post_title {
    font-size: 20px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* STANDAARD — een derde (2 van 6), 3:2, alleen titel */
.krantje-grid .krantje-tegel--standaard {
    grid-column: span 2;
}
.krantje-grid .krantje-tegel--standaard figure.alith_news_img {
    padding-bottom: 66.667% !important;  /* 3:2 */
}

/* TEKST — geen beeld. Vult gaten en breekt het beeldritme.
   Een dunne accentlijn bovenaan maakt duidelijk dat het geen fout is. */
.krantje-grid .krantje-tegel--tekst {
    grid-column: span 2;
    border-top: 3px solid var(--accent, #c0392b) !important;
    padding-top: 12px !important;
}
.krantje-grid .krantje-tegel--tekst .alith_news_img { display: none; }
.krantje-grid .krantje-tegel--tekst .alith_post_title {
    font-size: 18px;
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

/* De weerbalk staat onder de hero en boven de eerste rij artikeltegels,
   op volle breedte. De partial brengt zijn eigen opmaak mee; hier regelen
   we enkel de plaatsing binnen de grid. */
.krantje-grid .krantje-weerstrip {
    grid-column: 1 / -1;
    margin: 0;
}
.krantje-grid .krantje-weerstrip > *:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────
   EVENEMENTENBLOK
   Eén afgebakend kader van 2 kolommen met de kop eríń, zodat de accentlijn
   enkel over de evenementen gaat. Het eerste evenement heeft een foto, de
   overige staan eronder als titellijst. De "meer"-link plakt onderaan.
   ───────────────────────────────────────────── */
.krantje-grid .krantje-evblok {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    background: var(--ev-achtergrond, rgba(0, 0, 0, .05));
    border-left: 4px solid var(--accent, #c0392b);
    border-radius: 3px;
    padding: 14px 16px 12px 16px;
    min-width: 0;
}

.krantje-grid .krantje-evblok__kop {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--accent, #c0392b);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--accent, #c0392b);
}

/* Hoofdevenement met foto */
.krantje-grid .krantje-evblok__hoofd {
    display: block;
    text-decoration: none;
    margin-bottom: 12px;
}

.krantje-grid .krantje-evblok__figuur {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 66.667%;      /* 3:2 */
    margin: 0 0 8px;
    overflow: hidden;
    border-radius: 3px;
    background: #f2f2f2;
}

.krantje-grid .krantje-evblok__figuur img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform .35s ease;
}

.krantje-grid .krantje-evblok__hoofd:hover .krantje-evblok__figuur img {
    transform: scale(1.04);
}

.krantje-grid .krantje-evblok__titel {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #1a1a1a;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.krantje-grid .krantje-evblok__hoofd:hover .krantje-evblok__titel {
    color: var(--accent, #c0392b);
}

/* Titellijst van de overige evenementen.
   flex:1 laat de lijst de resterende hoogte opvullen, zodat de "meer"-link
   onderaan blijft plakken en het blok even hoog wordt als het artikel ernaast. */
.krantje-grid .krantje-evblok__lijst {
    flex: 1 1 auto;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.krantje-grid .krantje-evblok__item {
    padding: 7px 0;
    border-top: 1px solid rgba(0, 0, 0, .09);
    font-size: 14px;
    line-height: 1.35;
}

.krantje-grid .krantje-evblok__item a {
    color: #2a2a2a;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.krantje-grid .krantje-evblok__item a:hover {
    color: var(--accent, #c0392b);
    text-decoration: underline;
}

/* Zonder titellijst moet het hoofdevenement de ruimte opvullen. */
.krantje-grid .krantje-evblok__hoofd:last-of-type {
    flex: 1 1 auto;
}

.krantje-grid .krantje-evblok__meer {
    margin-top: auto;             /* blijft onderaan plakken */
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, .09);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent, #c0392b);
    text-decoration: none;
}
.krantje-grid .krantje-evblok__meer:hover { text-decoration: underline; }

/* ── BUUR — het artikel naast het evenementenblok ──
   4 van 6 kolommen: samen met het blok (2) is de rij exact vol. */
.krantje-grid .krantje-tegel--buur {
    grid-column: span 4;
}
.krantje-grid .krantje-tegel--buur figure.alith_news_img {
    padding-bottom: 52% !important;   /* iets platter dan 16:9, oogt rustiger */
}
.krantje-grid .krantje-tegel--buur .alith_post_title {
    font-size: 22px;
    line-height: 1.25;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* ─────────────────────────────────────────────
   EVENEMENTTEGELS BINNEN DE GRID
   De accent-achtergrond van sticky-evenementen blijft werken; binnen de
   grid krijgt hij wat binnenruimte zodat de kleur niet tegen de rand plakt.
   ───────────────────────────────────────────── */
.krantje-grid .krantje-tegel--evenement {
    padding: 12px !important;    /* moet de basisregel hierboven overrulen */
    border-radius: 4px;
}

.krantje-grid .krantje-tegel__evbadge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
}

/* De losse .krantje-ev-kop op volle breedte is vervallen: de kop staat nu
   binnen .krantje-evblok, zodat de accentlijn enkel over de evenementen loopt. */

/* ─────────────────────────────────────────────
   CTA-STROKEN (verhuisd uit de rechterkolom)
   Volle breedte binnen de grid. Beeld/tekst naast elkaar op desktop.
   ───────────────────────────────────────────── */
.krantje-grid .proxmi-cta-strook {
    grid-column: 1 / -1;
    margin: 4px 0;
    border-radius: 4px;
    overflow: hidden;
}

.krantje-grid .proxmi-cta-strook__inner {
    display: flex;
    align-items: stretch;      /* laat de foto de volle hoogte vullen */
    gap: 22px;
    padding: 20px 24px;
    flex-wrap: wrap;
}

/* Tekst en actie blijven wél verticaal gecentreerd. */
.krantje-grid .proxmi-cta-strook__tekstblok,
.krantje-grid .proxmi-cta-strook__actie {
    align-self: center;
}

/* Foto links in de strook. Vaste breedte, vult zijn vak volledig. */
.krantje-grid .proxmi-cta-strook__foto {
    flex: 0 0 200px;
    align-self: stretch;
    min-height: 130px;
    overflow: hidden;
    border-radius: 3px;
}

.krantje-grid .proxmi-cta-strook__foto img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.krantje-grid .proxmi-cta-strook__tekstblok {
    flex: 1 1 300px;
    min-width: 0;
}

.krantje-grid .proxmi-cta-strook__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    margin-bottom: 8px;
}

.krantje-grid .proxmi-cta-strook__titel {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.25;
    color: #fff;
    font-weight: 700;
}

.krantje-grid .proxmi-cta-strook__tekst {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
}
.krantje-grid .proxmi-cta-strook__tekst strong { color: #fff; }

.krantje-grid .proxmi-cta-strook__actie {
    flex: 0 0 auto;
    text-align: center;
}

.krantje-grid .proxmi-cta-strook__knop {
    display: inline-block;
    background: #fff;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease;
}
.krantje-grid .proxmi-cta-strook__knop:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    text-decoration: none;
}

.krantje-grid .proxmi-cta-strook__mini {
    margin: 8px 0 0;
    font-size: 11px;
    color: rgba(255, 255, 255, .75);
}

/* Kleurvarianten: handelaars volgt de zone-accentkleur, verenigingen groen. */
.krantje-grid .proxmi-cta-strook--handelaar {
    background: var(--accent, #c0392b);
}
.krantje-grid .proxmi-cta-strook--activiteit {
    background: #2e7d51;
}

/* ─────────────────────────────────────────────
   "MEER WEERGEVEN"-WRAP
   Staat buiten de grid, maar mag de volle breedte houden.
   ───────────────────────────────────────────── */
.krantje-grid + .krantje-meer-wrap { margin-top: 10px; }

/* ─────────────────────────────────────────────
   RESPONSIVE
   Tablet: 4 kolommen. Mobiel: alles terug naar één kolom, zoals voorheen.
   ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .krantje-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px 16px;
    }
    .krantje-grid .latest_style_2_item,
    .krantje-grid .krantje-tegel--standaard,
    .krantje-grid .krantje-tegel--tekst {
        grid-column: span 2;
    }
    .krantje-grid .krantje-tegel--groot { grid-column: span 4; }
    /* Tablet: blok en buur onder elkaar op volle breedte (4 kolommen). */
    .krantje-grid .krantje-evblok,
    .krantje-grid .krantje-tegel--buur { grid-column: span 4; }
    .krantje-grid .krantje-tegel--hero .alith_post_title { font-size: 26px; }

    /* CTA-strook: smallere foto, knop onder de tekst i.p.v. ernaast. */
    .krantje-grid .proxmi-cta-strook__foto { flex: 0 0 160px; }
    .krantje-grid .proxmi-cta-strook__tekstblok { flex: 1 1 100%; }
    .krantje-grid .proxmi-cta-strook__actie {
        flex: 1 1 100%;
        text-align: left;
    }
}

@media (max-width: 767px) {
    .krantje-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    /* Elke variant valt terug op één kolom en de standaardopmaak. */
    .krantje-grid .latest_style_2_item,
    .krantje-grid .krantje-tegel--hero,
    .krantje-grid .krantje-tegel--breed,
    .krantje-grid .krantje-tegel--groot,
    .krantje-grid .krantje-tegel--buur,
    .krantje-grid .krantje-tegel--standaard,
    .krantje-grid .krantje-tegel--tekst,
    .krantje-grid .krantje-evblok {
        grid-column: 1 / -1;
    }

    .krantje-grid .krantje-tegel--hero figure.alith_news_img,
    .krantje-grid .krantje-tegel--breed figure.alith_news_img,
    .krantje-grid .krantje-tegel--groot figure.alith_news_img,
    .krantje-grid .krantje-tegel--buur figure.alith_news_img,
    .krantje-grid .krantje-tegel--standaard figure.alith_news_img {
        padding-bottom: 66.667% !important;  /* overal 3:2 op mobiel */
    }

    .krantje-grid .krantje-tegel--buur .alith_post_title { font-size: 20px; }

    .krantje-grid .krantje-tegel--hero .alith_post_title { font-size: 22px; }
    .krantje-grid .krantje-tegel--breed .alith_post_title { font-size: 20px; }
    .krantje-grid .krantje-tegel--groot .alith_post_title { font-size: 19px; }

    /* CTA-stroken: foto boven, dan tekst, dan knop. */
    .krantje-grid .proxmi-cta-strook__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 0 0 20px;
    }
    .krantje-grid .proxmi-cta-strook__foto {
        flex: none;
        width: 100%;
        height: 160px;
        min-height: 0;
        border-radius: 0;
    }
    .krantje-grid .proxmi-cta-strook__tekstblok,
    .krantje-grid .proxmi-cta-strook__actie {
        align-self: stretch;
        padding: 0 20px;
    }
    .krantje-grid .proxmi-cta-strook__actie { text-align: left; width: 100%; }
    .krantje-grid .proxmi-cta-strook__knop { display: block; text-align: center; }
    .krantje-grid .proxmi-cta-strook__titel { font-size: 19px; }
}
/* ============================================================================
   WERFBANNER — "Zet je zaak in het krantje"
   Verhuisd uit het inline <style>-blok van krantje.php, omdat de banner nu in
   BEIDE sporen verschijnt (betalend én slapend) en de opmaak dus altijd
   geladen moet zijn. Binnen de grid krijgt hij volle breedte via
   .krantje-grid__vol.
   ============================================================================ */
.proxmi-werf-banner {
    display: flex;
    gap: 0;
    margin: 0 0 30px;
    border: 1px solid #e6e6e6;
    border-top: 4px solid var(--werf-accent, #c0392b);
    background: #fff;
    overflow: hidden;
}
.proxmi-werf-banner__foto {
    position: relative;
    flex: 0 0 42%;
    min-height: 260px;
    overflow: hidden;
}
.proxmi-werf-banner__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.proxmi-werf-banner__badge {
    position: absolute;
    top: 14px;
    left: 0;
    background: var(--werf-accent, #c0392b);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 12px;
}
.proxmi-werf-banner__tekst {
    flex: 1;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
}
.proxmi-werf-banner__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--werf-accent, #c0392b);
    margin-bottom: 8px;
}
.proxmi-werf-banner__titel {
    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
}
.proxmi-werf-banner__intro {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 12px;
}
.proxmi-werf-banner__punten {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.proxmi-werf-banner__punten li {
    font-size: 13.5px;
    color: #333;
    padding: 3px 0 3px 24px;
    position: relative;
}
.proxmi-werf-banner__punten li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--werf-accent, #c0392b);
    font-weight: 700;
}
.proxmi-werf-banner__knop {
    display: inline-block;
    background: var(--werf-accent, #c0392b);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    padding: 13px 22px;
    margin-top: auto;
    transition: filter 0.15s, transform 0.15s;
}
.proxmi-werf-banner__knop:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
.proxmi-werf-banner__mini {
    display: block;
    text-align: center;
    font-size: 11.5px;
    color: #999;
    margin-top: 8px;
}
@media (max-width: 767px) {
    .proxmi-werf-banner { flex-direction: column; }
    .proxmi-werf-banner__foto {
        flex: none;
        min-height: 175px;
        max-height: 200px;
    }
    .proxmi-werf-banner__tekst { padding: 18px 18px 20px; }
    .proxmi-werf-banner__titel { font-size: 20px; }
}

/* Binnen de grid regelt de gap de tussenruimte; de eigen marge vervalt. */
.krantje-grid .proxmi-werf-banner { margin-bottom: 0; }

/* De verenigingsvariant heeft geen eigen regels nodig: alle accentkleuren in
   de banner lopen via --werf-accent, die per banner inline gezet wordt. */

/* ============================================================================
   VANDAAG-HERINNERING
   Balk die onderaan inschuift wanneer er vandaag een evenement doorgaat.

   Bewust geen modal: die legt de pagina stil en wordt daarom weggeklikt vóór
   iemand hem gelezen heeft. Deze balk valt op zonder iets te blokkeren.

   Volledig in de zonekleur uitgevoerd: dat maakt hem meteen herkenbaar als
   iets van dít krantje, en hij valt duidelijk op tussen de witte pagina.
   ============================================================================ */

.vandaag-balk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;              /* onder eventuele cookiemelding, boven de pagina */
    display: flex;
    align-items: stretch;
    background: var(--accent, #c0392b);
    color: #fff;
    box-shadow: 0 -6px 32px rgba(0, 0, 0, .28);

    /* Startpositie: net onder de vouw. De klasse .zichtbaar schuift hem in. */
    transform: translateY(105%);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.vandaag-balk.zichtbaar { transform: translateY(0); }

/* Wie liever geen beweging ziet, krijgt hem gewoon meteen op zijn plaats. */
@media (prefers-reduced-motion: reduce) {
    .vandaag-balk { transition: none; }
}

.vandaag-balk__link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 26px;
    text-decoration: none;
    color: #fff;
    min-width: 0;
    transition: background .15s ease;
}
.vandaag-balk__link:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(0, 0, 0, .09);   /* werkt op elke zonekleur */
}

/* ── Foto ─────────────────────────────────── */
.vandaag-balk__foto {
    flex: 0 0 128px;
    width: 128px;
    height: 128px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.vandaag-balk__foto img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* ── Tekst ────────────────────────────────── */
.vandaag-balk__tekst {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vandaag-balk__label {
    display: inline-block;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    background: rgba(0, 0, 0, .22);
    padding: 4px 12px;
    border-radius: 999px;
}

.vandaag-balk__titel {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    /* Eén regel: de balk mag niet meegroeien met een lange clickbait-titel */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Uur en locatie: de praktische info waar het op de dag zelf om draait. */
.vandaag-balk__info {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .95);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vandaag-balk__info:empty { display: none; }

/* Loopt het evenement nu? Dan mag het label extra opvallen met een
   knipperend stipje — subtiel genoeg om niet te storen. */
.vandaag-balk--bezig .vandaag-balk__label {
    background: #fff;
    color: #1a1a1a;
}
.vandaag-balk--bezig .vandaag-balk__label::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d33;
    margin-right: 7px;
    vertical-align: middle;
    animation: vandaagPuls 1.6s ease-in-out infinite;
}

@keyframes vandaagPuls {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
    .vandaag-balk--bezig .vandaag-balk__label::before { animation: none; }
}

.vandaag-balk__extra {
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Knop ─────────────────────────────────── */
/* Wit op gekleurde achtergrond: omgekeerd aan de rest van de balk, zodat de
   knop het eerste is wat opvalt. */
.vandaag-balk__knop {
    flex: 0 0 auto;
    align-self: center;
    background: #fff;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 800;
    padding: 16px 30px;
    border-radius: 3px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

/* ── Sluitknop ────────────────────────────── */
.vandaag-balk__sluit {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .7);
    font-size: 24px;
    line-height: 1;
    padding: 0 22px;
    cursor: pointer;
    align-self: stretch;
    transition: background .15s ease, color .15s ease;
}
.vandaag-balk__sluit:hover {
    color: #fff;
    background: rgba(0, 0, 0, .14);
}

/* ── Tablet ───────────────────────────────── */
@media (max-width: 900px) {
    .vandaag-balk__link { gap: 18px; padding: 16px 20px; }
    .vandaag-balk__foto { flex-basis: 96px; width: 96px; height: 96px; }
    .vandaag-balk__titel { font-size: 21px; }
    .vandaag-balk__info { font-size: 14px; }
    .vandaag-balk__knop { font-size: 14px; padding: 13px 22px; }
}

/* ── Mobiel ───────────────────────────────── */
@media (max-width: 600px) {
    .vandaag-balk__link {
        gap: 14px;
        padding: 14px 14px;
    }
    .vandaag-balk__foto {
        flex-basis: 82px;
        width: 82px;
        height: 82px;
    }
    .vandaag-balk__label { font-size: 11px; padding: 3px 9px; letter-spacing: .07em; }
    .vandaag-balk__titel { font-size: 17px; white-space: normal;
        /* Op mobiel wél twee regels toestaan: de titel is hier het enige
           wat de bezoeker overtuigt, en er is geen knop meer om op te vallen. */
        display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
        -webkit-box-orient: vertical; }

    /* De inforegel blijft: uur en locatie zijn op de dag zelf het belangrijkst. */
    .vandaag-balk__info { font-size: 13px; }

    .vandaag-balk__extra { display: none; }

    /* De knop wordt weggelaten: de hele balk is al klikbaar en op een smal
       scherm gaat die ruimte beter naar de titel. */
    .vandaag-balk__knop { display: none; }

    .vandaag-balk__sluit { padding: 0 14px; font-size: 20px; }
}