/**
 * Shared section — compact intro banner (template-parts/sections/page-intro.php)
 * and the shared post pagination.
 *
 * 1. Page Intro
 * 2. Pagination
 * 3. Responsive
 */

/* ============================ PAGE INTRO ============================ */
.page-intro {
	padding: var(--space-80) 0 var(--space-72);
	background: var(--white);
	border-bottom: var(--stroke-thin) solid var(--border-color);
}

.page-intro .site-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.page-intro__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10);
	margin-bottom: var(--space-16);
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--text-color);
}

a.page-intro__crumb:hover {
	color: var(--primary-color);
}

.page-intro__sep {
	color: var(--crumb-divider);
}

.page-intro__title {
	max-width: calc(1200 * var(--u));
	font-size: var(--fs-72);
	text-transform: none; /* post titles keep the editor's casing */
}

.page-intro__text {
	max-width: calc(882 * var(--u));
}

/* ============================ PAGINATION ============================ */
.navigation.pagination {
	margin-top: var(--space-56);
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-10);
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(56 * var(--u));
	min-height: calc(56 * var(--u));
	padding: 0 var(--space-16);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	color: var(--black);
	border: var(--stroke-bold) solid var(--black);
	border-radius: var(--radius-md);
}

.navigation.pagination .page-numbers.current,
.navigation.pagination a.page-numbers:hover {
	background: var(--black);
	color: var(--white);
}

.navigation.pagination .page-numbers.dots {
	border-color: transparent;
}

/* ============================ RESPONSIVE ============================ */

/* --- SM / Mobile --- */
@media (max-width: 768px) {
	.page-intro {
		padding: 36px 0 32px;
	}

	.navigation.pagination .page-numbers {
		min-width: 40px;
		min-height: 40px;
	}
}