/**
 * Wux Grid CSS 2.0 - Geoptimaliseerd
 * 
 * Gebruik:
 * <div class="row">
 *     <div class="col col--md-6 col--xl-4"></div>
 *     <div class="col col--md-6 col--xl-4"></div>
 *     <div class="col col--md-6 col--xl-4"></div>
 * </div>
 */

:root {
    --inline-spacing: 1.8rem;
    --grid-columns: 12;
    --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); }
}

@media (min-width: 1200px) {
    body { --wp--style--global--content-size: var(--container-width--xl); }
    .container { --wpb-width: var(--container-width--xl); }
    .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--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--small { --wpb-width: 960px; }
    .container.container--medium { --wpb-width: 1140px; }
    .container.container--large { --wpb-width: 1500px; }
}

.container--full {
    --wpb-width: 100%;
    --inline-spacing: 0;
}


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

.row > .col {
    grid-column: span 12;
    padding-inline: var(--inline-spacing);
}

/* Gap variants */
.row.gap--8 { --inline-spacing: 0.4rem; row-gap: calc(var(--inline-spacing) * 2); }
.row.gap--16 { --inline-spacing: 0.8rem; row-gap: calc(var(--inline-spacing) * 2); }
.row.gap--32 { --inline-spacing: 1.6rem; row-gap: calc(var(--inline-spacing) * 2); }

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

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

@media (min-width: 1400px) {
    .row.gap--xxl-8 { --inline-spacing: 0.4rem; }
    .row.gap--xxl-16 { --inline-spacing: 0.8rem; }
    .row.gap--xxl-32 { --inline-spacing: 1.6rem; }
    .row.gap--xxl-48 { --inline-spacing: 2.4rem; }
    .row.gap--xxl-64 { --inline-spacing: 3.2rem; }
}

/*** ---------- 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 ---------- ***/
.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 ---------- ***/
.col--12 { grid-column: span 12; }

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

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

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

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

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