/* ==========================================================================
   Layout — containers, grid, sections, article breakout grid
   ========================================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--container-width));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - 2 * var(--gutter), var(--container-wide));
  margin-inline: auto;
}

/* ---- Editorial grid: 4 → 8 → 12 columns ---------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-xl);
}

.grid > * {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* ---- Sections ------------------------------------------------------------ */
.section {
  padding-block: var(--space-2xl);
}

.section--tight-top {
  padding-top: var(--space-lg);
}

.section--surface {
  background: var(--color-surface);
}

.section--inverse {
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}

/* Heft-style section head: strong rule, index number, title, "view all" */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-xl);
  border-top: var(--rule);
}

.section-head__index {
  color: var(--color-muted);
  min-width: 3.5em;
}

.section-head__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.section-head__link {
  margin-left: auto;
}

/* Sub-topic row under a section head (Classics, Modern Icons …) */
.topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  width: 100%;
  margin-top: var(--space-xs);
  padding: 0;
  list-style: none;
  color: var(--color-muted);
}

.topic-list a {
  transition: color var(--dur-fast) var(--ease-out);
}

.topic-list a:hover {
  color: var(--color-text);
}

/* ---- Article breakout grid ----------------------------------------------
   Named lines: full | wide | content. Children sit in "content" by default;
   images can break out with .is-wide or .is-full.                          */
.breakout {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, 12rem)
    [content-start] min(var(--article-width), 100% - 2 * var(--gutter))
    [content-end] minmax(0, 12rem)
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
}

.breakout > * {
  grid-column: content;
}

.breakout > .is-wide {
  grid-column: wide;
}

.breakout > .is-full {
  grid-column: full;
}

.topic-list a[aria-current] {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}