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

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 3rem);
}

/* --- Grid system --- */
.grid {
  display: grid;
  gap: 2rem;
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

/* --- Section spacing --- */
.section {
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.section--dark {
  background: var(--color-dark);
  color: #fff;
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: #fff;
}

.section--alt {
  background: #fff;
}

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

/* --- Spacing helpers --- */
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }