/*
 * Layout primitives for shared theme and component structure.
 */

:where(.rc-container) {
	margin-inline: auto;
	max-width: calc(var(--rc-layout-content) + (2 * var(--rc-layout-gutter)));
	padding-inline: var(--rc-layout-gutter);
	width: 100%;
}

:where(.rc-container--narrow) {
	max-width: calc(var(--rc-layout-reading) + (2 * var(--rc-layout-gutter)));
}

:where(.rc-container--wide, .rc-container.alignwide) {
	max-width: calc(var(--rc-layout-wide) + (2 * var(--rc-layout-gutter)));
}

:where(.rc-container--full, .rc-container.alignfull) {
	max-width: none;
}

:where(.rc-section) {
	--rc-section-padding-block: var(--rc-section-space-medium);

	padding-block: var(--rc-section-padding-block);
}

:where(.rc-grid) {
	--rc-grid-gap-current: var(--rc-grid-gap);
	--rc-grid-min-item: 16rem;

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

:where(.rc-stack) {
	--rc-stack-gap-current: var(--rc-stack-gap);

	display: flex;
	flex-direction: column;
	gap: var(--rc-stack-gap-current);
}