/* ============================================================
   layout.css — containers, section padding, grid/flex utilities
   ============================================================ */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* --- Section padding -------------------------------------- */
.section-pad      { padding: var(--section-pad-lg) 0; }
.section-pad-md   { padding: var(--section-pad-md) 0; }
.section-pad-sm   { padding: var(--section-pad-sm) 0; }

/* --- Section backgrounds (paired with .section-pad) ------- */
.bg-primary  { background: var(--color-bg-primary); }
.bg-surface  { background: var(--color-bg-surface); }
.bg-elevated { background: var(--color-bg-elevated); }

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

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

/* --- Text alignment --------------------------------------- */
.text-center { text-align: center; }