/**
 * File: assets/css/global/layout.css
 * Description: Global layout utilities and containers.
 *
 * MAGIDA FOUNDATION PASS 1:
 * - Adds reusable containers and section spacing.
 */

.magida-container {
	width: min(100% - 48px, var(--magida-container));
	margin-inline: auto;
}

.magida-container--narrow {
	width: min(100% - 48px, var(--magida-container-narrow));
	margin-inline: auto;
}

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

.magida-section--compact {
	padding-block: calc(var(--magida-section-padding) * 0.7);
}

.magida-grid {
	display: grid;
	gap: 24px;
}

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

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

.magida-grid--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.magida-panel {
	border: 1px solid var(--magida-border);
	border-radius: var(--magida-radius-lg);
	background: var(--magida-panel);
	backdrop-filter: blur(18px);
}

.magida-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

@media (max-width: 1024px) {
	.magida-grid--three,
	.magida-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.magida-container,
	.magida-container--narrow {
		width: min(100% - 40px, var(--magida-container));
	}

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

	.magida-grid--two,
	.magida-grid--three,
	.magida-grid--four {
		grid-template-columns: 1fr;
	}
}