/**
 * Wux Grid CSS 2.2 - Geoptimaliseerd & Genest
 */

:root {
    --grid-columns: 12;
    --inline-spacing: clamp(1.8rem, 2.8vw, 3.2rem);
    --row-gap: 2rem;
}

/*** ---------- Containers ---------- ***/
.container,
.container-fluid {
    --wpb-width: var(--container-width);
    width: 100%;
    max-width: var(--wpb-width);
    margin-inline: auto;
    padding-inline: var(--inline-spacing);
    position: relative;
}

/* Responsive container widths */
@media (min-width: 576px) {
    body { --wp--style--global--content-size: var(--container-width--sm); }
    .container { --wpb-width: var(--container-width--sm); }
}
@media (min-width: 768px) {
    body { --wp--style--global--content-size: var(--container-width--md); }
    .container { --wpb-width: var(--container-width--md); }
}
@media (min-width: 992px) {
    body { --wp--style--global--content-size: var(--container-width--lg); }
    .container { --wpb-width: var(--container-width--lg); }
    .container.container--xsmall { --wpb-width: 696px; }
}
@media (min-width: 1200px) {
    body { --wp--style--global--content-size: var(--container-width--xl); }
    .container { --wpb-width: var(--container-width--xl); }
    .container.container--xsmall { --wpb-width: 696px; }
    .container.container--small { --wpb-width: 960px; }
    .container.container--medium { --wpb-width: 1030px; }
}
@media (min-width: 1400px) {
    body { --wp--style--global--content-size: var(--container-width--xxl); }
    .container { --wpb-width: var(--container-width--xxl); }
    .container.container--xsmall { --wpb-width: 696px; }
    .container.container--small { --wpb-width: 960px; }
    .container.container--medium { --wpb-width: 1140px; }
}
@media (min-width: 1600px) {
    body { --wp--style--global--content-size: var(--container-width--xxxl); }
    .container { --wpb-width: var(--container-width--xxxl); }
    .container.container--xsmall { --wpb-width: 696px; }
    .container.container--small { --wpb-width: 960px; }
    .container.container--medium { --wpb-width: 1236px; }
    .container.container--large { --wpb-width: 1500px; }
}

/*** ---------- Grid System ---------- ***/
.row {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--inline-spacing);
    row-gap: var(--row-gap);

    /* Gaps Genest */
    &.gap--8  { --inline-spacing: 0.8rem; --row-gap: calc(var(--inline-spacing) * 2); }
    &.gap--16 { --inline-spacing: 1.6rem; --row-gap: calc(var(--inline-spacing) * 2); }
    &.gap--32 { --inline-spacing: 3.2rem; --row-gap: calc(var(--inline-spacing) * 2); }

    @media (min-width: 992px) {
        &.gap--lg-8  { --inline-spacing: 0.8rem; }
        &.gap--lg-16 { --inline-spacing: 1.6rem; }
        &.gap--lg-32 { --inline-spacing: 3.2rem; }
        &.gap--lg-48 { --inline-spacing: 4.8rem; }
        &.gap--lg-64 { --inline-spacing: 6.4rem; }
    }

    @media (min-width: 1200px) {
        &.gap--xl-8  { --inline-spacing: 0.8rem; }
        &.gap--xl-16 { --inline-spacing: 1.6rem; }
        &.gap--xl-32 { --inline-spacing: 3.2rem; }
        &.gap--xl-48 { --inline-spacing: 4.8rem; }
        &.gap--xl-64 { --inline-spacing: 6.4rem; }
    }

    @media (min-width: 1400px) {
        &.gap--xxl-8  { --inline-spacing: 0.8rem; }
        &.gap--xxl-16 { --inline-spacing: 1.6rem; }
        &.gap--xxl-32 { --inline-spacing: 3.2rem; }
        &.gap--xxl-48 { --inline-spacing: 4.8rem; }
        &.gap--xxl-64 { --inline-spacing: 6.4rem; }
        &.gap--xxl-90 { --inline-spacing: 9rem; }
    }
}

.row > .col {
    grid-column: span var(--col-span, var(--grid-columns));
}

/*** ---------- Alignment Utilities ---------- ***/
.align-start, .align-top { align-items: start; }
.align-center { align-items: center; }
.align-end, .align-bottom { align-items: end; }

.justify-start { justify-content: start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: end; }
.justify-between { justify-content: space-between; }

/*** ---------- Order Utilities (Genest) ---------- ***/
.col {
    &.order-0 { order: 0; }
    &.order-1 { order: 1; }

    @media (min-width: 576px) {
        &.order-sm-0 { order: 0; }
        &.order-sm-1 { order: 1; }
    }
    @media (min-width: 768px) {
        &.order-md-0 { order: 0; }
        &.order-md-1 { order: 1; }
    }
    @media (min-width: 992px) {
        &.order-lg-0 { order: 0; }
        &.order-lg-1 { order: 1; }
    }
}

