/* Layout primitives: container, sections, grid */

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

.section {
  padding-block: clamp(2.75rem, 4.5vw + 1rem, 6rem);
}

.section--warm   { background: var(--surface-warm); }
.section--accent { background: var(--surface-accent); color: var(--color-black); }
.section--dark   { background: var(--color-black); color: var(--color-cream); }

.section__head {
  display: grid;
  gap: var(--space-4);
  max-width: 62ch;
  margin-bottom: var(--space-7);
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1.15fr 1fr; }
  .split--reverse { grid-template-columns: 1fr 1.15fr; }
  .split--reverse > :first-child { order: 2; }
}