/*
 * Layout — Panel Grid System, Containers
 * Unbreakable · Retro Comic Static Site
 *
 * Simplified: no panel gutter borders, no section border-top/bottom noise.
 * Just clean grid containers.
 */

/* ─── CONTAINERS ──────────────────────────────────────────────────────── */

.o-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--space-lg);
}

.o-container--wide {
	max-width: 1400px;
}

.o-container--masthead {
	max-width: 1400px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-sm);
}

.o-container--footer {
	max-width: 1400px;
}


/* ─── MAIN CONTENT AREA ──────────────────────────────────────────────── */

.o-main {
	min-height: 60vh;
}

.o-main--front-page {
	overflow-x: hidden;
}


/* ─── SECTION ──────────────────────────────────────────────────────────── */

.o-section {
	position: relative;
	padding-block: var(--space-section, 4rem);
}

.o-section--dark {
	background: var(--color-charcoal, #1C1C2E);
}

.o-section--spotlight {
	background: radial-gradient(
		ellipse at 50% 0%,
		var(--color-graphite, #2D2D4A) 0%,
		var(--color-charcoal, #1A1A2E) 60%,
		var(--color-ink) 100%
	);
}


/* ─── PANEL ROW ────────────────────────────────────────────────────────── */

.o-panel-row {
	display: grid;
	gap: var(--space-lg);
}

.o-panel-row--2 {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.o-panel-row--2 {
		grid-template-columns: 1fr 1fr;
	}
	.o-panel-row--2\@media-text {
		grid-template-columns: 1fr 1fr;
	}
	.o-panel-row--2\@text-media {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.o-panel-row--2\@media-text {
		grid-template-columns: 2fr 3fr;
	}
	.o-panel-row--2\@text-media {
		grid-template-columns: 3fr 2fr;
	}
}