/* WIDTH CALIBRATION
----------------------------------- */

@property --_row-columns {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

:root,
body {
    /* ROW SIZES */
    --row-default: min(var(--wp--custom--row--default), 100%);
    --gap-desktop: var(--wp--custom--row--gap);
    --gap-mobile: var(--wp--custom--row--gap-mobile);
    --row-desktop-padding: var(--wp--custom--row--padding);
    --row-mobile-padding: var(--wp--custom--row--padding-mobile);
    --row-columns: var(--wp--custom--row--columns);
}



/*----------------------------------
ROWS
----------------------------------*/
.row:not([flexible]) {
    margin-inline: auto;
}

.row:not([flexible]) {
    width: 100%;
}

.row:not([flexible]) {
    display: flex;
    flex-wrap: wrap;
}

.full-width.row,
.is-style-full.row {
    max-width: 100%;
}

@media only screen and (min-width: 0) and (max-width: 960px) {
    .row:not([flexible]) {
        flex-direction: column;
    }

    .row:not([flexible]) :is([class*="col-"], .bp-column) {
        padding-inline: calc(var(--gap-mobile) * 0.5);
    }

    .row:not([flexible]):not(.full-width-mobile):not(.full-width):not([flexible]),
    .is-style-fixed.row,
    .row:not([flexible]).fixed-mobile {
        --_row-extra-pad: calc((var(--row-mobile-padding) * 2) - var(--gap-mobile));
        --_row-width: calc(var(--row-default) + var(--_row-extra-pad));
        padding-inline: calc(var(--_row-extra-pad) * 0.5);
        max-width: var(--_row-width) !important;
    }

    .row:not([flexible]):is(.full-width-mobile, #important) {
        --_row-extra-pad: 0;
    }

    .row:not([flexible]).is-style-full {
        max-width: 100%;
    }

    .row:not([flexible]) .wp-block-columns {
        gap: var(--gap-mobile, 0)
    }



    /* JUSTIFY */
    .row.mobile-left .wp-block-columns {
        justify-content: flex-start;
    }

    .row.mobile-center .wp-block-columns {
        justify-content: center;
    }

    .row.mobile-right .wp-block-columns {
        justify-content: flex-end;
    }

    .row.mobile-around .wp-block-columns {
        justify-content: space-around;
    }

    .row.mobile-between .wp-block-columns {
        justify-content: space-between;
    }


    /* ALIGN */
    .row.mobile-top .wp-block-columns {
        align-items: flex-start !important;
    }

    .row.mobile-bottom .wp-block-columns {
        align-items: flex-end !important;
    }

    .row.mobile-middle .wp-block-columns {
        align-items: center !important;
    }

    .row .wp-block-columns :where(.wp-block) {
        margin: 0;
    }

    .row .wp-block-columns {
        width: 100%;
    }

    /* Direction */
    .row.mobile-row .wp-block-columns {
        flex-direction: row;
    }

    .row.mobile-reversed .wp-block-columns {
        flex-direction: row-reverse;
    }

    .row.mobile-stack .wp-block-columns {
        flex-direction: column;
    }

    .row.mobile-stack-reversed .wp-block-columns {
        flex-direction: column-reverse;
    }
}

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


    .row:not([flexible]):not(.stack) {
        flex-direction: row;

        :is([class*="col-"], .bp-column) {
            padding-inline: calc(var(--gap-desktop) * 0.5);
        }
    }


    .row:not([flexible]):not(.full-width-desktop):not(.full-width):not(.bp-button),
    .is-style-fixed {
        max-width: var(--row-default);
        padding-inline: var(--_row-extra-pad);
    }

    .row:not([flexible]):not(.full-width-desktop):not(.full-width):not(.bp-button):has([class*="col-"]),
    .row:not([flexible]).is-style-fixed:has([class*="col-"]) {
        --_row-extra-pad: calc(var(--row-desktop-padding) - var(--gap-desktop));
        padding-inline: var(--_row-extra-pad);
        max-width: calc(var(--row-default) + var(--_row-extra-pad)) !important;
    }

    .row:not([flexible]).is-style-full {
        max-width: 100%;
    }



    .row:not([flexible]) .wp-block-columns {
        gap: var(--gap-desktop, 0)
    }

    /* JUSTIFY */
    .row.left .wp-block-columns {
        justify-content: flex-start;
    }

    .row.center .wp-block-columns {
        justify-content: center;
    }

    .row.right .wp-block-columns {
        justify-content: flex-end;
    }

    .row.around .wp-block-columns {
        justify-content: space-around;
    }

    .row.between .wp-block-columns {
        justify-content: space-between;
    }


    /* ALIGN */
    .row.top .wp-block-columns {
        align-items: flex-start !important;
    }

    .row.bottom .wp-block-columns {
        align-items: flex-end !important;
    }

    .row.middle .wp-block-columns {
        align-items: center !important;
    }

    .row .wp-block-columns :where(.wp-block) {
        margin: 0;
    }

    .row .wp-block-columns {
        width: 100%;
    }

    /* Direction */
    .row.row .wp-block-columns {
        flex-direction: row;
    }

    .row.reversed .wp-block-columns {
        flex-direction: row-reverse;
    }

    .row.stack .wp-block-columns {
        flex-direction: column;
    }

    .row.stack-reversed .wp-block-columns {
        flex-direction: column-reverse;
    }


}

