/*
 * _grid.css
 * 12-Column Responsive Grid System
 *
 * Usage:
 *   <div class="container">
 *     <div class="row">
 *       <div class="col-md-6 col-sm-12">...</div>
 *       <div class="col-md-6 col-sm-12">...</div>
 *     </div>
 *   </div>
 *
 * Breakpoints:
 *   xs  — < 576px   (default / mobile first)
 *   sm  — ≥ 576px
 *   md  — ≥ 768px
 *   lg  — ≥ 1024px
 *   xl  — ≥ 1280px
 *   2xl — ≥ 1536px
 *
 * Column classes: .col-{bp}-{1-12}
 * Offset classes: .offset-{bp}-{0-11}
 * Order  classes: .order-{bp}-{first|last|0-12}
 * Display helpers: .d-{bp}-none / .d-{bp}-block / .d-{bp}-flex
 */

/* ==========================================================
   1. CONTAINER
   ========================================================== */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--grid-gutter, 1rem);
  padding-left:  var(--grid-gutter, 1rem);
}

/* Responsive max-widths */
@media (min-width: 576px)  { .container { max-width: 540px;  } }
@media (min-width: 768px)  { .container { max-width: 720px;  } }
@media (min-width: 1024px) { .container { max-width: 960px;  } }
@media (min-width: 1280px) { .container { max-width: 1200px; } }
@media (min-width: 1536px) { .container { max-width: 1400px; } }

/* Full-width fluid container */
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--grid-gutter, 1rem);
  padding-left:  var(--grid-gutter, 1rem);
}

/* ==========================================================
   2. ROW
   ========================================================== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--grid-gutter, 1rem) * -0.5);
  margin-left:  calc(var(--grid-gutter, 1rem) * -0.5);
}

/* No-gutters modifier */
.row.no-gutters {
  margin-right: 0;
  margin-left:  0;
}

.row.no-gutters > [class*="col"] {
  padding-right: 0;
  padding-left:  0;
}

/* Row alignment helpers */
.row.align-items-start    { align-items: flex-start; }
.row.align-items-center   { align-items: center;     }
.row.align-items-end      { align-items: flex-end;   }
.row.align-items-stretch  { align-items: stretch;    }
.row.justify-content-start   { justify-content: flex-start;    }
.row.justify-content-center  { justify-content: center;        }
.row.justify-content-end     { justify-content: flex-end;      }
.row.justify-content-between { justify-content: space-between; }
.row.justify-content-around  { justify-content: space-around;  }
.row.justify-content-evenly  { justify-content: space-evenly;  }

/* ==========================================================
   3. BASE COLUMN
   ========================================================== */
[class*="col"] {
  position: relative;
  width: 100%;
  padding-right: calc(var(--grid-gutter, 1rem) * 0.5);
  padding-left:  calc(var(--grid-gutter, 1rem) * 0.5);
  box-sizing: border-box;
}

/* Auto-width column */
.col {
  flex: 1 0 0%;
}

/* ==========================================================
   4. COLUMN GENERATOR — XS (mobile first, no media query)
   ========================================================== */
.col-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
.col-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
.col-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
.col-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
.col-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
.col-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
.col-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
.col-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
.col-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
.col-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
.col-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
.col-12 { flex: 0 0 auto; width: 100%; }

/* XS offsets */
.offset-0  { margin-left: 0; }
.offset-1  { margin-left: calc(1  / 12 * 100%); }
.offset-2  { margin-left: calc(2  / 12 * 100%); }
.offset-3  { margin-left: calc(3  / 12 * 100%); }
.offset-4  { margin-left: calc(4  / 12 * 100%); }
.offset-5  { margin-left: calc(5  / 12 * 100%); }
.offset-6  { margin-left: calc(6  / 12 * 100%); }
.offset-7  { margin-left: calc(7  / 12 * 100%); }
.offset-8  { margin-left: calc(8  / 12 * 100%); }
.offset-9  { margin-left: calc(9  / 12 * 100%); }
.offset-10 { margin-left: calc(10 / 12 * 100%); }
.offset-11 { margin-left: calc(11 / 12 * 100%); }

/* ==========================================================
   5. SM  —  ≥ 576px
   ========================================================== */
