/*
 * Loop Grid — stili del blocco bricks/loop-grid.
 *
 * La griglia è pilotata da CSS custom properties emesse inline dal template
 * PHP. La cascade mobile-first usa var() con fallback a breakpoint più
 * piccoli: se --lgrid-cols-xl non è definito (campo vuoto), eredita lg, poi
 * md, poi xs. Questo garantisce che un blocco salvato senza XL non collassi
 * a 0 colonne.
 *
 * Gli item (.tnd-loop-item) ricevono min-width:0 per prevenire overflow dei
 * contenuti long-word nelle celle CSS grid (comportamento nativo di grid:
 * le celle possono espandersi oltre minmax se il contenuto è più largo).
 */

.tnd-loop-grid {
    display: grid;
    gap: var(--lgrid-gap, 0);
    grid-template-columns: repeat(var(--lgrid-cols-xs, 1), minmax(0, 1fr));
}

@media (min-width: 768px) {
    .tnd-loop-grid {
        grid-template-columns: repeat(
            var(--lgrid-cols-md, var(--lgrid-cols-xs, 1)),
            minmax(0, 1fr)
        );
    }
}

@media (min-width: 1024px) {
    .tnd-loop-grid {
        grid-template-columns: repeat(
            var(--lgrid-cols-lg, var(--lgrid-cols-md, var(--lgrid-cols-xs, 1))),
            minmax(0, 1fr)
        );
    }
}

@media (min-width: 1280px) {
    .tnd-loop-grid {
        grid-template-columns: repeat(
            var(--lgrid-cols-xl, var(--lgrid-cols-lg, var(--lgrid-cols-md, 1))),
            minmax(0, 1fr)
        );
    }
}

/* Ogni figlio diretto (tnd-loop-item) occupa esattamente 1 cella.
   Override necessario perché bricks/column applica classi responsive
   `col-span-N` che altrimenti espandono la cella su più colonne. */
.tnd-loop-grid > * {
    grid-column: span 1;
    min-width: 0;
}