/*
 * Grounded Journal — Section archives (collection pages)
 * Masthead, lead, grid, pagination, empty states.
 * Cards + lead component: foundation.css. See docs/collection-spec.md.
 */

/* ---------- Section theming ---------- */

.gj-archive {
	--section: var(--gj-moss);
	--section-wash: #E5E3DA;
	--gj-accent: var(--section);
}

.gj-archive.section-wellness { --section: var(--wellness); --section-wash: var(--wellness-wash); }
.gj-archive.section-travel   { --section: var(--travel);   --section-wash: var(--travel-wash); }
.gj-archive.section-food     { --section: var(--food);     --section-wash: var(--food-wash); }
.gj-archive.section-journal  { --section: var(--journal);  --section-wash: var(--journal-wash); }

/* ---------- Centred wide rail ---------- */

.gj-archive__wide {
	width: min(1040px, calc(100% - 48px));
	margin-inline: auto;
}

/* ---------- Section masthead ---------- */

/* Tight enough that the lead (or empty message) peeks above a 900px fold */
.gj-masthead {
	background-color: var(--section-wash);
	padding-block: clamp(56px, 10vh, 104px);
}

.gj-masthead__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.gj-masthead__inner .ground-line {
	margin-bottom: 26px;
}

.gj-masthead__title {
	font-family: var(--gj-font-banner);
	font-size: clamp(44px, 6vw, 84px);
	line-height: .98;
	letter-spacing: -0.02em;
	color: var(--section);
	margin: 0 0 18px;
}

.gj-masthead__standfirst,
.gj-masthead__standfirst p {
	font-family: var(--gj-font-text);
	font-style: italic;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.55;
	color: var(--gj-ink);
	margin: 0;
	max-width: 34em;
}

/* ---------- Lead ---------- */

.gj-archive__lead-section {
	padding-block: var(--space-section) 0;
}

/* ---------- Grid ---------- */

.gj-archive__grid-section {
	padding-block: var(--space-section);
}

/* Lead + grid together: tighten the seam so they read as one flow */
.gj-archive__lead-section + .gj-archive__grid-section {
	padding-block-start: clamp(48px, 6vw, 72px);
}

/* ---------- Sparse: single post, no grid yet ---------- */

.gj-archive__more-soon {
	padding-block: clamp(48px, 6vw, 72px) var(--space-section);
}

.gj-more-soon__line {
	font-family: var(--gj-font-text);
	font-style: italic;
	font-size: 17px;
	color: var(--gj-slate);
	margin: 22px 0 0;
}

/* ---------- Empty section ---------- */

.gj-archive__empty {
	padding-block: var(--space-section);
}

.gj-archive__empty-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}

.gj-archive__empty-line {
	font-family: var(--gj-font-deck);
	font-weight: 700;
	font-size: clamp(24px, 2.6vw, 32px);
	letter-spacing: -0.01em;
	color: var(--gj-ink);
	margin: 0;
}

.gj-archive__empty-sub {
	font-family: var(--gj-font-text);
	font-style: italic;
	font-size: 17px;
	color: var(--gj-slate);
	margin: 0 0 10px;
}

/* ---------- Pagination ---------- */

.gj-archive__pagination {
	padding-block: 0 var(--space-section);
}

.gj-archive__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
}

.gj-archive__pagination .page-numbers {
	font-family: var(--gj-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gj-ink-2);
	text-decoration: none;
	padding: 6px 2px;
	transition: color .25s ease;
}

.gj-archive__pagination a.page-numbers:hover {
	color: var(--gj-moss);
}

.gj-archive__pagination .page-numbers.current {
	color: var(--section);
}

.gj-archive__pagination .screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
}