/* ===================================================================
   LAYOUT/GRID.CSS
   Grid Layouts and Flexbox Utilities
   =================================================================== */
/* ===== 13. FLUID COLUMNS ===== */

/* ----- 13.1 Fluid Column Base ----- */
[class*="fluid-col-"] {
    position: relative;
}

/* ----- 13.2 Fluid Column Content ----- */
[class*="fluid-col-"] .fluid-col {
    position: absolute;
    left: 15px;
}

/* ----- 13.3 Fluid Column Alignment ----- */
[class*="fluid-col-"] .fluid-col.fluid-col-left {
    left: auto;
    right: 15px;
}

.fluid-col-6 {
    min-height: 33vw;
}

.fluid-col-6 .fluid-col {
    width: calc(50vw - 15px);
}

@media (min-width: 768px) {
    .fluid-col-md-6 {
        min-height: 33vw;
    }

    .fluid-col-md-6 .fluid-col {
        width: calc(50vw - 15px);
    }
}

@media (max-width: 767px) {
    .fluid-col-md-6 {
        min-height: 64.5vw;
    }
}

/* Gutter SM */
.row-gutter-sm {
    margin-right: -10px;
    margin-left: -10px;
}

.row-gutter-sm [class^="col-"],
.row-gutter-sm .col,
.row-gutter-sm .col-auto,
.row-gutter-sm [class*=" col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

/* ----- 14.2 Order Utilities ----- */
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }

/* ----- 14.3 Custom Grid Columns ----- */
.col-1-5,
.col-md-1-5,
.col-lg-1-5,
.col-2-5,
.col-md-2-5 {
    position: relative;
    min-height: 1px;
    width: 100%;
    padding: 0 15px;
}

/* ----- 14.4 Custom Column Sizes ----- */
.col-1-5 {
    flex: 0 0 20%;
    max-width: 20%;
}

.col-2-5 {
    flex: 0 0 40%;
    max-width: 40%;
}

@media (min-width: 768px) {
    .col-md-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .col-md-2-5 {
        flex: 0 0 40%;
        max-width: 40%;
    }
}

@media (min-width: 992px) {
    .col-lg-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* RTL */
/* ===== 97. FLEXBOX UTILITIES ===== */

/* ----- 97.1 Display Flex ----- */
.d-flex {
    display: flex !important;
}

/* ----- 97.2 Flex Direction ----- */
.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

/* ----- 97.3 Flex Wrap ----- */
.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

/* ----- 97.4 Flex Fill ----- */
.flex-fill {
    flex: 1 1 auto !important;
}

/* ----- 97.5 Flex Grow ----- */
.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

/* ----- 97.6 Flex Shrink ----- */
.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

/* ----- 97.7 Justify Content ----- */
.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

/* ----- 97.8 Align Items ----- */
.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}




/* ===== BOOTSTRAP GRID REPLACEMENTS ===== */

/* Row */
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

/* Column Base */
.col {
    flex: 1 0 0%;
}

/* Gutters */
.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

/* Column Sizes - Mobile First */
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

/* Medium Breakpoint (≥768px) */
@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* Large Breakpoint (≥992px) */
@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}