/**
 * featured-events: de sectie "Agenda" op de homepage, met een Swiper-carousel
 * van de eerstvolgende activiteiten uit The Events Calendar.
 * Wordt via block.json conditioneel geladen; alleen pagina's met dit blok
 * krijgen deze CSS.
 */

.featured-events-section {
    padding-top: var(--wp--preset--spacing--80);
    /* Figma 4222:4 houdt 110px onder de navknoppen; 176px was een los getal. */
    padding-bottom: var(--wp--preset--spacing--90);
}

/*
 * De begrenzing op 1504px komt van supports.layout in block.json. WordPress
 * genereert die ook voor een dynamisch blok: gemeten levert het blok
 * has-global-padding, is-layout-constrained en een wp-container-...-klasse,
 * met dezelfde > :where(...)-regel op de kinderen.
 *
 * Die klassen komen alleen van de front-end: ze worden gezet door een
 * render_block-filter, en de editor-preview van ACF rendert buiten
 * render_block(). Gemeten geeft de preview wel alignfull en de achtergrondkleur
 * (die lopen via de wrapper-attributen) maar geen layout-klassen. Deze regel
 * vult dat gat en raakt de front-end niet, want daar staat
 * is-layout-constrained wel op de sectie. *
 * Dit getal staat op VIER plekken: als max-width hier en in het zusterblok, en als
 * layout.contentSize in allebei hun block.json. CSS kan die laatste twee niet
 * leveren en block.json deze twee niet, dus ze moeten met de hand gelijk blijven.
 * Wijzig je er een, loop dan alle vier na.
 */
.featured-events-section:not(.is-layout-constrained) > * {
    max-width: 1504px;
    margin-right: auto;
    margin-left: auto;
}

/*
 * Carousel: overgenomen uit src/block-library/featured-events/style.scss (het
 * oude JS-blok), platgeslagen naar losse selectors met een ouderselector op
 * elke BEM-regel - een kale .wp-block-featured-events__x is 0,1,0 en verliest
 * anders van de global styles op bronvolgorde.
 *
 * Het CSS-first-patroon hieronder (scrollbar verbergen, flex-rij, en
 * .swiper-initialized die het overneemt) staat bijna verbatim ook in
 * src/block-library/instagram-reel/style.scss. Bewust niet in één gedeelde laag:
 * die twee lopen door verschillende buildpipelines, dit bestand als platte CSS en
 * dat als SCSS door webpack. Wijzig je het patroon hier, kijk dan daar ook.
 */
.wp-block-featured-events__carousel {
    container-type: inline-size;
}

/*
 * Zonder JS al een bruikbare rij, Swiper verrijkt hem daarna.
 *
 * Dit stond hier eerst niet, en dan kwam display: flex uitsluitend uit Swiper's
 * eigen stylesheet. Die laadt view.js at runtime, en view.js is viewScript en
 * draait dus niet in de editor. Gemeten: in de blokeditor kwam de flex-regel
 * daardoor van het Instagram-blok, dat toevallig op dezelfde pagina staat en
 * zijn Swiper-CSS in het canvas injecteerde. Zonder dat blok viel .swiper-wrapper
 * terug op display: block en werd de sectie 3398px hoog in plaats van 792px.
 * Een blok hoort niet van een buurblok af te hangen.
 */
.wp-block-featured-events .swiper {
    overflow-x: auto;
    scrollbar-width: none;
}

.wp-block-featured-events .swiper::-webkit-scrollbar {
    display: none;
}

.wp-block-featured-events .swiper-wrapper {
    display: flex;
    gap: 20px;
}

/*
 * max() en geen media queries: vier kaarten zodra de container breed genoeg is,
 * en anders minstens 260px zodat er op smal scherm ruim één kaart plus een stukje
 * van de volgende staat. Dat scheelt het dupliceren van de breakpoints uit
 * view.js, die Swiper hierna toch met inline breedtes overschrijft.
 */
.wp-block-featured-events .swiper-slide {
    flex: 0 0 auto;
    width: max(260px, calc((100cqw - 60px) / 4));
}

/* Swiper zet zelf overflow en de tussenruimte (spaceBetween wordt een margin). */
.wp-block-featured-events .swiper-initialized {
    overflow: hidden;
}

.wp-block-featured-events .swiper-initialized .swiper-wrapper {
    gap: 0;
}

