/* ===== Layout Utilities ===== */

/* --- Section vertical rhythm --- */
.section {
  padding-block: var(--space-12);
}

.section--tight {
  padding-block: var(--space-8);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--accent {
  background-color: var(--color-bg-accent);
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.section__title {
  margin-bottom: var(--space-3);
}

.section__subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* --- Two-column grid --- */
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .row--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .row--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Section divider --- */
.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* --- Text utilities --- */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

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