// ────────────────────────────────────────────────────────────────
// Layout · Grid (12 Spuren, konfigurierbar)
//
// Foundation-Idee, aus Tokens gebaut: `.grid-x` ist der Träger, `.cell-*`
// bestimmen die Breite. Bewusst CSS Grid und nicht Flexbox — ein echtes
// Spurenraster kann Spans und Offsets ohne negative Margins, und der
// Baukasten nutzt Grid ohnehin schon (`.grid`, `.stage`, `.form-row`).
//
// MOBIL ZUERST: `.cell-6` gilt überall, `.cell-md-6` erst ab `md`. Die
// Breakpoints kommen aus den Tokens (`up`), keine Zahl steht hier von Hand.
//
// WAS ES NICHT GIBT: Foundations Margin-/Padding-Gutter. Abstände sind `gap`
// — das ist die eine Wahrheit, und `--grid-gutter` überschreibt sie.
// ────────────────────────────────────────────────────────────────
@use "../tokens/grid" as g;
@use "../tokens/breakpoints" as bp;

.grid-x {
  display: grid;
  grid-template-columns: repeat(g.$grid-columns, minmax(0, 1fr));
  gap: var(--grid-gutter, var(--sp-5));
}

// Eine Zelle. Ohne Klasse nimmt sie die volle Breite.
.cell {
  grid-column: span g.$grid-columns;
  min-width: 0;
}

// Spans und Offsets — die Zahl ist die Anzahl der Spuren.
@for $i from 1 through g.$grid-columns {
  .cell-#{$i} { grid-column: span #{$i}; }
  .cell-start-#{$i} { grid-column-start: #{$i}; }
}

// Eine Zelle, die sich nach ihrem Inhalt richtet.
.cell-auto { grid-column: auto; }

// Ab sm/md/lg/xl überschreiben die responsiven Spans die mobilen.
@each $name in (sm, md, lg, xl) {
  @include bp.up($name) {
    @for $i from 1 through g.$grid-columns {
      .cell-#{$name}-#{$i} { grid-column: span #{$i}; }
      .cell-#{$name}-start-#{$i} { grid-column-start: #{$i}; }
    }
  }
}

// ── Abstände ─────────────────────────────────────────────────────
.grid-x--gap-none { gap: 0; }
.grid-x--gap-sm   { gap: var(--sp-3); }
.grid-x--gap-lg   { gap: var(--sp-7); }

// ── Ausrichtung der Zellen ───────────────────────────────────────
.grid-x--top     { align-items: start; }
.grid-x--middle  { align-items: center; }
.grid-x--bottom  { align-items: end; }
.grid-x--stretch { align-items: stretch; }
.grid-x--center  { justify-items: center; }
.grid-x--end     { justify-items: end; }

// ── Flex-Helfer ──────────────────────────────────────────────────
// Für die Fälle, in denen Flex schlicht besser ist als ein Raster.
.flex           { display: flex; gap: var(--sp-3); }
.flex--wrap     { flex-wrap: wrap; }
.flex--between  { justify-content: space-between; }
.flex--center   { align-items: center; }
.flex--1        { flex: 1 1 auto; min-width: 0; }