/* ============================================================
 * Grid System — CSS Grid
 * 12-column CSS Grid, 5 breakpoints, 6 gutter variants
 * Replaces old flexbox/width-based grid (1113 -> ~200 lines)
 * ============================================================ */

/* ── Base grid container ──────────────────────────────────── */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3em;
  align-items: stretch;
}
.row > * {
  box-sizing: border-box;
  min-width: 0;
}
.row.gtr-uniform > * > :last-child {
  margin-bottom: 0;
}

/* ── Alignment ────────────────────────────────────────────── */
.row.aln-left {
  justify-items: start;
}
.row.aln-center {
  justify-items: center;
}
.row.aln-right {
  justify-items: end;
}
.row.aln-top {
  align-items: start;
}
.row.aln-middle {
  align-items: center;
}
.row.aln-bottom {
  align-items: end;
}

/* ── Column spans ─────────────────────────────────────────── */
.row > .col-1 {
  grid-column: span 1;
}
.row > .col-2 {
  grid-column: span 2;
}
.row > .col-3 {
  grid-column: span 3;
}
.row > .col-4 {
  grid-column: span 4;
}
.row > .col-5 {
  grid-column: span 5;
}
.row > .col-6 {
  grid-column: span 6;
}
.row > .col-7 {
  grid-column: span 7;
}
.row > .col-8 {
  grid-column: span 8;
}
.row > .col-9 {
  grid-column: span 9;
}
.row > .col-10 {
  grid-column: span 10;
}
.row > .col-11 {
  grid-column: span 11;
}
.row > .col-12 {
  grid-column: span 12;
}

/* ── Offsets (grid-column-start pairs with col-N for offset spans) ── */
.row > .off-1 {
  grid-column-start: 2;
}
.row > .off-2 {
  grid-column-start: 3;
}
.row > .off-3 {
  grid-column-start: 4;
}
.row > .off-4 {
  grid-column-start: 5;
}
.row > .off-5 {
  grid-column-start: 6;
}
.row > .off-6 {
  grid-column-start: 7;
}
.row > .off-7 {
  grid-column-start: 8;
}
.row > .off-8 {
  grid-column-start: 9;
}
.row > .off-9 {
  grid-column-start: 10;
}
.row > .off-10 {
  grid-column-start: 11;
}
.row > .off-11 {
  grid-column-start: 12;
}
.row > .off-12 {
  grid-column-start: 13;
}

/* ── Order ────────────────────────────────────────────────── */
.row > .imp {
  order: -1;
}

/* ── Gutters (gap values from original margin/padding system) ── *
 * gtr-0   = gap: 0       (orig: margin 0,      padding 0)
 * gtr-25  = gap: 0.75em  (orig: margin -0.375, padding 0.375)
 * gtr-50  = gap: 1.5em   (orig: margin -0.75,  padding 0.75)
 * default = gap: 3em     (orig: margin -1.5,   padding 1.5)
 * gtr-150 = gap: 4.5em   (orig: margin -2.25,  padding 2.25)
 * gtr-200 = gap: 6em     (orig: margin -3,     padding 3)
 * ── Values are same at all breakpoints; em scales with font
 * ── from tokens.css via --font-size-base / --font-size-*   */
.row.gtr-0 {
  gap: 0;
}
.row.gtr-25 {
  gap: 0.75em;
}
.row.gtr-50 {
  gap: 1.5em;
}
.row.gtr-150 {
  gap: 4.5em;
}
.row.gtr-200 {
  gap: 6em;
}

/* ══════════════════════════════════════════════════════════════
 * BREAKPOINTS — max-width, cascade small-last so it wins
 * ══════════════════════════════════════════════════════════════ */

