/* Layout primitives — the only place layout declarations should live.
 *
 * Rule 1: Parents own spacing (.stack, .row)
 * Rule 2: Width at container boundaries (.wrap)
 * Rule 3: Alignment is explicit and rare (.align-*, .justify-*)
 *
 * Component CSS handles styling (colors, borders, typography).
 * Layout (spacing, width, alignment) lives here + in markup.
 */

/* --- Rule 1: Vertical stacking --- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--tight { gap: 4px; }
.stack--loose { gap: 24px; }
.stack--2 { gap: 2px; }
.stack--8 { gap: 8px; }
.stack--16 { gap: 16px; }

/* --- Rule 1: Horizontal grouping --- */
.row { display: flex; align-items: center; gap: 8px; }
.row--tight { gap: 4px; }
.row--loose { gap: 16px; }
.row--2 { gap: 2px; }
.row--6 { gap: 6px; }
.row--12 { gap: 12px; }

/* --- Rule 2: Width containment --- */
.wrap { width: min(100%, 960px); margin-inline: auto; padding-inline: 24px; }
.wrap--narrow { width: min(100%, 600px); }
.wrap--medium { width: min(100%, 768px); }
.wrap--wide { width: min(100%, 1200px); }
.wrap--fluid { width: 100%; }

/* --- Rule 2: Fill available space (children) --- */
.fill { flex: 1; min-width: 0; }

/* --- Rule 3: Alignment (at layout shell only) --- */
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-start { align-self: flex-start; }

/* --- Modifiers --- */
.stack--0 { gap: 0; }
.stack--6 { gap: 6px; }
.row--wrap { flex-wrap: wrap; }
.no-shrink { flex-shrink: 0; }

/* --- Domain grids --- */
.grid-cards { display: grid; gap: 16px; }
.grid-cards--2 { grid-template-columns: repeat(2, 1fr); }
.grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
.grid-cards--4 { grid-template-columns: repeat(4, 1fr); }
.grid-cards--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-cards--auto-tight { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px; }
@media (max-width: 640px) { .grid-cards { grid-template-columns: 1fr; } }

.grid-props { display: grid; grid-template-columns: 100px 1fr; gap: 4px; align-items: center; }
.grid-state { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.grid-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px; }
.grid-block { display: grid; gap: 4px; }