/* ============================================================
   LAYOUT.CSS — Container, Grid & Spacing Utilities
   ============================================================ */

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

/* ---- Section base ---- */
.section {
  padding-block: var(--section-pad-y);
}

/* ---- Section header (centered intro block) ---- */
.section-header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

.section-title {
  font-size: clamp(var(--font-size-3xl), 4.5vw, var(--font-size-5xl));
  font-weight: 800;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin-block: var(--space-4) var(--space-5);
  letter-spacing: -0.03em;
}

.section-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 540px;
  margin-inline: auto;
}

/* ---- Divider ---- */
.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
}