/* Purpose: Layout primitives — container, section rhythm, grid. Mobile-first. */

.container {
	width: 100%;
	max-width: var(--container-2xl);
	margin-inline: auto;
	padding-inline: var(--space-6);
}

@media (min-width: 768px) {
	.container { padding-inline: var(--space-12); }
}

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

/* Section vertical rhythm */
.section {
	position: relative;
	padding-block: var(--space-20);
}

@media (min-width: 1024px) {
	.section { padding-block: var(--space-32); }
}

/* Grid helper */
.grid {
	display: grid;
	gap: var(--grid-gap);
}

@media (min-width: 768px) {
	.grid--2 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Flow utility — vertical spacing between stacked children */
.flow > * + * { margin-top: var(--space-4); }

/* Visually hidden but screen-reader accessible */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}