/* @end */



/*----------------------------------
  COLUMNS
----------------------------------*/

[class*="col-"],
.bp-column {

    position: relative;
    box-sizing: border-box;
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    margin: 0;


    &.col-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    &.red {
        min-height: 30rem !important;
        padding-bottom: 1.5rem;
    }

    /* Vertical Align */
    &.top {
        align-self: flex-start;
    }

    &.middle {
        align-self: center;
    }

    &.bottom {
        align-self: flex-end;
    }

    &.baseline {
        align-self: baseline;
    }

    &.stretch {
        align-self: stretch;
    }


    /* Text Align */
    &.left {
        text-align: left;
    }

    &.center {
        text-align: center;
    }

    &.right {
        text-align: right;
    }


}

@media only screen and (min-width: 0) and (max-width: 960px) {

    [class*="col-"],
    .bp-column {
        width: var(--_width-mobile, 100%);
        margin-left: var(--_offset-mobile, 0);
        padding-inline: calc(var(--gap-mobile, var(--row-default-gap)) * 0.5);
    }


}

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

/* @end */

/* TABLE STRUCTURE
----------------------------------- */
.table {
    display: table;
    height: 100%;
    width: 100%;

    .cell {
        display: table-cell;
    }

    &.middle {
        vertical-align: middle;
    }

    &.top {
        vertical-align: top;
    }

    &.bottom {
        vertical-align: bottom;
    }
}



/* No Pad Column
----------------------------------- */
.no-pad-left {
    padding-left: 0;
}

.no-pad-right {
    padding-right: 0;
}



/* Custom grid for bp row */
.is-layout-flex {
    gap: 0;
}


/* WP COLUMNS */

:where(.wp-block-columns) {
    margin-bottom: 0;
}

:where(.wp-block-columns) .wp-block-column {
    flex-shrink: 0;
}


@media only screen and (min-width : 0) and (max-width : 960px) {
    .row.mobile-reverse .wp-block-columns {
        flex-direction: row-reverse;
    }

    /* JUSTIFY */
    .row.mobile-left .wp-block-columns {
        justify-content: flex-start;
    }

    .row.mobile-center .wp-block-columns {
        justify-content: center;
    }

    .row.mobile-right .wp-block-columns {
        justify-content: flex-end;
    }

    .row.mobile-around .wp-block-columns {
        justify-content: space-around;
    }

    .row.mobile-between .wp-block-columns {
        justify-content: space-between;
    }


    /* ALIGN */
    .row.mobile-top .wp-block-columns {
        align-items: flex-start !important;
    }

    .row.mobile-bottom .wp-block-columns {
        align-items: flex-end !important;
    }

    .row.mobile-middle .wp-block-columns {
        align-items: center !important;
    }


    .row .wp-block-columns {
        gap: var(--gap-mobile, 0)
    }

    .row .wp-block-columns :where(.wp-block) {
        margin: 0;
    }

    .row .wp-block-columns {
        width: 100%;
    }
}