/**
 * Container System
 *
 * VISUAL THEME FRAMEWORK.
 *
 * A container centers content and caps its width at one of four
 * breakpoint-driven sizes, with consistent side gutters. This is a
 * layout primitive, not a section — any section's existing __inner
 * wrapper class can adopt .atb-container alongside it without any
 * markup change, since CSS allows multiple classes on one element.
 *
 * KNOWN CSS LIMITATION (documented, not hidden): custom properties
 * cannot be referenced inside @media conditions in any current
 * browser. --atb-breakpoint-* tokens exist in tokens.css for
 * documentation/JS consistency, but the @media rules below
 * necessarily hardcode the same pixel values. If a breakpoint token
 * value ever changes, the corresponding @media value in this
 * framework's files must be updated to match by hand — there is no
 * way around this with token-driven CSS alone.
 *
 * TOKEN-ONLY: every width/spacing value reads from var(--atb-*).
 */

.atb-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--atb-container-gutter, 1.5rem);
	padding-right: var(--atb-container-gutter, 1.5rem);
}

.atb-container--sm {
	max-width: var(--atb-container-sm, 640px);
}

.atb-container--md {
	max-width: var(--atb-container-md, 768px);
}

.atb-container--lg {
	max-width: var(--atb-container-lg, 1024px);
}

.atb-container--xl {
	max-width: var(--atb-container-xl, 1200px);
}

/* Default container width when no size modifier is present. */
.atb-container:not([class*="atb-container--"]) {
	max-width: var(--atb-container-xl, 1200px);
}