/* Filter button active state */
.news-category-filter.is-active {
	background-color: #1a3a6c;
	color: #ffffff;
	border-color: #1a3a6c;
}

.news-category-filter {
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Hidden cards + their gva-posts wrapper — collapse fully so grid closes gaps.
   Uses high specificity to beat the theme's Foundation block-grid rules. */
.news-posts-grid .item-columns.is-hidden,
.news-posts-grid .item-columns[hidden],
.item-columns.is-hidden,
.item-columns[hidden],
div.item-columns.is-hidden,
div.item-columns[hidden] {
	display: none !important;
	float: none !important;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	clear: none !important;
	position: absolute !important;
	visibility: hidden !important;
	pointer-events: none !important;
	overflow: hidden !important;
}

/* Neutralize Foundation's nth-of-type clear rules that break when cards are hidden. */
[class*="sm-block-grid-"] > .item-columns:not(.is-hidden),
[class*="xs-block-grid-"] > .item-columns:not(.is-hidden),
[class*="xx-block-grid-"] > .item-columns:not(.is-hidden) {
	clear: none !important;
}

/* Override the theme's float-based grid with flexbox so uneven card heights
   don't cause stair-stepping when items are filtered/hidden. */
.news-posts-grid > [class*="block-grid-"],
[class*="sm-block-grid-"],
[class*="xs-block-grid-"],
[class*="xx-block-grid-"] {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
}

.news-posts-grid .item-columns:not(.is-hidden) {
	float: none !important;
	clear: none !important;
	display: flex !important;
	flex-direction: column !important;
}

.news-posts-grid .item-columns:not(.is-hidden) > * {
	width: 100%;
}

/* Empty state message */
.news-filter-empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px 24px;
	font-size: 16px;
	color: #666;
	border-radius: 8px;
	margin-top: 16px;
}

/* Mobile: filter bar scrolls horizontally */
@media (max-width: 480px) {
	.news-filter-bar {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* CREPS: active category pill fill — higher specificity (0,3,0) so the selected pill reliably fills
   with CREPS primary blue, beating the widget inline base rule and theme button styles. */
.news-filter-bar .news-category-filter.is-active { background: #0b3d91; color: #fff; border-color: #0b3d91; }