/**
 * Container Component Styles
 *
 * Max-width content container with responsive padding.
 * Provides consistent content width across the site.
 */

.container {
	width: auto;
	margin-inline: auto;
	padding-inline: var(--spacing-container, 1rem);
}

/* Size variants */

/* Narrow container (prose, forms) */
.container--narrow {
	max-width: 48rem; /* 768px */
}

/* Default container (most content) */
.container--default {
	max-width: 80rem; /* 1280px */
}

/* Wide container (featured content) */
.container--wide {
	max-width: var(--content-max-width, 100rem);
}

/* Full width (no max-width, just padding) */
.container--full {
	max-width: none;
}

/* Responsive padding */
@media (width >= 48rem) {
	.container {
		padding-inline: var(--spacing-container-md, 2rem);
	}
}

@media (width >= 80rem) {
	.container {
		padding-inline: var(--spacing-container-lg, 3rem);
	}
}

/* Remove padding when nested */
.container .container {
	padding-inline: 0;
}