/**
 * layout.css — page shell, containers, and the grid patterns from the
 * Phase 2 design system (§6 container widths, §7 grid system).
 * Mobile-first: base rules are the mobile layout, min-width queries
 * layer up. Breakpoints: 768 / 1024 / 1280, per §32.
 */

.fn-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.fn-main {
	flex: 1 0 auto;
	padding: var(--fn-space-7) 0;
}

.fn-container {
	max-width: var(--fn-container-page);
	margin-inline: auto;
	padding-inline: var(--fn-space-4);
}

.fn-container--wide {
	max-width: var(--fn-container-wide);
}

.fn-container--article {
	max-width: var(--fn-container-article);
}

@media (min-width: 768px) {
	.fn-container {
		padding-inline: var(--fn-space-6);
	}
}

@media (min-width: 1280px) {
	.fn-container {
		padding-inline: var(--fn-space-7);
	}
}

/* Any wide content (tables, code) scrolls inside its own boundary — the
   page body itself never scrolls horizontally. */
.fn-scroll-x {
	overflow-x: auto;
}

/* ---------- header ---------- */

.fn-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--fn-bg) 92%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--fn-border);
}

.fn-header__inner {
	max-width: var(--fn-container-wide);
	margin-inline: auto;
	padding: var(--fn-space-3) var(--fn-space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fn-space-4);
	min-height: 56px;
}

@media (min-width: 768px) {
	.fn-header__inner {
		padding-inline: var(--fn-space-6);
		min-height: 72px;
	}
}

@media (min-width: 1280px) {
	.fn-header__inner {
		padding-inline: var(--fn-space-7);
	}
}

.fn-header__nav {
	display: none;
}

@media (min-width: 1024px) {
	.fn-header__nav {
		display: block;
	}
}

.fn-header__actions {
	display: flex;
	align-items: center;
	gap: var(--fn-space-3);
}

#fn-menu-toggle {
	display: inline-flex;
}

@media (min-width: 1024px) {
	#fn-menu-toggle {
		display: none;
	}
}

/* ---------- card grids (§7) ---------- */

.fn-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fn-space-4);
}

@media (min-width: 768px) {
	.fn-card-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--fn-space-5);
	}
}

@media (min-width: 1024px) {
	.fn-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.fn-card-grid--tools {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.fn-card-grid--tools {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.fn-card-grid--tools {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- footer ---------- */

.fn-footer {
	background: var(--fn-surface-2);
	border-top: 1px solid var(--fn-border);
	padding: var(--fn-space-7) 0;
	margin-top: var(--fn-space-8);
}

.fn-footer__inner {
	max-width: var(--fn-container-wide);
	margin-inline: auto;
	padding-inline: var(--fn-space-4);
}

@media (min-width: 768px) {
	.fn-footer__inner {
		padding-inline: var(--fn-space-6);
	}
}

.fn-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fn-space-6) var(--fn-space-5);
}

.fn-footer__brand {
	grid-column: 1 / -1;
}

@media (min-width: 640px) {
	.fn-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}

	.fn-footer__brand {
		grid-column: auto;
	}
}

.fn-footer__bottom {
	margin-top: var(--fn-space-6);
	padding-top: var(--fn-space-4);
	border-top: 1px solid var(--fn-border);
	font-size: var(--fn-fs-small);
	color: var(--fn-ink-3);
}

/* ---------- empty state (shared by index.php's no-posts branch;
   the full 404/search empty-state components arrive in Phase 8) ---------- */

.fn-empty-state {
	text-align: center;
	padding: var(--fn-space-8) var(--fn-space-4);
}

.fn-empty-state h1 {
	font-size: var(--fn-fs-h2);
	margin-bottom: var(--fn-space-3);
}

.fn-empty-state p {
	color: var(--fn-ink-2);
	max-width: 40ch;
	margin-inline: auto;
	margin-bottom: var(--fn-space-5);
}