/*
 * globals.css — Global layout & reset rules
 *
 * Linked by every page after tokens.css.
 * Do NOT redeclare container or section padding in component CSS.
 * Adjust layout behaviour by overriding the tokens in tokens.css.
 */

/* ── Section ─────────────────────────────────────────────────────────────────
 * Semantic full-width wrapper. Owns the gutter padding and section spacing.
 * Apply background colours and images to .section, never to .container.
 * ──────────────────────────────────────────────────────────────────────────── */
.section {
  display:        flex;
  flex-direction: column;
  width:          100%;
  row-gap:        var(--space--l);
  padding-top:    var(--space--2xl);
  padding-right:  var(--space--s);
  padding-bottom: var(--space--2xl);
  padding-left:   var(--space--s);
}

/* ── Container ────────────────────────────────────────────────────────────────
 * Inner wrapper inside every <section>. Centres content, constrains width,
 * and establishes the flex column context for components stacked inside.
 * ──────────────────────────────────────────────────────────────────────────── */
.container {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  width:          100%;
  max-width:      1320px;
  row-gap:        var(--space--l);
  column-gap:     var(--space--l);
  margin-left:    auto;
  margin-right:   auto;
}