/* ================================================
   WRAPS & CONTAINERS
   ================================================ */

/* CSS Variables */

:root {
    --wrap-wide: 1640px;
    --wrap: 1540px;
    --wrap-narrow: 1420px;
    --wrap-extra-narrow: 1320px;
    --horspace: 24px;
    /* Used by right/left stretch columns: must match the centered grid width token (see .content-wrapper.wrap-*). */
    --stretch-ref-width: var(--wrap);
}

/* Base wrap width utilities — listed after .content-wrapper so combined classes
   (e.g. .content-wrapper.wrap-narrow) pick up the wrap width, not width: 100%. */

/* Content Wrapper */
.content-wrapper {
    width: 100%;
    margin: 0 auto;
}

.wrap-wide,
.wrap,
.wrap-narrow,
.extra-narrow,
.extra-narrow-width {
    /*margin: 0 auto;*/
    max-width: calc(100% - 2 * var(--horspace));
}

.wrap-wide {
    width: var(--wrap-wide);
}

.wrap {
    width: var(--wrap);
}

.wrap-narrow {
    width: var(--wrap-narrow);
}

.extra-narrow,
.extra-narrow-width {
    width: var(--wrap-extra-narrow);
}

/* Match stretch math to whichever wrap width this row uses (inherits on .section-col). */
.content-wrapper.wrap-wide {
    --stretch-ref-width: var(--wrap-wide);
}

.content-wrapper.wrap {
    --stretch-ref-width: var(--wrap);
}

.content-wrapper.wrap-narrow {
    --stretch-ref-width: var(--wrap-narrow);
}

.content-wrapper.extra-narrow,
.content-wrapper.extra-narrow-width {
    --stretch-ref-width: var(--wrap-extra-narrow);
}

.content-wrapper.remove-verspace-top .section-col {
    padding-top: 0 !important;
}

.content-wrapper.remove-verspace-bottom .section-col {
    padding-bottom: 0 !important;
}

/* Content Wrapper - Desktop Grid */
@media only screen and (min-width: 992px) {

    :root {
        --horspace: 32px;
    }

    .content-wrapper {
        display: grid;
        grid-template-columns: repeat(24, 1fr);
        grid-template-rows: auto;
        container-type: inline-size;
        container-name: site-wrap;
    }

    .content-wrapper:not(.col-no-gap) {
        grid-column-gap: 20px;
    }

    /* Single Column Layout */
    .layout-single-col>.content-wrapper>.section-col {
        grid-column: 1 / span 24;
    }
	
	.layout-single-col>.content-wrapper.col-1-23>.section-col {
        grid-column: 1 / span 23;
    }
	

    /* Single Column Layout - blog single page */
    .single .layout-single-col>.content-wrapper.col-narrow>.section-col {
        grid-column: 5 / span 16;
    }

    /* Two Column Layout */
    .layout-two-cols>.content-wrapper>.section-col:first-child {
        grid-column: 1 / span 11;
    }

    .layout-two-cols>.content-wrapper>.section-col:last-child {
        grid-column: 13 / span 12;
    }

    /* Three Column Layout */
    .layout-three-cols>.content-wrapper>.section-col:nth-child(1) {
        grid-column: 1 / span 8;
    }

    .layout-three-cols>.content-wrapper>.section-col:nth-child(2) {
        grid-column: 9 / span 8;
    }

    .layout-three-cols>.content-wrapper>.section-col:nth-child(3) {
        grid-column: 17 / span 8;
    }

    /* Four Column Layout */
    .layout-four-cols>.content-wrapper>.section-col:nth-child(1) {
        grid-column: 1 / span 6;
    }

    .layout-four-cols>.content-wrapper>.section-col:nth-child(2) {
        grid-column: 7 / span 6;
    }

    .layout-four-cols>.content-wrapper>.section-col:nth-child(3) {
        grid-column: 13 / span 6;
    }

    .layout-four-cols>.content-wrapper>.section-col:nth-child(4) {
        grid-column: 19 / span 6;
    }

    /* Stretch: negative margin + wider box; direct child selector beats later generic .section-col rules. */
    .layout-two-cols .content-wrapper > .section-col.right-stretch-column {
        --stretch-edge-bleed: max(0px, calc((100vw - min(var(--stretch-ref-width, var(--wrap)), 100cqi)) / 2));
        margin-right: calc(-1 * var(--stretch-edge-bleed));
        margin-left: 0;
        width: calc(100% + var(--stretch-edge-bleed));
        max-width: none;
        box-sizing: border-box;
    }

    .layout-two-cols .content-wrapper > .section-col.left-stretch-column {
        --stretch-edge-bleed: max(0px, calc((100vw - min(var(--stretch-ref-width, var(--wrap)), 100cqi)) / 2));
        margin-left: calc(-1 * var(--stretch-edge-bleed));
        margin-right: 0;
        width: calc(100% + var(--stretch-edge-bleed));
        max-width: none;
        box-sizing: border-box;
    }
}

/* Content Wrapper - Mobile */
@media only screen and (max-width: 991px) {
    .content-wrapper .section-col:not(:first-child) {
        padding-top: calc(1.5 * var(--verspace));
    }

    .content-wrapper.swap-cols .section-col {
        padding-bottom: 0;
    }

    .content-wrapper.swap-cols .section-col~.section-col {
        margin-top: 0;
        padding-top: 0;
    }
}

@media only screen and (min-width: 1400px) {

    :root {
        --horspace: 64px;
    }

}