@media (min-width: 576px) {
  .col-sm      { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
  .col-sm-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
  .col-sm-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
  .col-sm-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
  .col-sm-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
  .col-sm-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
  .col-sm-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
  .col-sm-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
  .col-sm-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
  .col-sm-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
  .col-sm-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }

  .offset-sm-0  { margin-left: 0; }
  .offset-sm-1  { margin-left: calc(1  / 12 * 100%); }
  .offset-sm-2  { margin-left: calc(2  / 12 * 100%); }
  .offset-sm-3  { margin-left: calc(3  / 12 * 100%); }
  .offset-sm-4  { margin-left: calc(4  / 12 * 100%); }
  .offset-sm-5  { margin-left: calc(5  / 12 * 100%); }
  .offset-sm-6  { margin-left: calc(6  / 12 * 100%); }
  .offset-sm-7  { margin-left: calc(7  / 12 * 100%); }
  .offset-sm-8  { margin-left: calc(8  / 12 * 100%); }
  .offset-sm-9  { margin-left: calc(9  / 12 * 100%); }
  .offset-sm-10 { margin-left: calc(10 / 12 * 100%); }
  .offset-sm-11 { margin-left: calc(11 / 12 * 100%); }

  .order-sm-first { order: -1; }
  .order-sm-last  { order: 13; }
  .order-sm-0  { order: 0;  }
  .order-sm-1  { order: 1;  }
  .order-sm-2  { order: 2;  }
  .order-sm-3  { order: 3;  }
  .order-sm-4  { order: 4;  }
  .order-sm-5  { order: 5;  }
  .order-sm-6  { order: 6;  }

  .d-sm-none  { display: none  !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex  { display: flex  !important; }
}

/* ==========================================================
   6. MD  —  ≥ 768px
   ========================================================== */
@media (min-width: 768px) {
  .col-md      { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
  .col-md-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
  .col-md-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
  .col-md-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
  .col-md-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
  .col-md-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
  .col-md-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
  .col-md-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
  .col-md-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
  .col-md-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
  .col-md-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
  .col-md-12 { flex: 0 0 auto; width: 100%; }

  .offset-md-0  { margin-left: 0; }
  .offset-md-1  { margin-left: calc(1  / 12 * 100%); }
  .offset-md-2  { margin-left: calc(2  / 12 * 100%); }
  .offset-md-3  { margin-left: calc(3  / 12 * 100%); }
  .offset-md-4  { margin-left: calc(4  / 12 * 100%); }
  .offset-md-5  { margin-left: calc(5  / 12 * 100%); }
  .offset-md-6  { margin-left: calc(6  / 12 * 100%); }
  .offset-md-7  { margin-left: calc(7  / 12 * 100%); }
  .offset-md-8  { margin-left: calc(8  / 12 * 100%); }
  .offset-md-9  { margin-left: calc(9  / 12 * 100%); }
  .offset-md-10 { margin-left: calc(10 / 12 * 100%); }
  .offset-md-11 { margin-left: calc(11 / 12 * 100%); }

  .order-md-first { order: -1; }
  .order-md-last  { order: 13; }
  .order-md-0  { order: 0;  }
  .order-md-1  { order: 1;  }
  .order-md-2  { order: 2;  }
  .order-md-3  { order: 3;  }
  .order-md-4  { order: 4;  }
  .order-md-5  { order: 5;  }
  .order-md-6  { order: 6;  }

  .d-md-none  { display: none  !important; }
  .d-md-block { display: block !important; }
  .d-md-flex  { display: flex  !important; }
}

/* ==========================================================
   7. LG  —  ≥ 1024px
   ========================================================== */
@media (min-width: 1024px) {
  .col-lg      { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
  .col-lg-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
  .col-lg-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
  .col-lg-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
  .col-lg-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
  .col-lg-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
  .col-lg-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
  .col-lg-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
  .col-lg-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
  .col-lg-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
  .col-lg-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }

  .offset-lg-0  { margin-left: 0; }
  .offset-lg-1  { margin-left: calc(1  / 12 * 100%); }
  .offset-lg-2  { margin-left: calc(2  / 12 * 100%); }
  .offset-lg-3  { margin-left: calc(3  / 12 * 100%); }
  .offset-lg-4  { margin-left: calc(4  / 12 * 100%); }
  .offset-lg-5  { margin-left: calc(5  / 12 * 100%); }
  .offset-lg-6  { margin-left: calc(6  / 12 * 100%); }
  .offset-lg-7  { margin-left: calc(7  / 12 * 100%); }
  .offset-lg-8  { margin-left: calc(8  / 12 * 100%); }
  .offset-lg-9  { margin-left: calc(9  / 12 * 100%); }
  .offset-lg-10 { margin-left: calc(10 / 12 * 100%); }
  .offset-lg-11 { margin-left: calc(11 / 12 * 100%); }

  .order-lg-first { order: -1; }
  .order-lg-last  { order: 13; }
  .order-lg-0  { order: 0;  }
  .order-lg-1  { order: 1;  }
  .order-lg-2  { order: 2;  }
  .order-lg-3  { order: 3;  }
  .order-lg-4  { order: 4;  }
  .order-lg-5  { order: 5;  }
  .order-lg-6  { order: 6;  }

  .d-lg-none  { display: none  !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex  { display: flex  !important; }
}

/* ==========================================================
   8. XL  —  ≥ 1280px
   ========================================================== */
@media (min-width: 1280px) {
  .col-xl      { flex: 1 0 0%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
  .col-xl-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
  .col-xl-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
  .col-xl-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
  .col-xl-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
  .col-xl-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
  .col-xl-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
  .col-xl-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
  .col-xl-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
  .col-xl-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
  .col-xl-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }

  .offset-xl-0  { margin-left: 0; }
  .offset-xl-1  { margin-left: calc(1  / 12 * 100%); }
  .offset-xl-2  { margin-left: calc(2  / 12 * 100%); }
  .offset-xl-3  { margin-left: calc(3  / 12 * 100%); }
  .offset-xl-4  { margin-left: calc(4  / 12 * 100%); }
  .offset-xl-5  { margin-left: calc(5  / 12 * 100%); }
  .offset-xl-6  { margin-left: calc(6  / 12 * 100%); }
  .offset-xl-7  { margin-left: calc(7  / 12 * 100%); }
  .offset-xl-8  { margin-left: calc(8  / 12 * 100%); }
  .offset-xl-9  { margin-left: calc(9  / 12 * 100%); }
  .offset-xl-10 { margin-left: calc(10 / 12 * 100%); }
  .offset-xl-11 { margin-left: calc(11 / 12 * 100%); }

  .order-xl-first { order: -1; }
  .order-xl-last  { order: 13; }
  .order-xl-0  { order: 0;  }
  .order-xl-1  { order: 1;  }
  .order-xl-2  { order: 2;  }
  .order-xl-3  { order: 3;  }
  .order-xl-4  { order: 4;  }
  .order-xl-5  { order: 5;  }
  .order-xl-6  { order: 6;  }

  .d-xl-none  { display: none  !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex  { display: flex  !important; }
}

/* ==========================================================
   9. 2XL  —  ≥ 1536px
   ========================================================== */
@media (min-width: 1536px) {
  .col-2xl      { flex: 1 0 0%; }
  .col-2xl-auto { flex: 0 0 auto; width: auto; }
  .col-2xl-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
  .col-2xl-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
  .col-2xl-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
  .col-2xl-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
  .col-2xl-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
  .col-2xl-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
  .col-2xl-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
  .col-2xl-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
  .col-2xl-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
  .col-2xl-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
  .col-2xl-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
  .col-2xl-12 { flex: 0 0 auto; width: 100%; }

  .d-2xl-none  { display: none  !important; }
  .d-2xl-block { display: block !important; }
  .d-2xl-flex  { display: flex  !important; }
}

/* ==========================================================
   10. GUTTER UTILITIES
       .g-0 through .g-5 control row gap on all axes
       .gx-* = horizontal only, .gy-* = vertical only
   ========================================================== */
.g-0  { --grid-gutter: 0;      }
.g-1  { --grid-gutter: 0.25rem; }
.g-2  { --grid-gutter: 0.5rem;  }
.g-3  { --grid-gutter: 1rem;    }
.g-4  { --grid-gutter: 1.5rem;  }
.g-5  { --grid-gutter: 3rem;    }

.gx-0  { padding-right: 0; padding-left: 0; }
.gx-1  { padding-right: 0.125rem; padding-left: 0.125rem; }
.gx-2  { padding-right: 0.25rem;  padding-left: 0.25rem;  }
.gx-3  { padding-right: 0.5rem;   padding-left: 0.5rem;   }
.gx-4  { padding-right: 0.75rem;  padding-left: 0.75rem;  }
.gx-5  { padding-right: 1.5rem;   padding-left: 1.5rem;   }

.gy-0  { padding-top: 0;       padding-bottom: 0;       }
.gy-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.gy-2  { padding-top: 0.5rem;  padding-bottom: 0.5rem;  }
.gy-3  { padding-top: 1rem;    padding-bottom: 1rem;    }
.gy-4  { padding-top: 1.5rem;  padding-bottom: 1.5rem;  }
.gy-5  { padding-top: 3rem;    padding-bottom: 3rem;    }

/* ==========================================================
   11. SEMANTIC GRID HELPERS
   Simple named grid modifiers used outside the 12-col system.
   ========================================================== */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 3rem 0;
}

@media (min-width: 768px) {
    .grid--2-col { grid-template-columns: repeat(2, 1fr); }
    .grid--3-col { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================
   12. MOBILE DISPLAY HELPERS (base / xs)
   ========================================================== */
.d-none  { display: none  !important; }
.d-block { display: block !important; }
.d-flex  { display: flex  !important; }
.d-grid  { display: grid  !important; }
.d-inline       { display: inline       !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex  { display: inline-flex  !important; }