/*! @crucible/design-system 0.1.0 (e95a491) — built 2026-05-26T04:32:08.542Z */
/* ─── Page container ──────────────────────────────────────────────────────────
   Centered, max-width-capped page-body wrapper with responsive horizontal
   padding. Single source of truth for the "content has nice side margins"
   feel across both stacks — Next pages compose with this via Container.tsx;
   WP templates wrap <main> content in <div class="page-container">.

   The base class applies the default width (var(--container-default)). Two
   modifiers swap the cap:
     .page-container--narrow → long-form prose (768px)
     .page-container--wide   → hero, dashboards (1280px)

   Chrome inner divs (.site-header__inner, .site-footer__inner) keep their
   own padding rules because they bundle additional layout responsibilities
   (header height, footer padding-block). Their padding-inline values match
   this file's by deliberate choice; if they diverge later, lift the
   px values to tokens. ──────────────────────────────────────────────── */

.page-container {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-default);
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .page-container { padding-inline: 2rem; }
}

@media (min-width: 1024px) {
  .page-container { padding-inline: 3rem; }
}

.page-container--narrow { max-width: var(--container-narrow); }
.page-container--wide   { max-width: var(--container-wide); }