/*
 * Front-end opmaak voor sectie-opties van de kolommen-plugin (1.5+).
 *
 * Overgenomen uit het moderne leflite thema, assets/css/base/section.scss
 * (startthema2, commit 56067665). Alleen wat het oude thema niet heeft; de
 * basis (section, .background-image-wrapper, img-regels, .bg-<kleur>) komt uit
 * de app.css van het thema zelf.
 *
 * Breakpoints zoals in het thema (Bootstrap 4):
 *   media-breakpoint-down(md) = max-width: 991.98px
 *   media-breakpoint-up(md)   = min-width: 768px
 *   @include mobile           = max-width: 991px
 */

/* ---------------------------------------------------------------------------
 * Achtergrondvideo — section.scss:37-89
 * Het oude thema stylet alleen <img> in de achtergrondlaag.
 * ------------------------------------------------------------------------- */

section .background-image-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

section .background-image-wrapper iframe.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 16:9 cover met 1.3× overscan, zodat YouTube's titel en watermerk buiten beeld vallen. */
    width: calc(max(100vw, 177.78vh) * 1.3);
    height: calc(max(56.25vw, 100vh) * 1.3);
    border: 0;
    pointer-events: none;
    /* Onzichtbaar tot de video speelt; zie background-video.js. */
    --lef-bg-video-opacity: 1;
    opacity: 0;
    animation: lef-bg-video-fade-in 0.6s ease 1.6s forwards;
}

section .background-image-wrapper.bg-align-top video {
    object-position: top;
}

section .background-image-wrapper.bg-align-bottom video {
    object-position: bottom;
}

@keyframes lef-bg-video-fade-in {
    to {
        opacity: var(--lef-bg-video-opacity);
    }
}

/*
 * "Volledige achtergrond + Overlay" met video — section.scss:95-111.
 * Het oude thema dimt alleen de <img> (opacity), waardoor een video er vol
 * overheen zou spelen. Met video gebruiken we de laag van het moderne thema:
 * afbeelding en video dekkend, sectiekleur als laag erbovenop. Zelfde
 * eindbeeld als de oude opacity van 0.1 op de afbeelding.
 * Zonder video blijft alles bij de opmaak van het thema.
 */
section.full-background-overlay .background-image-wrapper:has(.background-video) {
    background-color: inherit;
}

section.full-background-overlay .background-image-wrapper:has(.background-video) img {
    opacity: 1;
}

section.full-background-overlay .background-image-wrapper:has(.background-video)::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: inherit;
    opacity: var(--lef-editor-compat-overlay-tint, 0.9);
}

/* 50/50-layouts: video op dezelfde helft als de afbeelding — section.scss:206-229 */
section.half-background-half-overlay .background-image-wrapper video,
section.half-overlay-half-background .background-image-wrapper video {
    left: 50%;
    width: 50%;
}

section.half-background-half-overlay .background-image-wrapper video {
    left: 0;
}

