/* ==========================================================================
   Project Archive Page
   ========================================================================== */

/* ── Section base ──────────────────────────────────────────────────────── */

.bga-project-archive {
	position: relative;
}

.bga-project-archive__title {
	font-size: var(--text-h1);
	margin-bottom: var(--sp-32);
	max-width: 10ch;
	letter-spacing: -0.03em;
}

/* Filter pills */
.bga-project-archive__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-16);
	margin-bottom: var(--sp-48);
}

.bga-project-archive__filter-pill {
	display: inline-block;
	padding: var(--sp-12) var(--sp-24);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: var(--font-weight-light);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-brown);
	text-decoration: none;
	border: 1px solid rgba(41, 19, 5, 0.16);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: color var(--transition-smooth), border-color var(--transition-smooth), background-color var(--transition-smooth), transform var(--transition-smooth);
}

.bga-project-archive__filter-pill:hover {
	border-color: var(--color-orange);
	color: var(--color-orange);
	transform: translateY(-2px);
}

.bga-project-archive__filter-pill.is-active {
	background-color: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-cream);
	font-weight: var(--font-weight-regular);
}

.bga-project-archive__filter-pill:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

/* Pagination */
.bga-project-archive__pagination {
	display: flex;
	justify-content: center;
	gap: var(--sp-8);
	margin-top: var(--sp-48);
	padding-top: var(--sp-32);
}

/* ── Load-on-scroll (Bryce, 3 Aug) ──────────────────────────────────────────
 * The pagination stays server-rendered and in the DOM — crawlable, and the
 * fallback when JS is unavailable. project-archive-infinite.js adds
 * .is-js-hidden only once it has confirmed it can take over, and removes it
 * again if fetching starts failing, so the user is never stranded. */
.bga-project-archive__pagination.is-js-hidden {
	display: none;
}

/* Sentinel injected by the script just above the pagination. Zero-height but
 * still generates a box, which is what IntersectionObserver needs. */
.bga-project-archive__sentinel {
	width: 100%;
	height: 1px;
}

/* Announcements are for screen readers only; sighted users see the cards
 * arrive. Mirrors the .sr-only utility in global.css. */
.bga-project-archive__scroll-status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bga-project-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: var(--text-sm);
	color: var(--color-brown);
	text-decoration: none;
	border: 1px solid rgba(41, 19, 5, 0.2);
	transition: color var(--transition-speed) var(--transition-ease),
	            border-color var(--transition-speed) var(--transition-ease),
	            background-color var(--transition-speed) var(--transition-ease);
}

.bga-project-archive__pagination .page-numbers.current,
.bga-project-archive__pagination .page-numbers:hover {
	background-color: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-cream);
}

.bga-project-archive__page-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	padding: var(--sp-12) var(--sp-24);
	font-family: var(--font-body);
	font-size: var(--text-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-brown);
	text-decoration: none;
	border: 1px solid rgba(41, 19, 5, 0.25);
	transition: background-color var(--transition-speed) var(--transition-ease),
	            border-color var(--transition-speed) var(--transition-ease),
	            color var(--transition-speed) var(--transition-ease);
}

.bga-project-archive__page-link:hover,
.bga-project-archive__page-link:focus-visible {
	background-color: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-cream);
}