/* ==========================================================================
   Archives and editorial topic hubs
   ========================================================================== */

.hp-hub-hero { padding-block: var(--hp-space-lg); background-color: var(--hp-color-canvas); border-bottom: var(--hp-rule); }
.hp-hub-hero__title { font-size: clamp(2rem, 5vw, 3rem); }
.hp-hub-hero__intro { max-width: 64ch; margin-top: var(--hp-space-2xs); color: var(--hp-color-text-muted); font-size: var(--hp-text-md); }
.hp-hub-hero__nav { display: flex; flex-wrap: wrap; gap: var(--hp-space-2xs); margin-top: var(--hp-space-md); }
.hp-hub-hero__nav a {
	padding: 0.35rem 0.8rem;
	border: var(--hp-rule);
	border-radius: var(--hp-radius-pill);
	background-color: var(--hp-color-surface);
	font-size: var(--hp-text-xs);
	font-weight: 650;
	text-decoration: none;
}
.hp-hub-hero__nav a:hover,
.hp-hub-hero__nav a[aria-current="page"] { background-color: var(--hp-color-primary); border-color: var(--hp-color-primary); color: #fff; }

.hp-archive-layout { display: grid; gap: var(--hp-space-xl); padding-block: var(--hp-space-lg) var(--hp-space-2xl); }
@media (min-width: 1024px) { .hp-archive-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--hp-space-2xl); } }

.hp-post-list { display: grid; gap: var(--hp-space-md); }
.hp-post-list > li { padding-bottom: var(--hp-space-md); border-bottom: var(--hp-rule); }
.hp-post-list > li:last-child { border-bottom: 0; }

.hp-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hp-space-2xs);
	padding-block: var(--hp-space-sm);
	border-bottom: var(--hp-rule);
	margin-bottom: var(--hp-space-md);
}
.hp-filters__label { font-size: var(--hp-text-xs); color: var(--hp-color-text-muted); margin-right: var(--hp-space-2xs); }

.hp-search-head { padding-block: var(--hp-space-lg); background-color: var(--hp-color-canvas); }
.hp-search-head .hp-input { min-height: 52px; }
.hp-search-result { display: grid; gap: var(--hp-space-3xs); }
.hp-search-result__type { font-size: var(--hp-text-2xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--hp-color-primary-dark); font-weight: 700; }

.hp-404 { padding-block: var(--hp-space-2xl); }
.hp-404__code { font-family: var(--hp-font-display); font-size: clamp(4rem, 14vw, 8rem); line-height: 0.9; color: var(--hp-color-border-strong); }