/* ==========================================================================
   Blocco: Griglia Card (csp-card-grid)
   Logica a 12 colonne, gestita interamente via CSS con le "quantity
   queries" (nth-child / nth-last-child): la larghezza di ogni card dipende
   da quante card ci sono in totale nel blocco, senza bisogno di JS.
   ========================================================================== */

.csp-card-grid {
	--csp-cg-gap: 2rem;

	display: flex;
	flex-wrap: wrap;
	gap: var(--csp-cg-gap);
	max-width: 1200px;
	margin: 0 auto;
}

/* Default: 1 sola card totale -> 12/12 (100%) */
.csp-card-grid-item {
	flex: 1 1 100%;
}

/* --------------------------------------------------------------------
   2 card totali -> 6/12 ciascuna (50%)
   -------------------------------------------------------------------- */
.csp-card-grid .csp-card-grid-item:first-child:nth-last-child(2),
.csp-card-grid .csp-card-grid-item:first-child:nth-last-child(2) ~ .csp-card-grid-item {
	flex-basis: calc(50% - (var(--csp-cg-gap) / 2));
}

/* --------------------------------------------------------------------
   3 o più card totali -> 4/12 ciascuna (33,33%), righe da 3
   -------------------------------------------------------------------- */
.csp-card-grid .csp-card-grid-item:first-child:nth-last-child(n+3),
.csp-card-grid .csp-card-grid-item:first-child:nth-last-child(n+3) ~ .csp-card-grid-item {
	flex-basis: calc(33.333% - (var(--csp-cg-gap) * 2 / 3));
}

/* --------------------------------------------------------------------
   Ultima riga incompleta: si riapplica la stessa logica 12/6.
   -------------------------------------------------------------------- */

/* Resto di 1 card sull'ultima riga (es. 4, 7, 10 card totali) -> 12/12 */
.csp-card-grid .csp-card-grid-item:nth-child(3n+1):nth-last-child(1) {
	flex-basis: 100%;
}

/* Resto di 2 card sull'ultima riga (es. 5, 8, 11 card totali) -> 6/12 ciascuna */
.csp-card-grid .csp-card-grid-item:nth-child(3n+2):nth-last-child(2),
.csp-card-grid .csp-card-grid-item:nth-child(3n+2):nth-last-child(2) ~ .csp-card-grid-item {
	flex-basis: calc(50% - (var(--csp-cg-gap) / 2));
}

/* --------------------------------------------------------------------
   Responsive: sotto i 768px, sempre una card per riga.
   -------------------------------------------------------------------- */
@media (max-width: 768px) {
	.csp-card-grid-item {
		flex-basis: 100% !important;
	}
}