/* =============================================================
   LAYOUTS — structural rules: containers, header, hero, sections, grids,
   footer, responsive breakpoints. Component-level visual styling (buttons,
   cards, forms) lives in components.css.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-normal);
	color: var(--color-text);
	background: var(--color-bg);
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
svg { width: 1em; height: 1em; }

.wrap {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }
.wrap--medium { max-width: var(--container-medium); }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow var(--transition-normal);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	padding-block: var(--space-3);
}
.site-header__cta { margin-left: auto; }

.site-nav {
	display: flex;
	flex: 1 1 auto;
}
.site-nav ul {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-toggle {
	display: none;
	margin-left: auto;
}

@media (max-width: 860px) {
	.site-header__inner { flex-wrap: wrap; }
	.menu-toggle { display: inline-flex; }
	.site-header__cta { order: 3; margin-left: 0; }
	.site-nav {
		flex-basis: 100%;
		order: 4;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--transition-slow);
	}
	.site-nav.open { max-height: 480px; }
	.site-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding-block: var(--space-3) var(--space-4);
	}
	.site-nav ul li { width: 100%; }
	.site-nav ul li a { display: block; padding-block: var(--space-3); }
}

/* ---------- Hero ---------- */
.hero { padding: var(--space-16) 0 var(--space-12); background: var(--color-bg-alt); }
.hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-12);
	align-items: center;
}
.hero__stats {
	display: flex;
	gap: var(--space-8);
	flex-wrap: wrap;
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}
.hero__visual { display: flex; align-items: center; justify-content: center; }
.hero__placeholder {
	position: relative;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	padding: var(--space-6);
}
/* hero-banner.jpg ships square (739x739) rather than wide — cover + a
   sensible landscape aspect-ratio lets it fill this slot cleanly instead of
   distorting or leaving letterboxing. */
.hero__image { border-radius: var(--radius-xl); width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr; text-align: center; }
	.hero__actions, .hero__stats { justify-content: center; }
	.hero__visual { order: -1; max-width: 320px; margin-inline: auto; }
}

/* ---------- Sections ---------- */
.sec { padding: var(--space-20) 0; }
.sec--alt { background: var(--color-bg-alt); }
.sec__header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
.sec__cta { text-align: center; margin-top: var(--space-10); display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.sec__empty { text-align: center; color: var(--color-text-muted); }

@media (max-width: 640px) {
	.sec { padding: var(--space-12) 0; }
	.hero { padding: var(--space-12) 0 var(--space-8); }
}

/* ---------- Grids ---------- */
.card-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(2, 1fr);
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--5 { grid-template-columns: repeat(5, 1fr); }

.trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
}

.process-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
}
.process-steps--compact { margin: var(--space-12) 0; }

.reader-full-grid {
	display: grid;
	gap: var(--space-8);
}

.page-header--split {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: var(--space-8);
	align-items: center;
}
/* about-hero.jpg / guide-diagram.jpg also ship square (628x628 / 739x739) —
   same cover + fixed-aspect treatment as .hero__image above. */
.page-header__visual img { border-radius: var(--radius-lg); width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 960px) {
	.card-grid--5 { grid-template-columns: repeat(3, 1fr); }
	.trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	.card-grid, .card-grid--3, .card-grid--5 { grid-template-columns: 1fr; }
	.process-steps { grid-template-columns: 1fr; }
	.trust-grid { grid-template-columns: 1fr; }
	.page-header--split { grid-template-columns: 1fr; text-align: center; }
}

/* ---------- Guide (pillar page) layout ---------- */
.guide-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--space-10);
	align-items: start;
}
.guide-toc {
	position: sticky;
	top: calc(var(--space-16) + 8px);
}
@media (max-width: 860px) {
	.guide-layout { grid-template-columns: 1fr; }
	.guide-toc { position: static; }
}

/* ---------- Page header (generic) ---------- */
.page-header { padding: var(--space-12) 0 var(--space-10); background: var(--color-bg-alt); text-align: left; }
.page-header--art { background-size: cover; background-position: center; }
.page-header h1 { margin-top: var(--space-3); margin-bottom: 0; }
.page-content { padding: var(--space-16) 0; }
.error-404 { padding: var(--space-24) 0; text-align: center; }

/* ---------- Post list ---------- */
.post-list { display: flex; flex-direction: column; gap: var(--space-6); }
.pagination { margin-top: var(--space-10); display: flex; justify-content: center; gap: var(--space-2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding: var(--space-16) 0 var(--space-6); }
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--space-8);
	padding-bottom: var(--space-10);
}
.footer-disclaimer { border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--space-6); font-size: var(--text-sm); color: var(--color-footer-text-muted); }
.footer-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255,255,255,.1);
	font-size: var(--text-xs);
	color: var(--color-footer-text-muted);
}

@media (max-width: 860px) {
	.footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr; }
	.footer-bottom { flex-direction: column; }
}