/**
 * @file
 * Container layout styles.
 *
 * Defined here so .container width classes are available theme-wide
 * (global library), not only when the Container SDC is rendered.
 *
 * FND-2 (DONI-542) — THE CONTAINER RULE LIVES IN css/base/variables.css.
 * This file applies it; it does not restate it. Default max-width is
 * --page-width (1368px) and the horizontal padding is --gutter-fluid,
 * which needs no media query.
 *
 * ⚠️ Two other files declare .container: css/components/layout.css and
 * components/container/container.css (the SDC, duplicated so Canvas can
 * attach the component library alone). All three must stay identical.
 * Before FND-2 they were not: their fallbacks disagreed — 1368 vs 1440
 * for the width, 84px vs 120px for the gutter — so whichever loaded
 * last silently decided the page.
 */

.container {
  width: 100%;
  max-width: var(--page-width, 1368px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-fluid, 24px);
  padding-right: var(--gutter-fluid, 24px);
  box-sizing: border-box;
}

/* Width: narrow — 864px content width, same gutter either side */
.container--narrow {
  max-width: calc(var(--container-narrow-max-width, 864px) + var(--gutter-fluid, 24px) * 2);
}

/* Width: full */
.container--full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}