/* ==========================================================================
   Grid System — Mobile-first 12-column with offsets
   Breakpoints: sm 576px · md 768px · lg 992px · xl 1200px
   ========================================================================== */

/* ── Container ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
}

@media (min-width: 576px)  { .container { max-width: var(--container-sm); } }
@media (min-width: 768px)  { .container { max-width: var(--container-md); } }
@media (min-width: 992px)  { .container { max-width: var(--container-lg); } }
@media (min-width: 1200px) { .container { max-width: var(--container-xl); } }

.container--fluid {
  max-width: 100%;
}

.container--narrow {
  max-width: var(--container-md);
}

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

.row--no-gutter {
  margin-left: 0;
  margin-right: 0;
}

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

.row--center {
  justify-content: center;
}

.row--between {
  justify-content: space-between;
}

.row--align-center {
  align-items: center;
}

.row--align-stretch {
  align-items: stretch;
}

/* ── Columns base ──────────────────────────────────────────────────────── */
[class*="col"] {
  position: relative;
  width: 100%;
  padding-left: calc(var(--grid-gutter) / 2);
  padding-right: calc(var(--grid-gutter) / 2);
}

/* ── Default (xs, mobile-first) ────────────────────────────────────────── */
.col-1   { flex: 0 0 calc(100% * 1 / 12);  max-width: calc(100% * 1 / 12);  }
.col-2   { flex: 0 0 calc(100% * 2 / 12);  max-width: calc(100% * 2 / 12);  }
.col-3   { flex: 0 0 calc(100% * 3 / 12);  max-width: calc(100% * 3 / 12);  }
.col-4   { flex: 0 0 calc(100% * 4 / 12);  max-width: calc(100% * 4 / 12);  }
.col-5   { flex: 0 0 calc(100% * 5 / 12);  max-width: calc(100% * 5 / 12);  }
.col-6   { flex: 0 0 calc(100% * 6 / 12);  max-width: calc(100% * 6 / 12);  }
.col-7   { flex: 0 0 calc(100% * 7 / 12);  max-width: calc(100% * 7 / 12);  }
.col-8   { flex: 0 0 calc(100% * 8 / 12);  max-width: calc(100% * 8 / 12);  }
.col-9   { flex: 0 0 calc(100% * 9 / 12);  max-width: calc(100% * 9 / 12);  }
.col-10  { flex: 0 0 calc(100% * 10 / 12); max-width: calc(100% * 10 / 12); }
.col-11  { flex: 0 0 calc(100% * 11 / 12); max-width: calc(100% * 11 / 12); }
.col-12  { flex: 0 0 100%;                  max-width: 100%;                  }

.col-offset-0  { margin-left: 0; }
.col-offset-1  { margin-left: calc(100% * 1 / 12);  }
.col-offset-2  { margin-left: calc(100% * 2 / 12);  }
.col-offset-3  { margin-left: calc(100% * 3 / 12);  }
.col-offset-4  { margin-left: calc(100% * 4 / 12);  }
.col-offset-5  { margin-left: calc(100% * 5 / 12);  }
.col-offset-6  { margin-left: calc(100% * 6 / 12);  }

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

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

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

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

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

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

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

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