/* ============================
   Simple Bootstrap-style Grid
   12 columns, row/col system
   + Gutter classes (g-*, gx-*, gy-*)
   ============================ */

:root{
    --grid-columns: 12;
    --gutter: 24px;        /* default space between columns */
    --container-max: 1140px;
}

*{
    box-sizing: border-box;
}

/* ===== Container ===== */
.container{
    width:100%;
    max-width: var(--container-max);
    margin:0 auto;
    padding: 0 calc(var(--gutter)/2);
}
.container-fluid{
    margin: 0 auto;
    width:100%;
    padding: 0 calc(var(--gutter)/2);
}

/* ===== Row ===== */
.row{
    display:flex;
    flex-wrap: wrap;
    margin-right: calc(var(--gutter-x, var(--gutter)) / -2);
    margin-left: calc(var(--gutter-x, var(--gutter)) / -2);
}

/* ===== All columns get gutter padding + top margin ===== */
[class^="col"], [class*=" col"]{
    padding-right: calc(var(--gutter-x, var(--gutter)) / 2);
    padding-left: calc(var(--gutter-x, var(--gutter)) / 2);
}

/* First row of columns shouldn't need top margin if row already has none —
   optional: remove this if you want consistent vertical rhythm even on first line */
.row > [class^="col"]:first-child,
.row > [class*=" col"]:first-child{
    /* margin-top still applies from gutter-y; override to 0 only if desired */
}

/* ===== Base col (equal width, auto-grow) ===== */
.col{
    flex: 1 0 0%;
}

/* ===== Fixed width columns: col-1 to col-12 ===== */
.col-1  {
    flex: 0 0 auto;
    width: 8.3333%;
}
.col-2  {
    flex: 0 0 auto;
    width: 16.6667%;
}
.col-3  {
    flex: 0 0 auto;
    width: 25%;
}
.col-4  {
    flex: 0 0 auto;
    width: 33.3333%;
}
.col-5  {
    flex: 0 0 auto;
    width: 41.6667%;
}
.col-6  {
    flex: 0 0 auto;
    width: 50%;
}
.col-7  {
    flex: 0 0 auto;
    width: 58.3333%;
}
.col-8  {
    flex: 0 0 auto;
    width: 66.6667%;
}
.col-9  {
    flex: 0 0 auto;
    width: 75%;
}
.col-10 {
    flex: 0 0 auto;
    width: 83.3333%;
}
.col-11 {
    flex: 0 0 auto;
    width: 91.6667%;
}
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

