/**
 * Global layout primitives.
 */

.container,
.container-wide,
.container-narrow {
	width: min(
		calc(100% - var(--gutter) - var(--gutter)),
		var(--container-default)
	);
	margin-inline: auto;
}

.container-wide {
	max-width: var(--container-wide);
}

.container-narrow {
	max-width: var(--container-narrow);
}

.content-measure {
	max-width: var(--content-measure);
}

.section {
	padding-block: var(--section-space);
}

.section-compact {
	padding-block: var(--section-space-compact);
}

.section-flush {
	padding-block: 0;
}

.flow > * {
	margin-block: 0;
}

.flow > * + * {
	margin-block-start: var(--flow-space, var(--space-md));
}

.site-main {
	min-width: 0;
}

/**
 * Flexible responsive grid.
 *
 * Components can override:
 * --grid-min
 * --grid-gap
 */
.grid {
	--grid-min: 16rem;
	--grid-gap: var(--space-lg);

	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, var(--grid-min)), 1fr)
	);
	gap: var(--grid-gap);
}

/**
 * Horizontal group that wraps safely on smaller screens.
 */
.cluster {
	--cluster-gap: var(--space-sm);

	display: flex;
	flex-wrap: wrap;
	gap: var(--cluster-gap);
	align-items: center;
}

/**
 * Two-column composition used by split sections.
 *
 * Components remain responsible for their own visual styling.
 */
.split {
	--split-gap: var(--space-xl);

	display: grid;
	gap: var(--split-gap);
}

.split > * {
	min-width: 0;
}

@media (min-width: 48rem) {
	.split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}
}