/* ════════════════════════════════════════════════════════════════════
   LAYOUT.CSS — Layout primitives
   .section, .container, .stack, .grid — structural only.
   Never add visual styles (color, shadow, border) here.
   ════════════════════════════════════════════════════════════════════ */

@layer layouts {

  /* ── Section ──────────────────────────────────────────────────────
     Owns vertical rhythm (padding-block) and edge breathing (padding-inline).
     NEVER add flex, grid, or max-width here. */

  .section {
    padding-block: var(--section-space-m);
    padding-inline: var(--gutter);
  }

  .section--s  { padding-block: var(--section-space-s); }
  .section--l  { padding-block: var(--section-space-l); }
  .section--flush { padding-block: 0; }


  /* ── Container ────────────────────────────────────────────────────
     Owns horizontal constraint. Centers content.
     NEVER add padding, flex, or grid here. */

  .container {
    max-inline-size: var(--content-width);
    margin-inline: auto;
  }

  .container--narrow {
    max-inline-size: var(--content-width-narrow);
  }

  .container--wide {
    max-inline-size: var(--content-width-wide);
  }

  .container--full {
    max-inline-size: 100%;
  }


  /* ── Stack ────────────────────────────────────────────────────────
     Vertical flex with gap. Children stack top to bottom.
     NEVER add padding, background, or border here. */

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  .stack--xs  { gap: var(--space-3xs); }
  .stack--s   { gap: var(--space-2xs); }
  .stack--m   { gap: var(--content-gap); }
  .stack--l   { gap: var(--container-gap); }
  .stack--xl  { gap: var(--space-xl); }


  /* ── Grid ─────────────────────────────────────────────────────────
     CSS grid with gap. Column definitions added via modifiers or inline.
     NEVER add padding, background, or border here. */

  .grid {
    display: grid;
    gap: var(--grid-gap);
  }

  .grid--2    { grid-template-columns: var(--grid-2); }
  .grid--3    { grid-template-columns: var(--grid-3); }
  .grid--4    { grid-template-columns: var(--grid-4); }

  .grid--auto-s  { grid-template-columns: var(--auto-grid-s); }
  .grid--auto-m  { grid-template-columns: var(--auto-grid-m); }
  .grid--auto-l  { grid-template-columns: var(--auto-grid-l); }


  /* ── Cluster ──────────────────────────────────────────────────────
     Horizontal flex with wrapping. For tags, badges, inline groups. */

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap);
    align-items: center;
  }


  /* ── Responsive grid collapses ────────────────────────────────── */

  @media (max-width: 47.99em) {
    .grid--2,
    .grid--3,
    .grid--4 {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 48em) and (max-width: 63.99em) {
    .grid--3,
    .grid--4 {
      grid-template-columns: var(--grid-2);
    }
  }

}