/* ===== Responsive: md (tablet, 768px+) ===== */
@media (min-width: 768px){
    .col-md-1  {
        flex: 0 0 auto;
        width: 8.3333%;
    }
    .col-md-2  {
        flex: 0 0 auto;
        width: 16.6667%;
    }
    .col-md-3  {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-md-4  {
        flex: 0 0 auto;
        width: 33.3333%;
    }
    .col-md-5  {
        flex: 0 0 auto;
        width: 41.6667%;
    }
    .col-md-6  {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-md-7  {
        flex: 0 0 auto;
        width: 58.3333%;
    }
    .col-md-8  {
        flex: 0 0 auto;
        width: 66.6667%;
    }
    .col-md-9  {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-md-10 {
        flex: 0 0 auto;
        width: 83.3333%;
    }
    .col-md-11 {
        flex: 0 0 auto;
        width: 91.6667%;
    }
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ===== Responsive: lg (desktop, 992px+) ===== */
@media (min-width: 992px){
    .col-lg-1  {
        flex: 0 0 auto;
        width: 8.3333%;
    }
    .col-lg-2  {
        flex: 0 0 auto;
        width: 16.6667%;
    }
    .col-lg-3  {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-lg-4  {
        flex: 0 0 auto;
        width: 33.3333%;
    }
    .col-lg-5  {
        flex: 0 0 auto;
        width: 41.6667%;
    }
    .col-lg-6  {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-lg-7  {
        flex: 0 0 auto;
        width: 58.3333%;
    }
    .col-lg-8  {
        flex: 0 0 auto;
        width: 66.6667%;
    }
    .col-lg-9  {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.3333%;
    }
    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.6667%;
    }
    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ===== Responsive: xxl (large desktop, 1400px+) ===== */
@media (min-width: 1400px){
    .col-xxl-1  {
        flex: 0 0 auto;
        width: 8.3333%;
    }
    .col-xxl-2  {
        flex: 0 0 auto;
        width: 16.6667%;
    }
    .col-xxl-3  {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-xxl-4  {
        flex: 0 0 auto;
        width: 33.3333%;
    }
    .col-xxl-5  {
        flex: 0 0 auto;
        width: 41.6667%;
    }
    .col-xxl-6  {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-xxl-7  {
        flex: 0 0 auto;
        width: 58.3333%;
    }
    .col-xxl-8  {
        flex: 0 0 auto;
        width: 66.6667%;
    }
    .col-xxl-9  {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.3333%;
    }
    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.6667%;
    }
    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ===== Small mobile: col below 768px stacks full width ===== */
@media (max-width: 767.98px){
    [class^="col-"], [class*=" col-"]{
        width: 100%;
    }
}

/* ============================
   Gutter System (Bootstrap 5 style)
   Apply on the .row element:
   g-0 ... g-5   -> both x & y gutters
   gx-0 ... gx-5 -> horizontal only
   gy-0 ... gy-5 -> vertical only
   ============================ */

/* ===== Combined (x + y) ===== */
.g-0 {
    --gutter-x: 0px;
    --gutter-y: 0px;
}
.g-1 {
    --gutter-x: 4px;
    --gutter-y: 4px;
}
.g-2 {
    --gutter-x: 8px;
    --gutter-y: 8px;
}
.g-3 {
    --gutter-x: 16px;
    --gutter-y: 16px;
}
.g-4 {
    --gutter-x: 24px;
    --gutter-y: 24px;
}
.g-5 {
    --gutter-x: 48px;
    --gutter-y: 48px;
}

/* ===== Horizontal only ===== */
.gx-0 {
    --gutter-x: 0px;
}
.gx-1 {
    --gutter-x: 4px;
}
.gx-2 {
    --gutter-x: 8px;
}
.gx-3 {
    --gutter-x: 16px;
}
.gx-4 {
    --gutter-x: 24px;
}
.gx-5 {
    --gutter-x: 48px;
}

/* ===== Vertical only ===== */
.gy-0 {
    --gutter-y: 0px;
}
.gy-1 {
    --gutter-y: 4px;
}
.gy-2 {
    --gutter-y: 8px;
}
.gy-3 {
    --gutter-y: 16px;
}
.gy-4 {
    --gutter-y: 24px;
}
.gy-5 {
    --gutter-y: 48px;
}


.flex-row-reverse {
    flex-flow: row-reverse;
}

/* ===== Responsive gutters (optional, md+ / lg+ overrides) ===== */
@media (min-width: 768px){
    .g-md-0 {
        --gutter-x: 0px;
        --gutter-y: 0px;
    }
    .g-md-1 {
        --gutter-x: 4px;
        --gutter-y: 4px;
    }
    .g-md-2 {
        --gutter-x: 8px;
        --gutter-y: 8px;
    }
    .g-md-3 {
        --gutter-x: 16px;
        --gutter-y: 16px;
    }
    .g-md-4 {
        --gutter-x: 24px;
        --gutter-y: 24px;
    }
    .g-md-5 {
        --gutter-x: 48px;
        --gutter-y: 48px;
    }
}

@media (min-width: 992px){
    .g-lg-0 {
        --gutter-x: 0px;
        --gutter-y: 0px;
    }
    .g-lg-1 {
        --gutter-x: 4px;
        --gutter-y: 4px;
    }
    .g-lg-2 {
        --gutter-x: 8px;
        --gutter-y: 8px;
    }
    .g-lg-3 {
        --gutter-x: 16px;
        --gutter-y: 16px;
    }
    .g-lg-4 {
        --gutter-x: 24px;
        --gutter-y: 24px;
    }
    .g-lg-5 {
        --gutter-x: 48px;
        --gutter-y: 48px;
    }
}
@media (min-width: 1400px){
    .g-xxl-0 {
        --gutter-x: 0px;
        --gutter-y: 0px;
    }
    .g-xxl-1 {
        --gutter-x: 4px;
        --gutter-y: 4px;
    }
    .g-xxl-2 {
        --gutter-x: 8px;
        --gutter-y: 8px;
    }
    .g-xxl-3 {
        --gutter-x: 16px;
        --gutter-y: 16px;
    }
    .g-xxl-4 {
        --gutter-x: 24px;
        --gutter-y: 24px;
    }
    .g-xxl-5 {
        --gutter-x: 48px;
        --gutter-y: 48px;
    }
}