/**
 * Image & Gallery (Figma: SECTIONS → Image & Gallery).
 *
 * Fullwidth (.ptrn-video): video of foto over de volle breedte, 800px
 * hoog, verloop van doorzichtig naar 70% zwart; in het midden label, kop
 * (wit, 1–2 regels) en een roze afspeelknop van 72px.
 * Slider (.ptrn-gallery): Kadence-galerij (fluid carousel), beeld 668
 * hoog met de buren aan de zijkanten, 40px ertussen, stipjes eronder.
 * Masonry Grid (.ptrn-imagestext): collage van drie beelden links, kop
 * (H2), tekst en knop rechts in een kolom van 462px.
 * Carrousel (.ptrn-textgallery): AC-grijze band, kop links en intro rechts,
 * 80px lager een rij beelden (512 hoog, 16px ertussen) van rand tot
 * rand.
 *
 * Tussenruimte en hoogte van de galerijen staan in de patronen zelf
 * (Kadence rekent daarmee); hier de rest.
 */

/* ---------------------------------------------------------------
   Fullwidth (video)
   --------------------------------------------------------------- */
.ptrn-video {
    > .kt-row-layout-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%) !important;
        opacity: 1 !important;
    }

    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        min-height: 800px;
        align-content: center;
        padding-block: 80px !important;
    }

    :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        align-items: center;
        text-align: center;
    }

    .carmel-label,
    .carmel-label__text {
        color: var(--alma-neutral-0) !important;
    }

    .wp-block-carmel-core-label {
        margin: 0 0 16px !important;
    }

    h2 {
        max-width: 640px;
        margin: 0 auto 32px !important;
        color: var(--alma-neutral-0) !important;
    }

    /* afspeelknop: roze rondje met wit driehoekje */
    :is(.kb-buttons-wrap, .kb-btns-outer-wrap) {
        justify-content: center !important;
    }

    /* deze knop heeft op de voorkant geen .wp-block-button__link */
    :is(.kb-button, .kt-button) {
        width: 72px;
        height: 72px;
        min-height: 72px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: radial-gradient(120% 120% at 0 0, var(--alma-roze) 30%, var(--alma-donker-blauw) 130%) !important;
        color: var(--alma-neutral-0) !important;
        transition: transform 0.2s;

        &:is(:hover, :focus-visible) {
            transform: scale(1.08);
        }

        :is(.kb-svg-icon-wrap, .kt-btn-svg-icon) {
            width: auto !important;
            height: auto !important;
            background: none !important;
            color: inherit !important;
        }

        svg {
            width: 24px !important;
            height: 24px !important;
            margin-left: 3px; /* driehoekje optisch in het midden */
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .ptrn-video :is(.kb-button, .kt-button) {
        transition: none;
    }
}

/* ---------------------------------------------------------------
   Slider en Carrousel: beelden en stipjes
   --------------------------------------------------------------- */
:is(.ptrn-gallery, .ptrn-textgallery) {
    .kb-gallery-ul img {
        object-fit: cover;
    }

    .splide__pagination {
        gap: 8px;
        bottom: auto;
        margin-top: 40px;
        position: static;
    }

    .splide__pagination__page {
        width: 10px !important;
        height: 10px !important;
        margin: 0 !important;
        border: 0 !important;
        background: var(--alma-neutral-300) !important;
        opacity: 1 !important;
        transform: none !important;

        &.is-active {
            background: var(--alma-licht-blauw) !important;
        }
    }
}

/* ---------------------------------------------------------------
   Carrousel: grijze band, kop + intro, beelden van rand tot rand
   --------------------------------------------------------------- */
.ptrn-textgallery {
    /* band over de volle breedte, inhoud in de container */
    background-color: var(--alma-ac-grijs);
    box-shadow: 0 0 0 100vmax var(--alma-ac-grijs);
    clip-path: inset(0 -100vmax);

    /* "brede" rij (de plugin maakt die schermbreed): de inhoud terug in
       de container, gecentreerd */
    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: var(--global-content-width, 1471px) !important;
        margin-inline: auto !important;
        padding: 120px var(--global-content-edge-padding, 16px) !important;
    }

    :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        padding-inline: 0;
    }

    /* kop links, intro rechts tegen de rechterrand (de rij met de
       galerij heeft de klasse .text-gallery-gallery) */
    .wp-block-kadence-rowlayout:not(.text-gallery-gallery) {
        margin: 0 0 80px !important;

        > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
            column-gap: 80px !important;
            align-items: start;
            padding: 0 !important;
        }

        p {
            max-width: 446px;
            margin: 0 0 0 auto !important;
            font-size: var(--carmel-font-size-body-medium) !important;
            line-height: 1.4 !important;
            color: var(--alma-donker-blauw);
        }
    }

    h2 {
        margin: 0 !important;
    }

    /* de rij met de galerij: één kolom, geen eigen ruimte */
    .text-gallery-gallery {
        margin: 0 !important;

        > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            grid-template-columns: minmax(0, 1fr) !important;
            padding: 0 !important;
        }
    }

    /* de galerij loopt door tot de schermrand */
    .wp-block-kadence-advancedgallery {
        position: relative;
        left: 50%;
        width: calc(100vw - var(--carmel-scrollbar-width, 15px)) !important;
        max-width: none !important;
        margin-inline: 0 !important;
        translate: -50% 0; /* gecentreerd op de pagina, van rand tot rand */
    }
}

/* editor: geen uitbraak (100vw is daar breder dan het canvas) */
.editor-styles-wrapper .ptrn-textgallery .wp-block-kadence-advancedgallery {
    left: auto;
    width: auto !important;
    translate: none;
}

/* ---------------------------------------------------------------
   Masonry Grid
   --------------------------------------------------------------- */
.ptrn-imagestext {
    > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) 462px !important;
        column-gap: 184px !important; /* 1440: collage 794, tekst 462 */
        align-items: center;
        padding: 0 !important;
    }

    figure,
    figure img {
        border-radius: var(--carmel-radius-md);
    }

    figure {
        overflow: hidden;
    }

    h2 {
        margin: 0 0 24px !important;
    }

    .js-imgtext-content p {
        margin: 0 !important;
        font-size: var(--carmel-font-size-body-medium) !important;
        line-height: 1.4 !important;
        color: var(--alma-donker-blauw);
    }

    :is(.kb-buttons-wrap, .kb-btns-outer-wrap) {
        margin-top: 40px !important;
    }
}

@media (max-width: 1024px) {
    .ptrn-imagestext > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 48px !important;
    }

    .ptrn-textgallery .wp-block-kadence-rowlayout:not(.text-gallery-gallery) > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 24px !important;
    }

    .ptrn-textgallery .wp-block-kadence-rowlayout:not(.text-gallery-gallery) p {
        max-width: none;
        margin-left: 0 !important;
    }
}

@media (max-width: 767px) {
    .ptrn-video > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        min-height: 540px;
    }

    .ptrn-video :is(.kb-button, .kt-button) {
        width: 56px;
        height: 56px;
        min-height: 56px;
    }

    .ptrn-textgallery {
        > :is(.kt-row-column-wrap, .innerblocks-wrap) {
            padding-block: 64px !important;
        }

        .wp-block-kadence-rowlayout:not(.text-gallery-gallery) {
            margin-bottom: 40px !important;
        }
    }

    .ptrn-imagestext > :is(.kt-row-column-wrap, .innerblocks-wrap) {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 40px !important;
    }

    .ptrn-imagestext .js-imgtext-content p {
        font-size: var(--carmel-font-size-body-medium-mobile) !important;
    }
}