/**
 * Widget "BIIG Griglia" — impaginazione.
 *
 * Niente masonry: CSS Grid. Le righe si allineano da sole e le schede della
 * stessa riga hanno la stessa altezza, quindi la griglia resta simmetrica
 * anche con contenuti di lunghezza diversa. Non serve JS per impaginare,
 * per questo l'anteprima nell'editor Elementor funziona senza handler.
 *
 * Il numero di colonne e lo spazio arrivano da Elementor come variabili
 * (--biig-cols, --biig-gap), che i controlli responsive ridefiniscono da
 * soli dentro le loro media query.
 */

.biig-griglia {
	--biig-cols: 3;
	--biig-gap: 30px;
}

.biig-griglia-items {
	display: grid;
	grid-template-columns: repeat(var(--biig-cols), minmax(0, 1fr));
	gap: var(--biig-gap);
	align-items: stretch;
}

/*
 * Con questa classe tutte le righe prendono l'altezza della scheda piu'
 * alta della griglia, non solo della propria riga.
 */
.biig-griglia--righe-pari .biig-griglia-items {
	grid-auto-rows: 1fr;
}

/*
 * La catena che porta l'altezza fino in fondo alla scheda: senza questa
 * i figli non si allungano e la card resta alta quanto il suo contenuto,
 * lasciando il buco in basso nella cella.
 */
.biig-griglia-item {
	display: flex;
	min-width: 0;
}

.biig-griglia-item > .biig-card {
	display: flex;
	width: 100%;
}

.biig-griglia-item > .biig-card > .lqd-pf-item-inner {
	width: 100%;
}

/* Nascosta dai filtri: fuori dal flusso, cosi' la griglia si ricompatta. */
.biig-griglia-item[hidden] {
	display: none;
}

/* ==========================================================================
   Filtri per categoria
   ========================================================================== */

.biig-griglia-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: calc(var(--biig-gap) * 0.8);
}

.biig-filtro {
	appearance: none;
	border: 1px solid rgba(20, 24, 26, 0.15);
	background: transparent;
	border-radius: 100px;
	padding: 8px 20px;
	font-size: 0.9rem;
	line-height: 1.3;
	color: #14181a;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.biig-filtro:hover,
.biig-filtro:focus-visible {
	border-color: var(--color-gradient-start, #7eb928);
	color: var(--color-gradient-start, #7eb928);
}

.biig-filtro.is-active {
	background: var(--color-gradient-start, #7eb928);
	border-color: var(--color-gradient-start, #7eb928);
	color: #fff;
}

.biig-griglia-vuota {
	margin: 0;
	padding: 24px;
	border: 1px dashed rgba(20, 24, 26, 0.25);
	border-radius: 8px;
	color: #5c666b;
	text-align: center;
}

/* ==========================================================================
   Ripiego senza JS e schermi stretti
   ========================================================================== */

/*
 * Se il JS non parte i filtri non farebbero nulla: meglio non mostrarli
 * affatto. La classe la mette lo script appena si aggancia.
 */
.biig-griglia:not(.biig-griglia--pronta) .biig-griglia-filtri {
	display: none;
}

/*
 * Vale solo finche' il widget non e' stato configurato: appena si tocca il
 * controllo Colonne, Elementor scrive --biig-cols direttamente sugli items
 * con le proprie media query, che hanno la meglio su questa.
 */
@media screen and (max-width: 767px) {
	.biig-griglia,
	.biig-griglia-items {
		--biig-cols: 1;
	}
}