/* ==========================================================================
   layout.css — page-level layout primitives
   .container — max-width wrapper used everywhere.
   section.block — standard vertical rhythm for content sections.
   .block-head / .block-foot — section heading/footer pattern (kicker + h2 + p).
   ========================================================================== */

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

/* Standard content section */
section.block { padding: var(--space-88) 0; }
section.block.alt { background: var(--bg-soft); }
section.block.block--tight-top { padding-top: var(--space-44); }

/* (.kicker is its own component — see components/kicker.css) */

/* Section heading group (kicker + h2 + lead paragraph) */
.block-head {
  text-align: center;
  margin-bottom: var(--space-36);
}
.block-head h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-10);
}
.block-head p {
  margin: 0 auto;
  color: var(--ink-3);
  font-size: var(--fs-lead);
  max-width: 60ch;
}
.block-head.left { text-align: left; }
.block-head.left p { margin-left: 0; }

/* Section footer (e.g. "Browse all sessions" button under a card grid) */
.block-foot {
  text-align: center;
  margin-top: var(--space-40);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Phone container padding: 16px L/R is the consistent edge gutter for
     all content blocks. */
  .container { padding: 0 var(--space-16); }
  section.block { padding: var(--space-56) 0; }
  section.block.block--tight-top { padding-top: var(--space-28); }
  .block-head h2 { font-size: var(--fs-h2-sm); }
}