/**
 * Layout utilities. Widths use min() so padding cannot cause horizontal overflow.
 */

.mavi-container {
	margin-inline: auto;
	width: min(var(--mavi-content-max), calc(100% - (var(--mavi-page-padding) * 2)));
}

.mavi-container--narrow {
	width: min(var(--mavi-content-narrow), calc(100% - (var(--mavi-page-padding) * 2)));
}

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

.mavi-section--full {
	padding-block: var(--mavi-section-spacing);
	width: 100%;
}

.mavi-grid {
	display: grid;
	gap: var(--mavi-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.mavi-stack {
	display: flex;
	flex-direction: column;
	gap: var(--mavi-space-md);
}

.mavi-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mavi-space-sm);
	align-items: center;
}

.mavi-stack > *,
.mavi-cluster > *,
.mavi-grid > * {
	min-width: 0;
}