/* layout.css — containers, grids, section scaffolding */

@layer layout {
  .container {
    width: 100%;
    max-width: var(--w-edge);
    margin-inline: auto;
    padding-inline: clamp(var(--s-4), 4vw, var(--s-8));
  }

  .container--wide     { max-width: var(--w-wide); }
  .container--medium   { max-width: var(--w-medium); }
  .container--narrow   { max-width: var(--w-narrow); }
  .container--prose    { max-width: var(--w-prose); }

  /* Section vertical rhythm */
  .section {
    padding-block: clamp(var(--s-8), 10vw, var(--s-10));
    position: relative;
  }
  .section--tight { padding-block: clamp(var(--s-7), 7vw, var(--s-9)); }
  .section--loose { padding-block: clamp(var(--s-9), 14vw, var(--s-11)); }

  .section--dark {
    background: var(--ink-950);
    color: var(--fg-onDark);
  }
  .section--dark :where(h1, h2, h3, h4, h5) { color: var(--fg-onDark); }
  .section--dark .eyebrow { color: var(--fg-onDark-muted); }

  .section--alt { background: var(--bone-100); }
  .section--panel { background: var(--bone-200); }

  /* 12-col grid — desktop */
  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--s-5);
  }

  @media (max-width: 900px) {
    .grid-12 { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
  }

  /* Utility spans for grid-12 */
  .col-1  { grid-column: span 1; }
  .col-2  { grid-column: span 2; }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-9  { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
  .col-12 { grid-column: span 12; }

  .start-2  { grid-column-start: 2; }
  .start-3  { grid-column-start: 3; }
  .start-4  { grid-column-start: 4; }
  .start-5  { grid-column-start: 5; }
  .start-7  { grid-column-start: 7; }

  @media (max-width: 900px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-12 {
      grid-column: 1 / -1;
    }
    .start-2, .start-3, .start-4, .start-5, .start-7 { grid-column-start: auto; }
  }

  /* Stack utility */
  .stack > * + * { margin-block-start: var(--stack, var(--s-4)); }
  .stack-tight > * + * { margin-block-start: var(--s-2); }
  .stack-loose > * + * { margin-block-start: var(--s-6); }
  .stack-xl    > * + * { margin-block-start: var(--s-8); }

  /* Cluster (horizontal wrap) */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--s-3));
    align-items: center;
  }

  /* Split layout — uneven halves */
  .split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s-8);
    align-items: start;
  }
  .split--reverse { grid-template-columns: 7fr 5fr; }

  @media (max-width: 900px) {
    .split, .split--reverse { grid-template-columns: 1fr; gap: var(--s-6); }
  }

  /* Asymmetric offset block */
  .offset-right { margin-inline-start: auto; }
  .offset-left  { margin-inline-end: auto; }

  /* Flow utilities */
  .flow-tight { --stack: var(--s-2); }
  .flow       { --stack: var(--s-4); }
  .flow-loose { --stack: var(--s-6); }

  /* Edge band — breaks container for full-bleed inside padded section */
  .edge-band {
    margin-inline: calc(-1 * clamp(var(--s-4), 4vw, var(--s-8)));
    padding-inline: clamp(var(--s-4), 4vw, var(--s-8));
  }

  /* Baseline for numeric pair layouts */
  .pair {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--s-4);
    align-items: baseline;
  }
}