/* ============================================================
   Layout — Container, Grid, Section Spacing
   ============================================================ */

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

.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 800px; }

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

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

/* ── Background Variants ──────────────────────────────────── */
.bg-white   { background-color: var(--color-white); }
.bg-light   { background-color: var(--slate-50); }
.bg-dark    { background-color: var(--slate-900); }
.bg-dark-2  { background-color: var(--slate-800); }
.bg-navy        { background-color: var(--navy-700); }
.bg-navy-deep   { background-color: var(--navy-900); }
.bg-navy-light  { background-color: var(--navy-50); }
.bg-sky-light   { background-color: var(--sky-50); }

/* ── Grid System ──────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--space-6);
}

.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-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col    { display: flex; flex-direction: column; }
.gap-2       { gap: var(--space-2); }
.gap-3       { gap: var(--space-3); }
.gap-4       { gap: var(--space-4); }
.gap-6       { gap: var(--space-6); }

/* ── Responsive Breakpoints ───────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .section { padding-block: var(--space-12); }
  .section--lg { padding-block: var(--space-16); }
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .container { padding-inline: var(--space-4); }
}