/* ============================================================
   nieuws.css — /nieuws/

   De berichten komen uit de nieuws-collectie en worden gerenderd als
   .cms-item-kaarten door cms-collections.js. Die kaarten hebben hun
   basisvorm al in components.css; hier staat alleen wat deze pagina
   anders doet.
   ============================================================ */

/* Eén kolom, nieuwste bovenaan. Een nieuwsbericht lees je van boven naar
   beneden; naast elkaar zetten maakt het een raster in plaats van een
   tijdlijn. */
.nieuws__lijst .cms-items {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: 780px;
    margin: 0 auto;
}

.nieuws__lijst .cms-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--bg-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Staat er een foto bij, dan komt die links naast de tekst. */
@media (min-width: 720px) {
    .nieuws__lijst .cms-item:has(.cms-item__media) {
        grid-template-columns: 15rem minmax(0, 1fr);
    }
}

.nieuws__lijst .cms-item__media { margin: 0; }

.nieuws__lijst .cms-item__img {
    width: 100%;
    height: 100%;
    min-height: 11rem;
    object-fit: cover;
    display: block;
}

.nieuws__lijst .cms-item__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.4rem 1.6rem;
}

/* De datum staat boven de titel, als eerste ankerpunt. */
.nieuws__lijst .cms-item__date {
    order: -1;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
}

.nieuws__lijst .cms-item__title {
    margin: 0;
    font-size: var(--step-1);
    color: var(--ink);
}

.nieuws__lijst .cms-item__summary {
    margin: 0;
    color: var(--body);
    max-width: 62ch;
}

.nieuws__lijst .cms-item__link {
    align-self: flex-start;
    margin-top: .3rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--brand-dark);
    text-decoration: none;
    padding: .5rem 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--bg);
    transition: background-color .18s ease, transform .18s ease;
}

.nieuws__lijst .cms-item__link:hover {
    background: var(--accent-soft);
    transform: translateY(-2px);
}

/* Wat er staat zolang er geen bericht is. Verdwijnt zodra de collectie
   iets teruggeeft (cms-collections.js). */
/* ── Volg ons ──
   Staat er altijd, dus ook als er wél nieuws is. Tussen twee berichten door
   gebeurt er op Facebook en Instagram genoeg, en dit is de enige plek op de
   pagina die daarheen wijst. */
.volg {
    max-width: 46ch;
    margin: 2.5rem auto 0;
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--bg-soft);
    border-radius: var(--radius-lg);
}

.volg__kop {
    margin: 0 0 1.2rem;
    font-family: var(--font-hand);
    font-size: var(--step-2);
    color: var(--brand);
}

.volg__knoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
}

/* Het icoon met de naam ernaast, niet alleen het icoon: een logo zonder
   woord is een raadseltje, en het maakt het raakvlak meteen ruim genoeg
   voor een duim. */
.volg__knop {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.9rem;
    padding: .65rem 1.3rem;
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--brand-dark);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-0);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.volg__knop:hover,
.volg__knop:active {
    background: var(--accent);
    color: var(--brand-deep);
    transform: translateY(-2px);
}

/* Omlijning, geen vlak: zo staan ze in dezelfde lijnstijl als de menuknop en
   de tak-iconen (DESIGN-REGELS.md hoofdstuk 1, beeldtaal). currentColor laat
   ze meekleuren met de knop, ook bij hover. */
.volg__ico {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    .volg__knop:hover,
    .volg__knop:active { transform: none; }
}