/**
 * Archive / category / tag / search / 404 redesign (Phase 11: Claude
 * Design integration) — page-specific layout only. Fonts, shared tokens,
 * the fixed header, the scroll-progress bar, the [data-reveal]
 * entrance-animation mechanism, and the shared .redesign-card component
 * structure all live in assets/css/redesign-shared.css (this stylesheet
 * declares itself dependent on it — see inc/archive-redesign.php) since
 * the article detail page (Phase 9) and front page (Phase 10) use them
 * identically. Everything below is scoped under `.archive-redesign` and
 * layers on top of the shared rules in the same `@layer overrides`.
 *
 * `.search-form` / `.search-field` / `.search-submit` /
 * `.search-category-links` had no prior styling anywhere in the theme
 * (confirmed via grep across base/layout/components.css) — this is a
 * green field, not an override, for those.
 */

@layer overrides {
	.archive-redesign #primary {
		padding-bottom: var(--space-12);
	}

	/* ---------- Breadcrumb (shared markup with the article detail page,
	   template-parts/content/breadcrumb.php — restyled the same way here
	   so both pages match). ---------- */
	.archive-redesign .breadcrumbs {
		max-width: none;
		padding: calc(var(--sr-header-h) + var(--space-4)) var(--space-4) 0;
		font-family: var(--sr-font-mono);
	}

	.archive-redesign .breadcrumbs ol {
		font-size: 0.75rem;
		letter-spacing: 0.04em;
		color: rgb(22 33 28 / 45%);
	}

	.archive-redesign .breadcrumbs a {
		color: inherit;
	}

	/* ---------- Archive header (title / description / count) ---------- */
	.archive-redesign .archive-header {
		padding: calc(var(--sr-header-h) + var(--space-6)) var(--space-4) var(--space-8);
	}

	.archive-redesign .breadcrumbs + .archive-header {
		padding-top: var(--space-6);
	}

	.archive-redesign .archive-header__inner {
		max-width: 56rem;
	}

	.archive-redesign .archive-header__eyebrow {
		margin: 0;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgb(22 33 28 / 34%);
	}

	.archive-redesign .archive-header__title {
		margin: var(--space-3) 0 0;
		font-size: clamp(2rem, 5vw, 3.25rem);
		line-height: 1.25;
		font-weight: 700;
		color: var(--sr-ink);
	}

	.archive-redesign .archive-header__description {
		margin: var(--space-3) 0 0;
		max-width: 44em;
		font-size: 1rem;
		line-height: 1.8;
		color: var(--sr-muted);
	}

	.archive-redesign .archive-header__description > * + * {
		margin-top: var(--space-3);
	}

	.archive-redesign .archive-header__count {
		margin: var(--space-4) 0 0;
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: rgb(22 33 28 / 50%);
	}

	.archive-redesign .archive-header--404 .archive-empty-state__link {
		margin-top: var(--space-4);
	}

	.archive-redesign .archive-header .search-form {
		margin-top: var(--space-6);
		max-width: 32rem;
	}

	/* ---------- Article list layout (archive.php/category.php/home.php
	   only — search.php/404.php keep the plain .archive-header above,
	   they have no category set to filter by). Sticky filter sidebar
	   (template-parts/sections/archive-filters.php) ported from a
	   parallel Claude Code session's implementation (origin/main commit
	   b0d96c6) into this page-scoped Design System — restyled with
	   --sr-* tokens instead of adopting that session's global base.css/
	   components.css token rewrite. ---------- */
	.archive-redesign .archive-layout {
		position: relative;
		max-width: var(--content-wide);
		margin-inline: auto;
		padding: calc(var(--sr-header-h) + var(--space-6)) var(--space-4) var(--space-8);
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.archive-redesign .breadcrumbs + .archive-layout {
		padding-top: var(--space-6);
	}

	.archive-redesign .archive-layout::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background-image: repeating-linear-gradient(90deg, var(--sr-border-subtle) 0 1px, transparent 1px calc(100% / 12));
	}

	.archive-filters__eyebrow {
		margin: 0;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgb(22 33 28 / 34%);
	}

	.archive-filters__heading.entry-title {
		margin: var(--space-3) 0 0;
		font-size: clamp(2rem, 5vw, 3.25rem);
		line-height: 1.25;
		font-weight: 700;
		color: var(--sr-ink);
	}

	.archive-filters__description {
		margin: var(--space-4) 0 0;
		color: var(--sr-muted);
		max-width: 40em;
	}

	.archive-filters__chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-top: var(--space-6);
	}

	.archive-filters__chip {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 var(--space-3);
		font-size: 0.75rem;
		letter-spacing: 0.04em;
		color: var(--sr-muted);
		text-decoration: none;
		border: 1px solid var(--sr-border);
	}

	.archive-filters__chip:hover,
	.archive-filters__chip:focus-visible {
		color: var(--sr-ink);
		border-color: var(--sr-ink);
	}

	.archive-filters__chip.is-active {
		color: var(--sr-ink);
		border-color: var(--sr-ink);
	}

	.archive-filters__chip-count {
		opacity: 0.5;
		margin-left: var(--space-2);
	}

	.archive-filters__counter {
		margin: var(--space-8) 0 0;
		font-size: 3rem;
		line-height: 1;
		font-weight: 500;
		color: var(--sr-ink);
	}

	.archive-layout__main .archive-empty {
		border-top: 0;
		padding-top: 0;
	}

	@media (min-width: 1024px) {
		.archive-redesign .archive-layout {
			grid-template-columns: 5fr 7fr;
			column-gap: var(--space-12);
		}

		.archive-layout__sidebar {
			position: sticky;
			top: calc(var(--sr-header-h) + var(--space-6));
			align-self: start;
		}
	}

	/* ---------- Article grid (reuses the shared .redesign-card, see
	   assets/css/redesign-shared.css) ---------- */
	.archive-redesign .archive-content__inner {
		max-width: var(--content-wide);
		margin-inline: auto;
		padding: var(--space-6) var(--space-4) 0;
	}

	.archive-redesign .archive-grid {
		display: grid;
		gap: var(--space-6) var(--space-4);
		grid-template-columns: 1fr;
		padding-top: var(--space-6);
		border-top: 1px solid var(--sr-border);
	}

	.archive-redesign .redesign-card__eyebrow {
		color: rgb(22 33 28 / 45%);
	}

	.archive-redesign .redesign-card__title {
		color: var(--sr-ink);
	}

	.archive-redesign .redesign-card__excerpt {
		color: var(--sr-muted);
	}

	.archive-redesign .redesign-card__specs {
		color: var(--sr-muted);
	}

	.archive-redesign .redesign-card__read-more {
		color: var(--sr-ink);
	}

	@media (min-width: 768px) {
		.archive-redesign .archive-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1024px) {
		.archive-redesign .archive-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* The sidebar already narrows the main column, so the list layout's
	   cards stack in one column with generous spacing instead of trying
	   to fit 2-3 across it. */
	.archive-redesign .archive-layout__main .archive-grid {
		grid-template-columns: 1fr;
		gap: var(--space-16);
		border-top: 0;
		padding-top: 0;
	}

	/* ---------- Empty states (no posts / no search results / 404) ---------- */
	.archive-redesign .archive-empty {
		margin: 0;
		padding-top: var(--space-6);
		border-top: 1px solid var(--sr-border);
		font-size: 1rem;
		color: var(--sr-muted);
	}

	.archive-redesign .archive-empty-state {
		padding-top: var(--space-6);
		border-top: 1px solid var(--sr-border);
	}

	.archive-redesign .archive-empty-state__link {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-2);
		margin-top: var(--space-4);
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: var(--sr-ink);
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 7px;
	}

	.archive-redesign .archive-empty-state__link:hover,
	.archive-redesign .archive-empty-state__link:focus-visible {
		opacity: 0.62;
	}

	.archive-redesign .search-category-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-3);
		margin-top: var(--space-4);
	}

	.archive-redesign .search-category-links a {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
		padding: 0 var(--space-3);
		font-size: 0.75rem;
		letter-spacing: 0.04em;
		color: var(--sr-muted);
		text-decoration: none;
		border: 1px solid var(--sr-border);
	}

	.archive-redesign .search-category-links a:hover,
	.archive-redesign .search-category-links a:focus-visible {
		color: var(--sr-ink);
		border-color: var(--sr-ink);
	}

	/* ---------- Search form (no prior styling anywhere in the theme) ---------- */
	.archive-redesign .search-form {
		display: flex;
		gap: var(--space-2);
	}

	.archive-redesign .search-field {
		flex: 1;
		min-height: 44px;
		padding: 0 var(--space-3);
		font-family: inherit;
		font-size: 0.9375rem;
		color: var(--sr-ink);
		background: var(--sr-bg);
		border: 1px solid var(--sr-border);
		border-radius: 0;
	}

	.archive-redesign .search-field::placeholder {
		color: rgb(22 33 28 / 40%);
	}

	.archive-redesign .search-submit {
		min-height: 44px;
		padding: 0 var(--space-4);
		font-family: inherit;
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: var(--sr-bg);
		background: var(--sr-ink);
		border: 1px solid var(--sr-ink);
		cursor: pointer;
	}

	.archive-redesign .search-submit:hover,
	.archive-redesign .search-submit:focus-visible {
		opacity: 0.82;
	}

	/* ---------- Pagination (WordPress core the_posts_pagination() markup:
	   .pagination / .page-numbers / .page-numbers.current — restyled, not
	   reimplemented). ---------- */
	.archive-redesign .pagination {
		margin: var(--space-8) 0 0;
		padding-top: var(--space-6);
		border-top: 1px solid var(--sr-border);
		gap: var(--space-2);
	}

	.archive-redesign .pagination .page-numbers {
		min-width: 44px;
		min-height: 44px;
		padding: 0 var(--space-2);
		font-size: 0.8125rem;
		color: var(--sr-ink);
		background: transparent;
		border: 1px solid var(--sr-border);
		border-radius: 0;
	}

	.archive-redesign .pagination .page-numbers.current {
		color: var(--sr-bg);
		background: var(--sr-ink);
		border-color: var(--sr-ink);
	}

	.archive-redesign .pagination a.page-numbers:hover,
	.archive-redesign .pagination a.page-numbers:focus-visible {
		color: var(--sr-ink);
		border-color: var(--sr-ink);
	}

	.archive-redesign .pagination .page-numbers.dots {
		border-color: transparent;
		color: rgb(22 33 28 / 40%);
	}
}