/* ── Container ───────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ── Grid helpers ────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

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

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

/* ── Section spacing ─────────────────────────────────────────── */
.section {
    padding-block: var(--space-20);
}

.section--sm {
    padding-block: var(--space-12);
}

.section--bg-soft { background: var(--color-bg-soft); }
.section--bg-dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); }

/* ── Flex helpers ────────────────────────────────────────────── */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ── Page wrapper ────────────────────────────────────────────── */
#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content { flex: 1; }