/* ============================================================
 * News filter tabs — PSG-style team filter bar above the /news/ grid.
 * Server-side: each tab is a link to /news/?team=<slug> (works without JS,
 * survives pagination, shareable). Mirrors the squad tab bar (display face,
 * uppercase, red underline on the active tab) for site consistency.
 * Tabs are curated in the CMS (Bulls Content -> News filters). The first
 * "All news" tab clears the filter.
 * ============================================================ */

.bulls-news-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-5);
	border-bottom: 1px solid var(--t-border-strong);
	margin: var(--space-6) 0 var(--space-8);
}

.bulls-news-filters__btn {
	display: inline-block;
	padding: var(--space-3) 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	font-family: var(--ff-display);
	font-size: var(--fs-200);
	text-transform: uppercase;
	letter-spacing: var(--ls-snug);
	color: var(--t-fg-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--motion-base) var(--ease-out),
		border-color var(--motion-base) var(--ease-out);
}

.bulls-news-filters__btn:hover { color: var(--t-fg-body); }

/* Active = clean bold + brand-red underline (no filled pill — Bulls restraint). */
.bulls-news-filters__btn.is-active {
	color: var(--t-fg);
	border-bottom-color: var(--c-bulls-red);
}

.bulls-news-filters__btn:focus-visible {
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Mobile: scroll the bar horizontally rather than wrap to a tall stack. */
@media (max-width: 600px) {
	.bulls-news-filters {
		flex-wrap: nowrap;
		gap: var(--space-4);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.bulls-news-filters::-webkit-scrollbar { display: none; }
	.bulls-news-filters__btn { font-size: var(--fs-100); }
}