/*
 * Doorloopkaart: op groot scherm loopt de carousel rechts door tot de
 * viewportrand, zodat de volgende kaart half zichtbaar is. Gemeten in Figma
 * 4205:3044: vier kaarten van 361px vullen de 1504-container exact, de vijfde
 * begint op x=1731 en wordt door de viewport afgesneden.
 * Drempel 1600px: daaronder is het paginamargin te smal (16-48px) voor een
 * leesbare peek, daar doet de fractionele slidesPerView uit view.js het werk.
 */
@media (min-width: 1600px) {
    .wp-block-featured-events .swiper {
        /*
         * --opw-fe-bleed wordt in view.js gemeten als het paginamargin rechts
         * van dit blok. Bewust geen calc(50% - 50vw): vw telt een klassieke
         * scrollbar mee, en dat gaf 8px paginabrede horizontale scroll.
         */
        margin-right: calc(-1 * var(--opw-fe-bleed, 0px));
    }
}

/*
 * Niet-volledig zichtbare kaart vervaagt; dat is het signaal dat er meer is.
 * Figma meet 26% dekking op de doorloopkaart. Pas ná init, anders staat de
 * hele rij even op 26% voordat Swiper zijn classes zet.
 */
.wp-block-featured-events .swiper-initialized .swiper-slide:not(.swiper-slide-fully-visible) {
    opacity: 0.26;
    transition: opacity 200ms ease;
}

/*
 * Een kaart die je met Tab bereikt moet leesbaar zijn, ook als Swiper hem nog
 * als niet-volledig-zichtbaar telt. Zonder deze regel stond de gefocuste kaart
 * op 26% dekking, inclusief zijn focusring. Swiper's A11y-module schuift de
 * carousel er daarna naartoe (modules/a11y.mjs:222).
 */
.wp-block-featured-events .swiper-initialized .swiper-slide:focus-visible {
    opacity: 1;
}

/*
 * Swiper's eigen CSS zet .swiper-slide op height: 100%, en die chunk laadt at
 * runtime, dus ná deze stylesheet. Bij gelijke specificiteit wint Swiper dan,
 * en een percentage blokkeert align-items: stretch waar auto dat niet doet.
 * Deze selector is (0,2,0) en wint wel.
 */
.wp-block-featured-events .swiper-slide {
    height: auto;
}

.wp-block-featured-events .wp-block-featured-events__card {
    display: flex;
    flex-direction: column;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    text-decoration: none;
}

.wp-block-featured-events .wp-block-featured-events__media {
    position: relative;
    display: block;
    aspect-ratio: 361 / 271;
    overflow: hidden;
}

.wp-block-featured-events .wp-block-featured-events__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wp-block-featured-events .wp-block-featured-events__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    padding: 20px;
}

/*
 * Eén regel, ook bij een lange locatienaam. In Figma staat de meta altijd op
 * één regel en liggen alle kaarttitels op dezelfde hoogte; live duwde
 * "Buurt- en speeltuinvereniging Ons Belang" die ene titel een regel omlaag.
 */
.wp-block-featured-events .wp-block-featured-events__meta {
    /*
     * De titel staat vóór de meta in de DOM, zodat de toegankelijke naam van de
     * kaartlink met de activiteitennaam begint. order zet de meta visueel weer
     * boven de titel; __body is al een flex-kolom.
     */
    order: -1;
    overflow: hidden;
    color: var(--wp--preset--color--gray-500);
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 600;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/*
 * margin: 0 is dragend sinds de titel een <h3> is. De global styles zetten
 * :root :where(.wp-block-post-content h3){margin-top: 2.5rem} op 0,1,0; deze
 * selector is 0,2,0 en wint, maar alleen als hij de marge ook echt zet.
 */
.wp-block-featured-events .wp-block-featured-events__title {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 700;
    line-height: 1.4;
}

.wp-block-featured-events .wp-block-featured-events__card:hover .wp-block-featured-events__title,
.wp-block-featured-events .wp-block-featured-events__card:focus .wp-block-featured-events__title {
    text-decoration: underline;
}

.wp-block-featured-events .wp-block-featured-events__nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.wp-block-featured-events .wp-block-featured-events__nav-button {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    cursor: pointer;
    place-items: center;
}

.wp-block-featured-events .wp-block-featured-events__nav-button:hover,
.wp-block-featured-events .wp-block-featured-events__nav-button:focus-visible {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
}

.wp-block-featured-events .wp-block-featured-events__nav-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.wp-block-featured-events .wp-block-featured-events__nav-button svg {
    width: 32px;
    height: 32px;
}

.wp-block-featured-events .wp-block-featured-events__nav-prev svg {
    transform: rotate(180deg);
}