/*** ---------- Column Spans (Genest) ---------- ***/
.col {
    /* Basis (0px+) */
    &.col--1  { --col-span: 1; }
    &.col--2  { --col-span: 2; }
    &.col--3  { --col-span: 3; }
    &.col--4  { --col-span: 4; }
    &.col--5  { --col-span: 5; }
    &.col--6  { --col-span: 6; }
    &.col--7  { --col-span: 7; }
    &.col--8  { --col-span: 8; }
    &.col--9  { --col-span: 9; }
    &.col--10 { --col-span: 10; }
    &.col--11 { --col-span: 11; }
    &.col--12 { --col-span: 12; }

    /* SM breakpoint (576px+) */
    @media (min-width: 576px) {
        &.col--sm-1  { --col-span: 1; }
        &.col--sm-2  { --col-span: 2; }
        &.col--sm-3  { --col-span: 3; }
        &.col--sm-4  { --col-span: 4; }
        &.col--sm-5  { --col-span: 5; }
        &.col--sm-6  { --col-span: 6; }
        &.col--sm-7  { --col-span: 7; }
        &.col--sm-8  { --col-span: 8; }
        &.col--sm-9  { --col-span: 9; }
        &.col--sm-10 { --col-span: 10; }
        &.col--sm-11 { --col-span: 11; }
        &.col--sm-12 { --col-span: 12; }
    }

    /* MD breakpoint (768px+) */
    @media (min-width: 768px) {
        &.col--md-1  { --col-span: 1; }
        &.col--md-2  { --col-span: 2; }
        &.col--md-3  { --col-span: 3; }
        &.col--md-4  { --col-span: 4; }
        &.col--md-5  { --col-span: 5; }
        &.col--md-6  { --col-span: 6; }
        &.col--md-7  { --col-span: 7; }
        &.col--md-8  { --col-span: 8; }
        &.col--md-9  { --col-span: 9; }
        &.col--md-10 { --col-span: 10; }
        &.col--md-11 { --col-span: 11; }
        &.col--md-12 { --col-span: 12; }
    }

    /* LG breakpoint (992px+) */
    @media (min-width: 992px) {
        &.col--lg-1  { --col-span: 1; }
        &.col--lg-2  { --col-span: 2; }
        &.col--lg-3  { --col-span: 3; }
        &.col--lg-4  { --col-span: 4; }
        &.col--lg-5  { --col-span: 5; }
        &.col--lg-6  { --col-span: 6; }
        &.col--lg-7  { --col-span: 7; }
        &.col--lg-8  { --col-span: 8; }
        &.col--lg-9  { --col-span: 9; }
        &.col--lg-10 { --col-span: 10; }
        &.col--lg-11 { --col-span: 11; }
        &.col--lg-12 { --col-span: 12; }
    }

    /* XL breakpoint (1200px+) */
    @media (min-width: 1200px) {
        &.col--xl-1  { --col-span: 1; }
        &.col--xl-2  { --col-span: 2; }
        &.col--xl-3  { --col-span: 3; }
        &.col--xl-4  { --col-span: 4; }
        &.col--xl-5  { --col-span: 5; }
        &.col--xl-6  { --col-span: 6; }
        &.col--xl-7  { --col-span: 7; }
        &.col--xl-8  { --col-span: 8; }
        &.col--xl-9  { --col-span: 9; }
        &.col--xl-10 { --col-span: 10; }
        &.col--xl-11 { --col-span: 11; }
        &.col--xl-12 { --col-span: 12; }
    }

    /* XXL breakpoint (1400px+) */
    @media (min-width: 1400px) {
        &.col--xxl-1  { --col-span: 1; }
        &.col--xxl-2  { --col-span: 2; }
        &.col--xxl-3  { --col-span: 3; }
        &.col--xxl-4  { --col-span: 4; }
        &.col--xxl-5  { --col-span: 5; }
        &.col--xxl-6  { --col-span: 6; }
        &.col--xxl-7  { --col-span: 7; }
        &.col--xxl-8  { --col-span: 8; }
        &.col--xxl-9  { --col-span: 9; }
        &.col--xxl-10 { --col-span: 10; }
        &.col--xxl-11 { --col-span: 11; }
        &.col--xxl-12 { --col-span: 12; }
    }
}

/* Shift 50-50 layout a little */
@media (min-width: 768px) {
    .wpb-block--text-media, .wpb-block--text-usps, .wpb-block--text-video, .wpb-block--text-gravityform, .wpb-block--text-downloadform {
        &:has(.col--md-6 + .col--md-6) .row{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
            .col--md-6 { --col-span: 1; }

            &:has(.wpb-text.order-md-1) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
        }
    }
}