/* ============================================================================
 * layout/containers.css — page-level layout primitives
 * ============================================================================
 * Depends on: core/tokens.css
 * Authoritative source: ForceX_Typography_and_CSS_Catalog_Spec.md §"Layout"
 *                       ForceX_Page_Standard_Using_Signup_Baseline.md §"Page Container"
 *
 * Container variant choice = page archetype:
 *   .container-form     → Type A (auth/workflow — signup, verify, reset)
 *   .container-reading  → Type B/E (marketing, docs)
 *   .container-standard → Type C narrow (product utility)
 *   .container-wide     → Type C wide (analytics, marketing hero)
 *   .container-app      → Type D (explorer/data canvas)
 * ========================================================================== */

.page-container {
  position: relative;
  z-index: var(--z-base);
  margin: 0 auto;
  padding-left: var(--page-padding-x-desktop);
  padding-right: var(--page-padding-x-desktop);
}
@media (max-width: 600px) {
  .page-container {
    padding-left: var(--page-padding-x-mobile);
    padding-right: var(--page-padding-x-mobile);
  }
}

.container-form     { max-width: var(--container-form); }
.container-reading  { max-width: var(--container-reading); }
.container-standard { max-width: var(--container-standard); }
.container-wide     { max-width: var(--container-wide); }
.container-app      { max-width: var(--container-app); }

/* Vertical padding from header — applied on top of .page-container.
 * Accounts for the fixed header height so content starts below the bar. */
.page-container-top {
  padding-top: calc(var(--header-height) + var(--space-10));
  padding-bottom: var(--space-12);
}
@media (max-width: 600px) {
  .page-container-top {
    padding-top: calc(var(--header-height-mobile) + var(--space-8));
    padding-bottom: var(--space-10);
  }
}