/* ============================================================================
   layout.css — Containers, grids and spacing/flex utilities (IAPrompt #33).
   All classes are prefixed (wa-/u-) and opt-in.
   ============================================================================ */
.wa-container { max-width: 1100px; margin: 0 auto; padding: var(--wa-space-8) var(--wa-space-6); }
.wa-container--wide { max-width: 1400px; }
.wa-container--narrow { max-width: 720px; }

.wa-grid { display: grid; gap: var(--wa-space-5); align-items: start; }
.wa-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wa-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wa-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wa-grid--main { grid-template-columns: 3fr 2fr; }

/* Flex utilities */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-wrap { flex-wrap: wrap; }
.u-items-center { align-items: center; }
.u-items-end { align-items: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-gap-1 { gap: var(--wa-space-1); }
.u-gap-2 { gap: var(--wa-space-2); }
.u-gap-3 { gap: var(--wa-space-3); }
.u-gap-4 { gap: var(--wa-space-4); }
.u-flex-1 { flex: 1; }

/* Spacing utilities */
.u-mt-2 { margin-top: var(--wa-space-2); }
.u-mt-4 { margin-top: var(--wa-space-4); }
.u-mt-6 { margin-top: var(--wa-space-6); }
.u-mb-2 { margin-bottom: var(--wa-space-2); }
.u-mb-4 { margin-bottom: var(--wa-space-4); }
.u-mb-6 { margin-bottom: var(--wa-space-6); }
.u-p-4 { padding: var(--wa-space-4); }
.u-p-6 { padding: var(--wa-space-6); }

/* Generic page scaffold used by refactored pages */
.wa-page { padding: var(--wa-space-8) 2.5rem; max-width: 1400px; margin: 0 auto; }