/* =====================================================================
   pages/projects.css — Projects listing page only.
   The card, stats band and quote section are shared components; see
   assets/css/components/
   ===================================================================== */

.projects-listing {
	background-color: var(--background-color);
}

/* ---------------------------------------------------------------
   Category filter pills
   --------------------------------------------------------------- */
.project-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .875rem;
	margin-top: 2.75rem;
}

.project-filter {
	padding: .8125rem 1.75rem;
	font-family: var(--font-secondary);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink-900);
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.project-filter:hover {
	border-color: var(--primary-color);
	transform: translateY(-1px);
}

.project-filter.is-active {
	color: var(--ink-900);
	background-image: var(--gradient-orange-cta);
	border-color: transparent;
	box-shadow: 0 10px 28px rgba(226, 126, 62, .32);
}

/* ---------------------------------------------------------------
   Grid + filtering
   --------------------------------------------------------------- */
.project-cell {
	transition: opacity .25s ease;
}

/* Hidden by the filter script. Uses the attribute rather than [hidden] so the
   Bootstrap column display value does not have to be fought. */
.project-cell[data-filtered-out] {
	display: none;
}

.projects-listing__empty {
	margin: 0;
	text-align: center;
	font-size: 1.0625rem;
	color: var(--text-color);
}

.projects-listing__empty[hidden] {
	display: none;
}