/* ════════════════════════════════════════════════════════
   layout.css — @layer layout
   Stack, Cluster, Grid, Container. Pure CSS primitives.
   Spec §6 (layout primitives), §5.4 (spacing), §5.8 (containers).
════════════════════════════════════════════════════════ */

@layer layout {
  /* ─── Stack — vertical flex with token gap ──────────────────── */
  .stack-0  { display: flex; flex-direction: column; gap: 0; }
  .stack-1  { display: flex; flex-direction: column; gap: var(--space-1); }
  .stack-2  { display: flex; flex-direction: column; gap: var(--space-2); }
  .stack-3  { display: flex; flex-direction: column; gap: var(--space-3); }
  .stack-4  { display: flex; flex-direction: column; gap: var(--space-4); }
  .stack-6  { display: flex; flex-direction: column; gap: var(--space-6); }
  .stack-8  { display: flex; flex-direction: column; gap: var(--space-8); }
  .stack-10 { display: flex; flex-direction: column; gap: var(--space-10); }
  .stack-12 { display: flex; flex-direction: column; gap: var(--space-12); }
  .stack-16 { display: flex; flex-direction: column; gap: var(--space-16); }

  /* ─── Cluster — horizontal flex, wrap, token gap ────────────── */
  .cluster-1  { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
  .cluster-2  { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .cluster-3  { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .cluster-4  { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
  .cluster-6  { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; }

  /* ─── Grid — auto-fill grid for recipe cards ────────────────── */
  .grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-6);
  }

  /* ─── Container width helpers ───────────────────────────────── */
  .container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--space-4); }
  .container-base   { max-width: var(--container-base);   margin-inline: auto; padding-inline: var(--space-4); }
  .container-wide   { max-width: var(--container-wide);   margin-inline: auto; padding-inline: var(--space-4); }

  /* ─── Divider — horizontal hairline ─────────────────────────── */
  .divider {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-4);
  }
}