/* ============================================================
   LAYOUT.CSS — In Full Effect
   Containers, section rhythm, grid helpers.
   ============================================================ */

/* ── Containers ──────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container--narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Section rhythm ──────────────────────────────────────── */
section          { padding: 6rem 0; }
section.compact  { padding: 3rem 0; }

/* ── Page system (SPA) ───────────────────────────────────── */
.page         { display: none; }
.page.active  { display: block; }

/* ── Two-column grids ────────────────────────────────────── */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.grid-2col--wide {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 4rem;
  align-items: start;
}

/* ── Responsive breakpoints ──────────────────────────────── */
@media (max-width: 900px) {
  .grid-2col,
  .grid-2col--wide { grid-template-columns: 1fr; gap: 3rem; }
}