/* =========================================================
   TILDA GLOBAL FLEX LAYOUT SYSTEM
   Zero Block class:
   uc-full-width-flex

   Outer Group:
   layout-50-50
   layout-65-35
   layout-35-65

   Inner Groups:
   column-left
   column-right
   ========================================================= */


/* ---------------------------------------------------------
   1. ZERO BLOCK
   Full viewport width
   --------------------------------------------------------- */

.uc-full-width-flex {
    width: 100% !important;
    max-width: none !important;
}


/* ---------------------------------------------------------
   2. OUTER LAYOUT GROUP
   70px left + 70px right
   --------------------------------------------------------- */

.uc-full-width-flex .layout-50-50,
.uc-full-width-flex .layout-65-35,
.uc-full-width-flex .layout-35-65 {

    box-sizing: border-box !important;

    width: calc(100% - 140px) !important;

    left: 70px !important;

    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    overflow: visible !important;
}


/* ---------------------------------------------------------
   3. THE OUTER GROUP'S MOLECULE BECOMES THE FLEX ROW
   --------------------------------------------------------- */

.uc-full-width-flex .layout-50-50 > .tn-molecule,
.uc-full-width-flex .layout-65-35 > .tn-molecule,
.uc-full-width-flex .layout-35-65 > .tn-molecule {

    display: flex !important;

    flex-direction: row !important;

    justify-content: space-between !important;

    align-items: stretch !important;

    box-sizing: border-box !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

    gap: 0 !important;
}


/* ---------------------------------------------------------
   4. BOTH COLUMNS
   --------------------------------------------------------- */

.uc-full-width-flex .layout-50-50 > .tn-molecule > .column-left,
.uc-full-width-flex .layout-50-50 > .tn-molecule > .column-right,

.uc-full-width-flex .layout-65-35 > .tn-molecule > .column-left,
.uc-full-width-flex .layout-65-35 > .tn-molecule > .column-right,

.uc-full-width-flex .layout-35-65 > .tn-molecule > .column-left,
.uc-full-width-flex .layout-35-65 > .tn-molecule > .column-right {

    position: relative !important;

    top: auto !important;
    left: auto !important;

    box-sizing: border-box !important;

    max-width: none !important;

    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    flex-shrink: 1 !important;

    align-self: stretch !important;
}


/* =========================================================
   5. 50 / 50
   ========================================================= */

.uc-full-width-flex .layout-50-50 > .tn-molecule > .column-left {

    width: 50% !important;
    flex: 0 1 50% !important;

}

.uc-full-width-flex .layout-50-50 > .tn-molecule > .column-right {

    width: 50% !important;
    flex: 0 1 50% !important;

}


/* =========================================================
   6. 65 / 35
   LEFT = 65%
   RIGHT = 35%
   ========================================================= */

.uc-full-width-flex .layout-65-35 > .tn-molecule > .column-left {

    width: 65% !important;
    flex: 0 1 65% !important;

}

.uc-full-width-flex .layout-65-35 > .tn-molecule > .column-right {

    width: 35% !important;
    flex: 0 1 35% !important;

}


/* =========================================================
   7. 35 / 65
   LEFT = 35%
   RIGHT = 65%
   ========================================================= */

.uc-full-width-flex .layout-35-65 > .tn-molecule > .column-left {

    width: 35% !important;
    flex: 0 1 35% !important;

}

.uc-full-width-flex .layout-35-65 > .tn-molecule > .column-right {

    width: 65% !important;
    flex: 0 1 65% !important;

}


/* ---------------------------------------------------------
   8. IMPORTANT:
   Tilda's inner elements must be allowed to shrink.
   Prevents long text from breaking the 65/35 layout.
   --------------------------------------------------------- */

.uc-full-width-flex .column-left,
.uc-full-width-flex .column-right {

    min-width: 0 !important;

}

.uc-full-width-flex .column-left .tn-elem,
.uc-full-width-flex .column-right .tn-elem {

    box-sizing: border-box !important;

    max-width: 100% !important;

}


/* =========================================================
   9. MOBILE
   20px left + 20px right
   Columns become vertical
   ========================================================= */

@media screen and (max-width: 767px) {

    .uc-full-width-flex .layout-50-50,
    .uc-full-width-flex .layout-65-35,
    .uc-full-width-flex .layout-35-65 {

        width: calc(100% - 40px) !important;

        left: 20px !important;

        right: auto !important;

    }


    .uc-full-width-flex .layout-50-50 > .tn-molecule,
    .uc-full-width-flex .layout-65-35 > .tn-molecule,
    .uc-full-width-flex .layout-35-65 > .tn-molecule {

        flex-direction: column !important;

        align-items: stretch !important;

        width: 100% !important;

    }


    .uc-full-width-flex .layout-50-50 > .tn-molecule > .column-left,
    .uc-full-width-flex .layout-50-50 > .tn-molecule > .column-right,

    .uc-full-width-flex .layout-65-35 > .tn-molecule > .column-left,
    .uc-full-width-flex .layout-65-35 > .tn-molecule > .column-right,

    .uc-full-width-flex .layout-35-65 > .tn-molecule > .column-left,
    .uc-full-width-flex .layout-35-65 > .tn-molecule > .column-right {

        width: 100% !important;

        flex: 0 0 auto !important;

    }

}


/* =========================================================
   10. TEXT STACK GAPS
   Groups with classes: text-section, header-text
   (alias header-paragraph), paragraphs, accent.
   The group's molecule becomes a column; gap sets the spacing.
   Direction (normal / reverse) is set per block when the DOM
   order differs from the visual order.
   ========================================================= */

.tn-group.text-section > .tn-molecule,
.tn-group.header-text > .tn-molecule,
.tn-group.header-paragraph > .tn-molecule,
.tn-group.paragraphs > .tn-molecule {

    display: flex !important;

    flex-direction: column !important;

}

/* gap between blocks inside text-section */
.tn-group.text-section > .tn-molecule {

    row-gap: 60px !important;
    gap: 60px !important;

}

/* gap between heading and paragraphs inside header-text */
.tn-group.header-text > .tn-molecule,
.tn-group.header-paragraph > .tn-molecule {

    row-gap: 20px !important;
    gap: 20px !important;

}

/* gap between paragraphs */
.tn-group.paragraphs > .tn-molecule {

    row-gap: 15px !important;
    gap: 15px !important;

}

/* accent line inside text-section: 17px from the left */
.tn-group.text-section .tn-group.accent {

    box-sizing: border-box !important;

    padding-left: 17px !important;

}

/* under 960px: gap inside text-section is 30px */
@media screen and (max-width: 959px) {

    .tn-group.text-section > .tn-molecule {

        row-gap: 30px !important;
        gap: 30px !important;

    }

}