@media (max-width: 991.98px) {
    section.half-background-half-overlay .background-image-wrapper video,
    section.half-overlay-half-background .background-image-wrapper video {
        width: 100%;
        left: 0;
    }

    /* section.scss:266-272 — vangnet; het echte niet-laden op mobiel doet de kolommen-plugin server-side. */
    section.section-no-video-mobile .background-video {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
 * Gradient-overlays (kolommen-plugin 1.7.2) — section.scss:144-205
 * De sectiekleur loopt vanaf één rand over het beeld uit naar transparant.
 * Bijsturen per site met --section-gradient-opacity en --section-gradient-reach.
 * ------------------------------------------------------------------------- */

section.full-background-gradient-left .background-image-wrapper,
section.full-background-gradient-right .background-image-wrapper,
section.full-background-gradient-top .background-image-wrapper,
section.full-background-gradient-bottom .background-image-wrapper {
    background-color: inherit;
}

section.full-background-gradient-left .background-image-wrapper::after,
section.full-background-gradient-right .background-image-wrapper::after,
section.full-background-gradient-top .background-image-wrapper::after,
section.full-background-gradient-bottom .background-image-wrapper::after {
    --lef-gradient-reach: var(--section-gradient-reach, 75%);
    --lef-gradient-mask: linear-gradient(
        var(--lef-gradient-direction),
        #000 0%,
        rgba(0, 0, 0, 0.75) calc(var(--lef-gradient-reach) * 0.3),
        rgba(0, 0, 0, 0.3) calc(var(--lef-gradient-reach) * 0.65),
        transparent var(--lef-gradient-reach)
    );
    content: '';
    position: absolute;
    inset: 0;
    background-color: inherit;
    opacity: var(--section-gradient-opacity, 0.9);
    -webkit-mask-image: var(--lef-gradient-mask);
    mask-image: var(--lef-gradient-mask);
}

section.full-background-gradient-left .background-image-wrapper::after {
    --lef-gradient-direction: to right;
}

section.full-background-gradient-right .background-image-wrapper::after {
    --lef-gradient-direction: to left;
}

section.full-background-gradient-top .background-image-wrapper::after {
    --lef-gradient-direction: to bottom;
}

section.full-background-gradient-bottom .background-image-wrapper::after {
    --lef-gradient-direction: to top;
}

/* Op mobiel loopt tekst over de volle breedte: links/rechts blijft tot de overkant deels dekkend. */
@media (max-width: 991.98px) {
    section.full-background-gradient-left .background-image-wrapper::after,
    section.full-background-gradient-right .background-image-wrapper::after {
        --lef-gradient-mask: linear-gradient(
            var(--lef-gradient-direction),
            #000 0%,
            rgba(0, 0, 0, 0.6) 100%
        );
    }
}

/* ---------------------------------------------------------------------------
 * Zichtbaarheid per apparaat — section.scss:283-290
 * De utility `.mobile-only` van het thema erft het display van de ouder; een
 * sectie verliest zo haar flex en een kolom zet haar inhoud naast elkaar.
 * ------------------------------------------------------------------------- */

@media only screen and (max-width: 991px) {
    section.lef-section.mobile-only {
        display: flex;
    }

    .lef-section .row > .mobile-only {
        display: block;
    }
}

/* ---------------------------------------------------------------------------
 * Kolommen naast elkaar op mobiel/tablet — section.scss:300-313
 * Bootstrap's make-col($i, 12): flex: 0 0 P%; max-width: P%.
 * Alleen directe kolommen van de sectie; geneste rijen blijven stapelen.
 * ------------------------------------------------------------------------- */

.lef-section.cols-nostack-always > .container > .row > .col-lg-1,  .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.lef-section.cols-nostack-always > .container > .row > .col-lg-2,  .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.lef-section.cols-nostack-always > .container > .row > .col-lg-3,  .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-3  { flex: 0 0 25%;         max-width: 25%; }
.lef-section.cols-nostack-always > .container > .row > .col-lg-4,  .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.lef-section.cols-nostack-always > .container > .row > .col-lg-5,  .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.lef-section.cols-nostack-always > .container > .row > .col-lg-6,  .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-6  { flex: 0 0 50%;         max-width: 50%; }
.lef-section.cols-nostack-always > .container > .row > .col-lg-7,  .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.lef-section.cols-nostack-always > .container > .row > .col-lg-8,  .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.lef-section.cols-nostack-always > .container > .row > .col-lg-9,  .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-9  { flex: 0 0 75%;         max-width: 75%; }
.lef-section.cols-nostack-always > .container > .row > .col-lg-10, .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.lef-section.cols-nostack-always > .container > .row > .col-lg-11, .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.lef-section.cols-nostack-always > .container > .row > .col-lg-12, .lef-section.cols-nostack-always > .container-fluid > .row > .col-lg-12 { flex: 0 0 100%;        max-width: 100%; }

@media (min-width: 768px) {
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-1,  .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-2,  .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-3,  .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-3  { flex: 0 0 25%;         max-width: 25%; }
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-4,  .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-5,  .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-6,  .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-6  { flex: 0 0 50%;         max-width: 50%; }
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-7,  .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-8,  .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-9,  .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-9  { flex: 0 0 75%;         max-width: 75%; }
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-10, .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-11, .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .lef-section.cols-nostack-tablet > .container > .row > .col-lg-12, .lef-section.cols-nostack-tablet > .container-fluid > .row > .col-lg-12 { flex: 0 0 100%;        max-width: 100%; }
}