/* =====================================================
   Progetti Gallery — Frontend CSS v2.1.0
   ===================================================== */

/* ── Grid base ──────────────────────────────────────── */

.progetti-gallery-grid {
	display: grid;
	/* FIX #4: colonne, gap e radius letti dalle CSS vars
	   impostate inline da render_gallery().
	   I valori di fallback coprono il caso in cui le
	   variabili non siano presenti (es. widget Elementor
	   che usa i propri selectors). */
	grid-template-columns: repeat( var(--pg-cols, 3), minmax(0, 1fr) );
	gap: var(--pg-gap, 20px);
}

/* ── Link e immagine ────────────────────────────────── */

.progetti-gallery-link {
	display: block;
	text-decoration: none;
	overflow: hidden;
}

.progetti-gallery-link img {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
	border-radius: var(--pg-radius, 0px);
	transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}

.progetti-gallery-link:hover img {
	transform: scale(1.03);
}

/* ── Responsive shortcode (via CSS vars) ────────────── */
/*
   FIX #4: il CSS legge --pg-cols-tablet e --pg-cols-mobile
   che render_gallery() scrive inline sul wrapper.
   In questo modo il sistema funziona davvero, senza
   dipendere da data-attribute + JS per applicare le colonne.

   Il widget Elementor non usa queste regole:
   Elementor genera i propri CSS responsivi via selectors
   con {{WRAPPER}}, che hanno precedenza su queste.
*/

@media (max-width: 1024px) {
	.progetti-gallery-grid {
		grid-template-columns: repeat( var(--pg-cols-tablet, 2), minmax(0, 1fr) );
	}
}

@media (max-width: 767px) {
	.progetti-gallery-grid {
		grid-template-columns: repeat( var(--pg-cols-mobile, 1), minmax(0, 1fr) );
	}

	.progetti-gallery-link img {
		height: 220px;
	}
}