/**
 * News (Figma: SECTIONS → News).
 *
 * News - Carousel (.newsslider + plugin-blok news-slider): kop H2 links,
 * de twee pijlknoppen (56px, donkerblauw) rechts op dezelfde hoogte; 80px
 * lager de kaarten: beeld 464 × 400 (afronding 16), 32px eronder de labels
 * (categorie met lichtblauwe ring, school met roze ring) en 16px daaronder
 * de titel (H5). Drie kaarten naast elkaar binnen de container (zoals
 * BCE; Figma laat ze doorlopen tot de schermrand, bewust niet
 * overgenomen). Mobiel: de plugin laat de volgende kaart rechts
 * piepen.
 *
 * Het schuiven zelf komt uit de plugin (view.js meet de breedtes zelf).
 */

.newsslider {
    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        padding: 0 !important;
    }

    /* kop en pijlen op één regel: de pijlen staan bovenaan rechts in de
       kolom, gelijk met de kop */
    > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        position: relative;
        padding: 0 !important;

        > :is(h1, h2, h3, h4, h5, h6) {
            min-height: 56px;
            margin: 0 0 80px !important;
            padding-right: 160px; /* ruimte voor de pijlen */
            font-size: var(--carmel-font-size-h2) !important;
            line-height: var(--carmel-line-height-h2) !important;
            color: var(--alma-donker-blauw);
        }

        /* de geneste kolom en het blok mogen geen anker zijn */
        .wp-block-kadence-column,
        .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner),
        .carmel-news-slider {
            position: static !important;
        }

        /* BCE-patroon: geneste kolom met eigen (mobiel −51px) marge */
        .wp-block-kadence-column {
            margin: 0 !important;
        }
    }

    .carmel-news-slider__nav {
        position: absolute;
        top: 0;
        right: 0;
        gap: 16px;
        margin: 0;

        button {
            width: 56px;
            height: 56px;
            border: 0;
            background-color: var(--alma-donker-blauw);
            color: var(--alma-neutral-0);
            transition: background-color 0.2s;

            &:is(:hover, :focus-visible) {
                background-color: var(--alma-roze);
            }

            svg {
                width: 14px;
                height: 14px;
            }

            svg path {
                stroke-width: 2;
            }
        }
    }

}

/* De kaart (ook buiten het patroon dezelfde stijl) */
.carmel-news-slider__image {
    margin-bottom: 32px;
    border-radius: var(--carmel-radius-md);

    img {
        transition: transform 0.3s;
    }
}

.carmel-news-slider__link:is(:hover, :focus-visible) .carmel-news-slider__image img {
    transform: scale(1.1);
}

.carmel-news-slider__meta {
    gap: 8px 24px;
    margin-bottom: 0;
}

.carmel-news-slider__badge {
    gap: 8px;
    font-family: var(--carmel-font-body);
    font-size: 16px;
    line-height: 1.2;
    color: var(--alma-donker-blauw);
    opacity: 1 !important;
}

/* ring i.p.v. bolletje, zoals de labels */
.carmel-news-slider__badge-dot {
    box-sizing: border-box;
    background: transparent !important;
    border: 2px solid var(--alma-licht-blauw);
}

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

.carmel-news-slider .carmel-news-slider__title {
    margin: 16px 0 0 !important;
    font-family: var(--carmel-font-heading) !important;
    font-size: var(--carmel-font-size-h5) !important;
    font-weight: 700 !important;
    line-height: var(--carmel-line-height-h5) !important;
    color: var(--alma-donker-blauw) !important;
}

@media (prefers-reduced-motion: reduce) {
    .carmel-news-slider__image img {
        transition: none;
    }
}

@media (max-width: 767px) {
    .newsslider > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        > :is(h1, h2, h3, h4, h5, h6) {
            min-height: 40px;
            margin-bottom: 40px !important;
            padding-right: 104px;
            font-size: var(--carmel-font-size-h2-mobile) !important;
        }
    }

    .newsslider .carmel-news-slider__nav {
        gap: 8px;

        button {
            width: 40px;
            height: 40px;
        }
    }

    .carmel-news-slider__image {
        height: 320px !important;
        margin-bottom: 24px;
    }

    .carmel-news-slider .carmel-news-slider__title {
        font-size: var(--carmel-font-size-h5-mobile) !important;
    }
}