/* ==========================================================================
   Layout — containers and section architecture
   Every section follows: <section class="section"><div class="container">…</div></section>
   ========================================================================== */

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

/* ---- Section rhythm ---- */
.section {
  padding-block: var(--section-y);
}
.section-sm { padding-block: var(--section-y-sm); }
.section-lg { padding-block: var(--section-y-lg); }

/* Remove doubled spacing when two same-tone sections stack (optional helper) */
.section.is-flush-top { padding-top: 0; }
.section.is-flush-bottom { padding-bottom: 0; }

/* ---- Section tone variants ---- */
.section-muted { background-color: var(--bg-muted); }
.section-blue  { background-color: var(--bg-blue); }

.section-dark {
  background-color: var(--bg-dark);
  color: var(--text-inverse);
}
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6 { color: var(--text-inverse); }
.section-dark p,
.section-dark .text-secondary { color: var(--neutral-400); }
.section-dark .eyebrow { color: var(--blue-300); }

/* ---- Full-bleed content inside a constrained container ---- */
.full-width {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ---- Page shell ---- */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-main {
  flex: 1 0 auto;
}