/* ==========================================================================
   Layout primitives — containers, section rhythm, grid helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }

/* Section vertical rhythm deliberately varies — see §16: not every section
   gets the same padding, so scale between these three by hand per section. */
.section { padding-block: clamp(4rem, 8vw, 7.5rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section-loose { padding-block: clamp(5rem, 10vw, 9rem); }

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

.grid {
  display: grid;
  gap: var(--sp-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); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }

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

main { display: block; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}
.split-reverse { direction: rtl; }
.split-reverse > * { direction: ltr; }
@media (max-width: 900px) {
  .split-reverse { direction: ltr; }
}