/* ── xlarge ── ≤ 1680px ─────────────────────────────────── */
@media screen and (max-width: 1680px) {
  .row > .imp-xlarge {
    order: -1;
  }
  .row > .col-1-xlarge {
    grid-column: span 1;
  }
  .row > .col-2-xlarge {
    grid-column: span 2;
  }
  .row > .col-3-xlarge {
    grid-column: span 3;
  }
  .row > .col-4-xlarge {
    grid-column: span 4;
  }
  .row > .col-5-xlarge {
    grid-column: span 5;
  }
  .row > .col-6-xlarge {
    grid-column: span 6;
  }
  .row > .col-7-xlarge {
    grid-column: span 7;
  }
  .row > .col-8-xlarge {
    grid-column: span 8;
  }
  .row > .col-9-xlarge {
    grid-column: span 9;
  }
  .row > .col-10-xlarge {
    grid-column: span 10;
  }
  .row > .col-11-xlarge {
    grid-column: span 11;
  }
  .row > .col-12-xlarge {
    grid-column: span 12;
  }
  .row > .off-1-xlarge {
    grid-column-start: 2;
  }
  .row > .off-2-xlarge {
    grid-column-start: 3;
  }
  .row > .off-3-xlarge {
    grid-column-start: 4;
  }
  .row > .off-4-xlarge {
    grid-column-start: 5;
  }
  .row > .off-5-xlarge {
    grid-column-start: 6;
  }
  .row > .off-6-xlarge {
    grid-column-start: 7;
  }
  .row > .off-7-xlarge {
    grid-column-start: 8;
  }
  .row > .off-8-xlarge {
    grid-column-start: 9;
  }
  .row > .off-9-xlarge {
    grid-column-start: 10;
  }
  .row > .off-10-xlarge {
    grid-column-start: 11;
  }
  .row > .off-11-xlarge {
    grid-column-start: 12;
  }
  .row > .off-12-xlarge {
    grid-column-start: 13;
  }
}

/* ── large ── ≤ 1280px ──────────────────────────────────── */
@media screen and (max-width: 1280px) {
  .row > .imp-large {
    order: -1;
  }
  .row > .col-1-large {
    grid-column: span 1;
  }
  .row > .col-2-large {
    grid-column: span 2;
  }
  .row > .col-3-large {
    grid-column: span 3;
  }
  .row > .col-4-large {
    grid-column: span 4;
  }
  .row > .col-5-large {
    grid-column: span 5;
  }
  .row > .col-6-large {
    grid-column: span 6;
  }
  .row > .col-7-large {
    grid-column: span 7;
  }
  .row > .col-8-large {
    grid-column: span 8;
  }
  .row > .col-9-large {
    grid-column: span 9;
  }
  .row > .col-10-large {
    grid-column: span 10;
  }
  .row > .col-11-large {
    grid-column: span 11;
  }
  .row > .col-12-large {
    grid-column: span 12;
  }
  .row > .off-1-large {
    grid-column-start: 2;
  }
  .row > .off-2-large {
    grid-column-start: 3;
  }
  .row > .off-3-large {
    grid-column-start: 4;
  }
  .row > .off-4-large {
    grid-column-start: 5;
  }
  .row > .off-5-large {
    grid-column-start: 6;
  }
  .row > .off-6-large {
    grid-column-start: 7;
  }
  .row > .off-7-large {
    grid-column-start: 8;
  }
  .row > .off-8-large {
    grid-column-start: 9;
  }
  .row > .off-9-large {
    grid-column-start: 10;
  }
  .row > .off-10-large {
    grid-column-start: 11;
  }
  .row > .off-11-large {
    grid-column-start: 12;
  }
  .row > .off-12-large {
    grid-column-start: 13;
  }
}

/* ── medium ── ≤ 980px ───────────────────────────────────── */
@media screen and (max-width: 980px) {
  .row > .imp-medium {
    order: -1;
  }
  .row > .col-1-medium {
    grid-column: span 1;
  }
  .row > .col-2-medium {
    grid-column: span 2;
  }
  .row > .col-3-medium {
    grid-column: span 3;
  }
  .row > .col-4-medium {
    grid-column: span 4;
  }
  .row > .col-5-medium {
    grid-column: span 5;
  }
  .row > .col-6-medium {
    grid-column: span 6;
  }
  .row > .col-7-medium {
    grid-column: span 7;
  }
  .row > .col-8-medium {
    grid-column: span 8;
  }
  .row > .col-9-medium {
    grid-column: span 9;
  }
  .row > .col-10-medium {
    grid-column: span 10;
  }
  .row > .col-11-medium {
    grid-column: span 11;
  }
  .row > .col-12-medium {
    grid-column: span 12;
  }
  .row > .off-1-medium {
    grid-column-start: 2;
  }
  .row > .off-2-medium {
    grid-column-start: 3;
  }
  .row > .off-3-medium {
    grid-column-start: 4;
  }
  .row > .off-4-medium {
    grid-column-start: 5;
  }
  .row > .off-5-medium {
    grid-column-start: 6;
  }
  .row > .off-6-medium {
    grid-column-start: 7;
  }
  .row > .off-7-medium {
    grid-column-start: 8;
  }
  .row > .off-8-medium {
    grid-column-start: 9;
  }
  .row > .off-9-medium {
    grid-column-start: 10;
  }
  .row > .off-10-medium {
    grid-column-start: 11;
  }
  .row > .off-11-medium {
    grid-column-start: 12;
  }
  .row > .off-12-medium {
    grid-column-start: 13;
  }
}

