/* Card-grid: generic CPT loop grid + client-side taxonomy filter chips.
   Component-specific styles only. Page-specific card markup lives in the
   card partials (sections/cards/*-card.php) and may reuse these helpers. */

.card-grid { display: flex; flex-direction: column; gap: 2.5rem; }

/* ---- Filter chips ---- */
.card-grid__filters { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.card-grid__filter { display: flex; flex-direction: column; gap: 0.6rem; }
.card-grid__filter-label {
	font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--text-muted);
}
.card-grid__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.card-grid__chip {
	font: inherit; font-size: 14px; line-height: 1; font-weight: 500;  /* prod filter chip: 14px / 500 / 7px 13px */
	padding: 7px 13px; border-radius: 999px;
	border: 1px solid rgba(87, 85, 198, 0.25);
	background: transparent; color: var(--dark);
	cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.card-grid__chip:hover { border-color: var(--indigo); }
.card-grid__chip.is-active {
	background: var(--indigo); color: #fff; border-color: var(--indigo);
}

/* ---- Grid ---- */
.card-grid__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.card-grid__item { display: flex; flex-direction: column; }
.card-grid__item[hidden] { display: none; }

/* ---- Load More ---- */
.card-grid__more { align-self: center; }
.card-grid__more[hidden] { display: none; }

/* ---- Empty / error states ---- */
.card-grid__empty {
	color: var(--text-muted); font-size: 1.1rem; text-align: center;
	padding: 2rem 0; margin: 0;
}
.card-grid__error { color: #b00; }

/* ---- Responsive ---- */
@media ( max-width: 900px ) {
	.card-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 560px ) {
	.card-grid__grid { grid-template-columns: 1fr; }
	.card-grid__filters { gap: 1rem 1.5rem; }
}