/*
 * KZ-Groeperingen en KZ-Nieuws: grids die op de server getekend worden
 * (zie includes/class-kz-berichten-grid.php). Kolommen en ruimte komen als
 * CSS-variabelen uit de shortcode: --kz-kol, --kz-kol-tablet, --kz-kol-mobiel
 * en --kz-ruimte. Tablet tot 1024px, mobiel tot 767px, zoals de Custom CSS
 * die eerst in WPBakery op de Post Grids stond (4 en 3 per rij).
 */

.kz-grid {
    display: grid;
    grid-template-columns: repeat(var(--kz-kol, 4), minmax(0, 1fr));
    gap: var(--kz-ruimte, 30px);
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
}

@media (max-width: 1024px) {
    .kz-grid {
        grid-template-columns: repeat(var(--kz-kol-tablet, 4), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .kz-grid {
        grid-template-columns: repeat(var(--kz-kol-mobiel, 3), minmax(0, 1fr));
        gap: min(var(--kz-ruimte, 30px), 15px);
    }
}

.kz-grid__item {
    position: relative;
    min-width: 0;
    margin: 0;
}

.kz-grid__item > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.kz-grid__titel {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.kz-grid--rood { --kz-tekst: #e53935; }
.kz-grid--wit  { --kz-tekst: #ffffff; }

.kz-grid--rood .kz-grid__titel,
.kz-grid--wit .kz-grid__titel {
    color: var(--kz-tekst);
}

/* ---------- Groeperingen: ronde afbeeldingen ----------
 * De afbeelding (vierkant, meestal met een eigen rode achtergrond) vult de
 * cirkel helemaal, optioneel met een dunne rand (wit op een rode achtergrond).
 * De naam staat eronder in Work Sans, gewone letters.
 *
 * Bewust NIET de klasse .kz-groep: die heeft op de site nog eigen Custom CSS
 * van de oude WPBakery-grid (ronde uitsnede van het hele item), die de naam
 * afknipt. Daarom ook de resets hieronder tegen CSS van het thema.
 */

.kz-groeperingen {
    /* Flex in plaats van grid: een niet volle onderste rij staat zo in het
       midden. --kz-k is het aantal per rij, --kz-g de ruimte ertussen. */
    --kz-k: var(--kz-kol, 6);
    --kz-g: var(--kz-ruimte, 15px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--kz-g);
    row-gap: var(--kz-rij-ruimte, 40px);
}

.kz-groeperingen > .kz-groepering {
    flex: 0 0 calc((100% - (var(--kz-k) - 1) * var(--kz-g)) / var(--kz-k));
    max-width: calc((100% - (var(--kz-k) - 1) * var(--kz-g)) / var(--kz-k));
}

@media (max-width: 1024px) {
    .kz-groeperingen {
        --kz-k: var(--kz-kol-tablet, 4);
    }
}

.kz-groeperingen .kz-groepering,
.kz-groeperingen .kz-groepering > a {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
}

.kz-groeperingen .kz-grid__titel {
    margin-top: 14px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    letter-spacing: 0.03em;
    line-height: 1.45;
    text-align: center;
    text-transform: none;
}

.kz-groeperingen .kz-groepering__foto {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kz-groeperingen .kz-groepering__foto img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
}

.kz-groeperingen--cirkel-rood .kz-groepering__foto { background: #e53935; }
.kz-groeperingen--cirkel-wit .kz-groepering__foto  { background: #ffffff; }

.kz-groeperingen--rand-wit .kz-groepering__foto  { border: 2px solid #ffffff; }
.kz-groeperingen--rand-rood .kz-groepering__foto { border: 2px solid #e53935; }

/* Hover: groter en een slag gedraaid, met een klein veer-effect. De naam
   draait niet mee. */
.kz-groeperingen .kz-groepering:hover,
.kz-groeperingen .kz-groepering:focus-within {
    position: relative;
    z-index: 2;
}

.kz-groepering > a:hover .kz-groepering__foto,
.kz-groepering > a:focus-visible .kz-groepering__foto {
    transform: scale(1.15) rotate(-8deg);
}

@media (max-width: 767px) {
    .kz-groeperingen {
        --kz-k: var(--kz-kol-mobiel, 3);
        --kz-g: min(var(--kz-ruimte, 15px), 15px);
        row-gap: min(var(--kz-rij-ruimte, 40px), 24px);
    }

    .kz-groeperingen .kz-grid__titel {
        margin-top: 8px;
        font-size: 0.9em;
        letter-spacing: 0;
    }
}

/* ---------- Nieuws ---------- */

.kz-nieuws__foto {
    display: block;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
}

.kz-nieuws--liggend  .kz-nieuws__foto { aspect-ratio: 3 / 2; }
.kz-nieuws--breed    .kz-nieuws__foto { aspect-ratio: 16 / 9; }
.kz-nieuws--vierkant .kz-nieuws__foto { aspect-ratio: 1 / 1; }
.kz-nieuws--staand   .kz-nieuws__foto { aspect-ratio: 4 / 5; }
.kz-nieuws--eigen    .kz-nieuws__foto--leeg { aspect-ratio: 3 / 2; }

.kz-nieuws__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.kz-nieuws--eigen .kz-nieuws__foto img {
    height: auto;
}

.kz-nieuws__item > a:hover .kz-nieuws__foto img,
.kz-nieuws__item > a:focus-visible .kz-nieuws__foto img {
    transform: scale(1.05);
}

.kz-nieuws__datum {
    display: block;
    margin-top: 10px;
    font-size: 0.85em;
    opacity: 0.8;
    color: var(--kz-tekst);
}

.kz-nieuws__datum + .kz-grid__titel {
    margin-top: 4px;
}

.kz-nieuws__tekst {
    display: block;
    margin-top: 6px;
    font-family: 'Work Sans', sans-serif;
    font-size: 0.95em;
    line-height: 1.45;
    color: var(--kz-tekst);
}

.kz-grid--rood .kz-nieuws__tekst {
    color: #333333;
}

@media (prefers-reduced-motion: reduce) {
    .kz-groepering__foto,
    .kz-nieuws__foto img {
        transition: none;
    }
}

/* ---------- Paginering ---------- */

.kz-grid-paginering {
    margin-top: 40px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
}

.kz-grid-paginering ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-grid-paginering li {
    margin: 0;
    padding: 0;
}

.kz-grid-paginering li::before {
    content: none;
}

.kz-grid-paginering a,
.kz-grid-paginering span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 2px solid var(--kz-pag, #e53935);
    color: var(--kz-pag, #e53935);
    text-decoration: none;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.kz-grid-paginering--wit { --kz-pag: #ffffff; --kz-pag-tegen: #e53935; }
.kz-grid-paginering--rood { --kz-pag: #e53935; --kz-pag-tegen: #ffffff; }

.kz-grid-paginering a:hover,
.kz-grid-paginering a:focus-visible,
.kz-grid-paginering .kz-grid-paginering__huidig {
    background: var(--kz-pag, #e53935);
    color: var(--kz-pag-tegen, #ffffff);
}

.kz-grid-paginering .kz-grid-paginering__puntjes {
    border-color: transparent;
}

.kz-grid-paginering__pijl {
    font-size: 1.4em;
}