/*
 * File: /common/css/layout.css
 *
 * MICROBA Foundation Alignment™
 * Living Rhythm
 * Version: 1.3.0
 * Revised: 24 July 2026
 *
 * @package Microba_Outlook
 */

html,
body {
	min-height: 100%;
}

body {
	background: var(--mo-bg);
}

.mo-container {
	width: min(calc(100% - (var(--mo-gutter) * 2)), var(--mo-container));
	margin-inline: auto;
}

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

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

.mo-reading {
	width: min(100%, var(--mo-reading));
}

.mo-reading--center {
	margin-inline: auto;
}

.mo-site-main {
	min-height: 60vh;
}

.mo-section {
	position: relative;
	padding-block: var(--mo-section-space-md);
	background: var(--mo-surface);
	border-top: 1px solid var(--mo-border);
}

.mo-section--soft {
	background: var(--mo-surface-soft);
}

.mo-section--warm {
	background: var(--mo-surface-warm);
}

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

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

.mo-stack {
	display: grid;
	gap: var(--mo-space-3);
}

.mo-stack--sm {
	gap: var(--mo-space-2);
}

.mo-stack--lg {
	gap: var(--mo-space-5);
}

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

.mo-content {
	padding-block:
		calc(var(--mo-section-space-sm) + 76px)
		var(--mo-section-space-sm);
}

.mo-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(var(--mo-space-3), 3vw, var(--mo-space-4));
}

.mo-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mo-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/** Footer layout is defined canonically in /common/css/footer.css. */

@media (max-width: 900px) {
	.mo-grid,
	.mo-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.mo-grid,
	.mo-grid--2,
	.mo-grid--3 {
		grid-template-columns: 1fr;
	}

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

	.mo-content {
		padding-block:
			calc(var(--mo-space-5) + 68px)
			var(--mo-space-5);
	}

}