/* ============================================================
   BLACK RIVER DESIGN SYSTEM — Layout
   Containers, grids, rules, stacks
   ============================================================ */

/* ── Container ──────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--wide {
  max-width: 1440px;
}

.container--narrow {
  max-width: 720px;
}

/* ── Story Grid: Main + Sidebar (7fr / 5fr) ─────────────── */

.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .story-grid {
    grid-template-columns: var(--grid-story-main) var(--grid-story-side);
  }
}

/* ── Content Grid: Article Main + Sidebar ────────────────── */

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .content-grid {
    grid-template-columns: 1fr var(--sidebar-width);
  }
}

/* ── Card Grid: Flexible card layout ─────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

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

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

/* ── Duo Grid: 2-column half-width ─────────────────────── */

.duo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

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

/* ── Headline Grid: 3-column Mail Online style ───────────── */

.headline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

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

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

.headline-grid > * {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

/* ── River Blue Rules ────────────────────────────────────── */

.rule {
  border: none;
  height: 4px;
  background: var(--color-river);
}

.rule--thick {
  height: 6px;
}

.rule--thin {
  height: 2px;
}

.rule--subtle {
  height: 1px;
  background: var(--color-border);
}

/* Border-top variants for sections */
.rule-top {
  border-top: 4px solid var(--color-river);
  padding-top: var(--space-3);
}

.rule-top--thick {
  border-top: 6px solid var(--color-river);
  padding-top: var(--space-3);
}

/* ── Stack Utilities (vertical spacing) ──────────────────── */

.stack > * + * {
  margin-top: var(--space-4);
}

.stack--tight > * + * {
  margin-top: var(--space-2);
}

.stack--loose > * + * {
  margin-top: var(--space-6);
}

.stack--xl > * + * {
  margin-top: var(--space-8);
}

/* ── Section Spacing ─────────────────────────────────────── */

.section {
  padding-block: var(--space-6);
}

.section + .section {
  border-top: 1px solid var(--color-border-subtle);
}

/* ── Flex Utilities ──────────────────────────────────────── */

.flex {
  display: flex;
}

.flex--between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex--gap {
  gap: var(--space-4);
}

.flex--gap-sm {
  gap: var(--space-2);
}

.flex--wrap {
  flex-wrap: wrap;
}

/* ── Full-bleed image ────────────────────────────────────── */

.full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* ── Tile Grid: Square mosaic layout ─────────────────────── */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}

.tile-grid > .tile--large {
  grid-column: span 2;
  grid-row: span 2;
}

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

@media (min-width: 900px) {
  .tile-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Tile Stack: tall tile + 3 stacked beside it ─────────── */

.tile-stack {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 3px;
  margin-top: 3px;
}

.tile-stack > .tile:first-child {
  grid-row: 1 / -1;
  aspect-ratio: auto;
}

.tile-stack > .tile:not(:first-child) {
  aspect-ratio: 1 / 1;
}