/**
 * CzarCommerce — Grid Filter (FASE 12.7 / pendência #73-residual, 2026-05-29).
 *
 * Companheiro CSS de `assets/src/front/modules/grid-filter.js`. Substitui o
 * layout grid + animações da lib jQuery Isotope para containers opt-in.
 *
 * Markup esperado:
 *   <div data-czar-grid-filter class="czar-grid-filter-container">
 *     <article data-czar-grid-item data-czar-grid-tags="cat-a">...</article>
 *   </div>
 *
 * `grid-auto-flow: dense` faz o grid reflua naturalmente quando `[hidden]`
 * muda em um item — sem callback de layout JS.
 */

.czar-grid-filter-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	grid-auto-flow: dense;
	gap: var(--czar-space-4, 1rem);
}

[data-czar-grid-item][hidden] {
	display: none;
}

/* Transição suave ao mudar a visibilidade. `prefers-reduced-motion` desliga. */
@media (prefers-reduced-motion: no-preference) {
	[data-czar-grid-item] {
		transition: opacity 200ms ease;
	}
}

/* Estado ativo dos botões de filtro — herda tom da paleta atual. */
[data-czar-filter-btn].active {
	font-weight: var(--czar-font-weight-bold, 700);
	color: var(--czar-color-primary, currentColor);
}