/* Layout primitives — structure only, no colors.
   Combine these instead of writing new media queries per page.

   .stack        vertical rhythm between children          --gap
   .cluster      wrapping row of things (links, buttons)   --gap
   .auto-grid    as many columns as fit, each >= --min     --min, --gap
   .with-sidebar sidebar + content that stacks when narrow --side, --gap
*/

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

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 8px 12px); }
.cluster--between { justify-content: space-between; }

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr));
  gap: var(--gap, 14px);
}

.with-sidebar { display: flex; flex-wrap: wrap; gap: var(--gap, 14px); }
.with-sidebar > :first-child { flex-basis: var(--side, 220px); flex-grow: 1; }
.with-sidebar > :last-child { flex-basis: 0; flex-grow: 999; min-width: 55%; }