/* ── small ── ≤ 736px ────────────────────────────────────── */
@media screen and (max-width: 736px) {
  .row > .imp-small {
    order: -1;
  }
  .row > .col-1-small {
    grid-column: span 1;
  }
  .row > .col-2-small {
    grid-column: span 2;
  }
  .row > .col-3-small {
    grid-column: span 3;
  }
  .row > .col-4-small {
    grid-column: span 4;
  }
  .row > .col-5-small {
    grid-column: span 5;
  }
  .row > .col-6-small {
    grid-column: span 6;
  }
  .row > .col-7-small {
    grid-column: span 7;
  }
  .row > .col-8-small {
    grid-column: span 8;
  }
  .row > .col-9-small {
    grid-column: span 9;
  }
  .row > .col-10-small {
    grid-column: span 10;
  }
  .row > .col-11-small {
    grid-column: span 11;
  }
  .row > .col-12-small {
    grid-column: span 12;
  }
  .row > .off-1-small {
    grid-column-start: 2;
  }
  .row > .off-2-small {
    grid-column-start: 3;
  }
  .row > .off-3-small {
    grid-column-start: 4;
  }
  .row > .off-4-small {
    grid-column-start: 5;
  }
  .row > .off-5-small {
    grid-column-start: 6;
  }
  .row > .off-6-small {
    grid-column-start: 7;
  }
  .row > .off-7-small {
    grid-column-start: 8;
  }
  .row > .off-8-small {
    grid-column-start: 9;
  }
  .row > .off-9-small {
    grid-column-start: 10;
  }
  .row > .off-10-small {
    grid-column-start: 11;
  }
  .row > .off-11-small {
    grid-column-start: 12;
  }
  .row > .off-12-small {
    grid-column-start: 13;
  }
}

/* ── xsmall ── ≤ 480px ───────────────────────────────────── */
@media screen and (max-width: 480px) {
  .row > .imp-xsmall {
    order: -1;
  }
  .row > .col-1-xsmall {
    grid-column: span 1;
  }
  .row > .col-2-xsmall {
    grid-column: span 2;
  }
  .row > .col-3-xsmall {
    grid-column: span 3;
  }
  .row > .col-4-xsmall {
    grid-column: span 4;
  }
  .row > .col-5-xsmall {
    grid-column: span 5;
  }
  .row > .col-6-xsmall {
    grid-column: span 6;
  }
  .row > .col-7-xsmall {
    grid-column: span 7;
  }
  .row > .col-8-xsmall {
    grid-column: span 8;
  }
  .row > .col-9-xsmall {
    grid-column: span 9;
  }
  .row > .col-10-xsmall {
    grid-column: span 10;
  }
  .row > .col-11-xsmall {
    grid-column: span 11;
  }
  .row > .col-12-xsmall {
    grid-column: span 12;
  }
  .row > .off-1-xsmall {
    grid-column-start: 2;
  }
  .row > .off-2-xsmall {
    grid-column-start: 3;
  }
  .row > .off-3-xsmall {
    grid-column-start: 4;
  }
  .row > .off-4-xsmall {
    grid-column-start: 5;
  }
  .row > .off-5-xsmall {
    grid-column-start: 6;
  }
  .row > .off-6-xsmall {
    grid-column-start: 7;
  }
  .row > .off-7-xsmall {
    grid-column-start: 8;
  }
  .row > .off-8-xsmall {
    grid-column-start: 9;
  }
  .row > .off-9-xsmall {
    grid-column-start: 10;
  }
  .row > .off-10-xsmall {
    grid-column-start: 11;
  }
  .row > .off-11-xsmall {
    grid-column-start: 12;
  }
  .row > .off-12-xsmall {
    grid-column-start: 13;
  }
}