/*
 * Design System - AELITA
 * components/news-filter.css - news archive brand filter row.
 *
 * URL-driven brand navigation rendered as uppercase text tabs with a red
 * active rule - the same visual language as the homepage brand tabs
 * (.a-brand-tab in home-brands.css) and the Stitch news filter bar.
 *
 * Desktop: wrapping row. Mobile: horizontal scroll (no library).
 * Consumes tokens.css only. No hex, no !important.
 * Loaded on blog category archives only (see inc/enqueue.php).
 */

.a-news-filter {
	border-bottom: var(--border-w) solid var(--border);
	background-color: var(--bg);
}

.a-news-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-news-filter__item {
	display: flex;
}

.a-news-filter__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-bottom: 2px solid transparent;
	background-color: transparent;
	color: var(--text-secondary);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--dur-popover) var(--ease-out),
		border-color var(--dur-popover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.a-news-filter__link:hover {
		color: var(--text-primary);
	}
}

.a-news-filter__link.is-active {
	color: var(--text-primary);
	border-bottom-color: var(--c-red-600);
}

.a-news-filter__link:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
}

/* When a brand is active the repeated brand label on every card would be
 * noise; the filter already states the brand. */
.a-news-page.is-brand-filtered .a-news-card__brand,
.a-news-page.is-brand-filtered .a-news-featured__brand {
	display: none;
}

/* Empty state (unknown/edge cases; normal UI never reaches it). */
.a-news-empty {
	margin: 0;
	padding-block: var(--space-7);
	color: var(--text-secondary);
	text-align: center;
}

/* -------------------------------------------------------------------- */
/* Tablet + Mobile: one horizontally scrollable row, full-bleed         */
/* -------------------------------------------------------------------- */
@media (max-width: 991px) {
	.a-news-filter__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(var(--container-pad) * -1);
		padding-inline: var(--container-pad);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.a-news-filter__list::-webkit-scrollbar {
		display: none;
	}

	.a-news-filter__item {
		flex: 0 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.a-news-filter__link {
		transition-duration: 0.01ms;
	}
}