/**
 * Nieuwsoverzicht (pagina Actueel) en de overzichtsrij onder een hero
 * (ook Infohub).
 *
 * Opbouw van die pagina's: hero "tekst gecentreerd" (label + kop) en
 * daaronder een rij met de klasse .alma-overzicht met het plugin-blok
 * (Nieuws-overzicht of Infohub-overzicht).
 *
 * Figma: SECTIONS → News → News Grid. Filters in één witte balk
 * (pill-knoppen, actief donkerblauw, rechts de datum); kaarten in 3
 * kolommen met 40px ertussen: beeld 453 × 315 (afronding 16), 32px
 * eronder het label (ring + categorie, zoals de nieuwsslider) en 16px
 * daaronder de titel (H4).
 */

/* Hero zonder foto eronder: de 220px onderaan is alleen nodig voor de
   foto die over de onderkant valt (hero-text-centered.css). */
.herowrapper.hero-text-centered:not(:has(+ .hero-text-centered-image)) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
    padding-bottom: 0 !important;
}

/* Overzichtsrij: ruimte onder de hero, inhoud even breed als de hero-foto
   (1200px), gecentreerd. Onderaan de gewone sectie-afstand (120px). */
.alma-overzicht {
    margin-top: var(--carmel-space-xl) !important;

    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        max-width: 1200px;
        margin-inline: auto;
        padding: 0 24px !important;
    }
}

/* Het blok los op een pagina (patroon News - Grid, geen rij eromheen):
   zelfde sectie-afstand eronder als een rij. */
:is(.entry-content, .is-root-container) > .wp-block-carmel-core-nieuws-overzicht {
    margin-bottom: var(--section-gap) !important;
}

/* ---------------------------------------------------------------
   Filters: één witte balk met links de categorieën (pill-knoppen) en
   rechts de datum.
   --------------------------------------------------------------- */
.carmel-nieuws-overzicht__filters {
    margin-bottom: var(--carmel-space-lg);
    padding: 8px;
    background-color: var(--alma-neutral-0);
    border-radius: var(--alma-radius-xl);
}

.carmel-nieuws-overzicht__tabs {
    gap: 4px;
    padding: 0;
    background: transparent;
}

.carmel-nieuws-overzicht__tab {
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    background: transparent;
    color: var(--alma-donker-blauw);
    font-family: var(--carmel-font-body);
    font-size: 16px;
    font-weight: var(--carmel-font-weight-medium);
    line-height: 100%;
    transition: background-color 0.2s, color 0.2s;

    &:hover {
        background-color: var(--alma-ac-grijs);
    }

    &.is-active {
        background: var(--alma-donker-blauw);
        color: var(--alma-neutral-0);
    }
}

.carmel-nieuws-overzicht__secondary-filters {
    padding-right: 16px;
}

.carmel-nieuws-overzicht__date.js-date-display {
    background-color: transparent;
}

.carmel-nieuws-overzicht__date-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--carmel-font-body);

    .carmel-nieuws-overzicht__date-overlay-label {
        font-size: 12px;
        line-height: 100%;
        color: var(--alma-neutral-500);
    }

    .carmel-nieuws-overzicht__date-overlay-value {
        font-size: 16px;
        font-weight: var(--carmel-font-weight-medium);
        line-height: 100%;
        color: var(--alma-donker-blauw);
    }
}

.carmel-nieuws-overzicht__date-input[type=date] {
    border: none;
    background: transparent;
    cursor: pointer;
    width: 44px;
}

/* Lege staat */
.carmel-nieuws-overzicht__empty,
.carmel-nieuws-overzicht > p {
    font-family: var(--carmel-font-body);
    color: var(--alma-donker-blauw);
}

/* ---------------------------------------------------------------
   Kaarten: zelfde hover als elders (afbeelding zoomt licht in binnen het
   afgeronde kader).
   --------------------------------------------------------------- */
.carmel-nieuws-overzicht__item {
    .carmel-nieuws-overzicht__image {
        overflow: hidden;
        aspect-ratio: 453 / 315;
        margin-bottom: 32px;
        border-radius: var(--carmel-radius-md);

        img {
            width: 100%;
            height: 100% !important;
            object-fit: cover;
            transition: transform 0.3s;
        }
    }

    &:is(:hover, :focus-visible) .carmel-nieuws-overzicht__image img {
        transform: scale(1.1);
    }
}

/* label: ring + categorie, zoals bij de nieuwsslider (news.css) */
.carmel-nieuws-overzicht__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0 0 16px !important;
}

.carmel-nieuws-overzicht__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--carmel-font-body);
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2;
    letter-spacing: 0 !important;
    text-transform: none !important; /* plugin: kleine hoofdletters */
    color: var(--alma-donker-blauw);
    opacity: 1 !important;
}

.carmel-nieuws-overzicht__badge-dot {
    box-sizing: border-box;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    background: transparent !important;
    border: 2px solid var(--alma-licht-blauw);
}

.carmel-nieuws-overzicht__badge--school .carmel-nieuws-overzicht__badge-dot {
    border-color: var(--alma-roze);
}

.carmel-nieuws-overzicht__title {
    margin: 0 !important;
    font-family: var(--carmel-font-heading) !important;
    font-size: var(--carmel-font-size-h4) !important;
    line-height: var(--carmel-line-height-h4, 120%) !important;
    color: var(--alma-donker-blauw);
}

@media (prefers-reduced-motion: reduce) {
    .carmel-nieuws-overzicht__item .carmel-nieuws-overzicht__image img {
        transition: none;
    }
}

@media (max-width: 767px) {
    .carmel-nieuws-overzicht__filters {
        border-radius: var(--carmel-radius-md);
    }

    .carmel-nieuws-overzicht__secondary-filters {
        padding: 0 8px 8px;
    }
}