/**
 * All-in-One Container Compatibility Layer
 * File: /template/css/container_custom.css
 * Fixes b13/container and bootstrap_package layouts on legacy LESS templates.
 */

/* ==========================================================================
   1. Base Box-Sizing & Reset Rules
   ========================================================================== */
.contentcontainer,
.contentcontainer-column,
[data-container-identifier] {
    box-sizing: border-box;
}

/* Clearfix fallback for older browsers */
.contentcontainer::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   2. Flexible Grid Layouts (2, 3, 4 Columns & Asymmetric Splits)
   ========================================================================== */

/* Universal Row Wrapper */
.contentcontainer,
[class*="frame-type-container_"] .contentcontainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

/* Universal Column Base Styles */
.contentcontainer > .contentcontainer-column,
.contentcontainer > [data-container-column] {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* --- Mobile First Default: Stack on screens smaller than tablet --- */
@media (max-width: 767px) {
    .contentcontainer > .contentcontainer-column,
    .contentcontainer > [data-container-column] {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- Tablet / Desktop Layouts (768px and up) --- */
@media (min-width: 768px) {

    /* --- 2 EQUAL COLUMNS --- */
    .contentcontainer[data-container-identifier="container_2_columns"] > .contentcontainer-column,
    .contentcontainer[data-container-identifier="2_columns"] > .contentcontainer-column,
    .container-2-columns > .contentcontainer-column,
    .b13-container-2cols > .container-column {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* --- 3 EQUAL COLUMNS --- */
    .contentcontainer[data-container-identifier="container_3_columns"] > .contentcontainer-column,
    .contentcontainer[data-container-identifier="3_columns"] > .contentcontainer-column,
    .container-3-columns > .contentcontainer-column,
    .b13-container-3cols > .container-column {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    /* --- 4 EQUAL COLUMNS --- */
    .contentcontainer[data-container-identifier="container_4_columns"] > .contentcontainer-column,
    .contentcontainer[data-container-identifier="4_columns"] > .contentcontainer-column,
    .container-4-columns > .contentcontainer-column,
    .b13-container-4cols > .container-column {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    /* --- 2 COLUMNS: 33% / 66% (1/3 - 2/3 Split) --- */
    .contentcontainer[data-container-identifier="container_2_columns_33_66"] > .contentcontainer-column:nth-child(1),
    .contentcontainer[data-container-identifier="2_columns_33_66"] > .contentcontainer-column:nth-child(1) {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .contentcontainer[data-container-identifier="container_2_columns_33_66"] > .contentcontainer-column:nth-child(2),
    .contentcontainer[data-container-identifier="2_columns_33_66"] > .contentcontainer-column:nth-child(2) {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    /* --- 2 COLUMNS: 66% / 33% (2/3 - 1/3 Split) --- */
    .contentcontainer[data-container-identifier="container_2_columns_66_33"] > .contentcontainer-column:nth-child(1),
    .contentcontainer[data-container-identifier="2_columns_66_33"] > .contentcontainer-column:nth-child(1) {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .contentcontainer[data-container-identifier="container_2_columns_66_33"] > .contentcontainer-column:nth-child(2),
    .contentcontainer[data-container-identifier="2_columns_66_33"] > .contentcontainer-column:nth-child(2) {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    /* --- 2 COLUMNS: 25% / 75% (1/4 - 3/4 Split) --- */
    .contentcontainer[data-container-identifier="container_2_columns_25_75"] > .contentcontainer-column:nth-child(1),
    .contentcontainer[data-container-identifier="2_columns_25_75"] > .contentcontainer-column:nth-child(1) {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .contentcontainer[data-container-identifier="container_2_columns_25_75"] > .contentcontainer-column:nth-child(2),
    .contentcontainer[data-container-identifier="2_columns_25_75"] > .contentcontainer-column:nth-child(2) {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    /* --- 2 COLUMNS: 75% / 25% (3/4 - 1/4 Split) --- */
    .contentcontainer[data-container-identifier="container_2_columns_75_25"] > .contentcontainer-column:nth-child(1),
    .contentcontainer[data-container-identifier="2_columns_75_25"] > .contentcontainer-column:nth-child(1) {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .contentcontainer[data-container-identifier="container_2_columns_75_25"] > .contentcontainer-column:nth-child(2),
    .contentcontainer[data-container-identifier="2_columns_75_25"] > .contentcontainer-column:nth-child(2) {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* ==========================================================================
   3. Accordion Container Component
   ========================================================================== */
.contentcontainer[data-container-identifier*="accordion"] {
    display: block;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.contentcontainer[data-container-identifier*="accordion"] > .contentcontainer-column {
    padding: 0;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    border-bottom: 1px solid #e0e0e0;
}

.contentcontainer[data-container-identifier*="accordion"] > .contentcontainer-column:last-child {
    border-bottom: none;
}

/* ==========================================================================
   4. Tab Container Component
   ========================================================================== */
.contentcontainer[data-container-identifier*="tab"] {
    display: block;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
}

/* ==========================================================================
   5. Utility Helpers & Overrides
   ========================================================================== */
.contentcontainer.no-gutters,
.contentcontainer-no-gutters {
    margin-left: 0;
    margin-right: 0;
}

.contentcontainer.no-gutters > .contentcontainer-column,
.contentcontainer-no-gutters > .contentcontainer-column {
    padding-left: 0;
    padding-right: 0;
}