/* ==========================================================================
   Edilmutti - gallery a muratura per righe (assets/js/muratura.js) e foto ingrandita
   (template-parts/prodotto/lightbox.php, assets/js/lightbox.js): pagine prodotto,
   Showroom.
   ========================================================================== */

/* ---------- Gallery a muratura per righe: foto intere, righe a tutta larghezza ---------- */
/* Ogni foto cresce in proporzione al suo rapporto larghezza/altezza (--r): nella stessa
   riga le altezze coincidono. muratura.js divide le foto in righe equilibrate, senza
   superare --larghezza-riga (somma delle proporzioni) e alte almeno --proporzione-riga
   della larghezza.
   Senza JS, l'::after assorbe lo spazio dell'ultima riga, che cosi' non si allarga
   a dismisura. */
.dg-muratura { --altezza-riga: 11rem; display: flex; flex-wrap: wrap; gap: var(--dg-space-3); margin: var(--dg-ss-md) 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .dg-muratura { --altezza-riga: 16rem; --larghezza-riga: 4.5; --proporzione-riga: .3; } }
@media (min-width: 1200px) { .dg-muratura { --altezza-riga: 22rem; } }
.dg-muratura::after { content: ""; flex-grow: 999; }
.dg-muratura > li { flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--altezza-riga)); min-width: 0; }
.dg-muratura__foto { display: block; overflow: hidden; background: var(--dg-neutral-200); cursor: zoom-in; }
.dg-muratura__foto img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
	.dg-muratura__foto img { transition: transform var(--dg-duration-base) var(--dg-ease-standard); }
	.dg-muratura__foto:hover img { transform: scale(1.04); }
}

/* ---------- Foto ingrandita al clic ---------- */
.dg-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: var(--dg-space-6) var(--dg-space-3); color: var(--dg-neutral-100); background: transparent; border: 0; }
.dg-lightbox::backdrop { background: rgba(var(--dg-black-rgb), .9); }
.dg-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.dg-lightbox__figura { display: flex; flex-direction: column; align-items: center; gap: var(--dg-space-3); max-width: 100%; max-height: 100%; margin: 0; }
.dg-lightbox__img { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 9rem); object-fit: contain; }
.dg-lightbox__didascalia { max-width: 40em; font-size: var(--dg-fs-sm); text-align: center; }
.dg-lightbox__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; color: var(--dg-neutral-100); background: rgba(var(--dg-black-rgb), .4); border: var(--dg-border-width) solid rgba(var(--dg-neutral-100-rgb), .4); border-radius: var(--dg-radius-circle); cursor: pointer; }
.dg-lightbox__btn:hover { color: var(--dg-primary-500); background: var(--dg-neutral-100); }
.dg-lightbox__chiudi { top: var(--dg-space-3); right: var(--dg-space-3); }
.dg-lightbox__chiudi .dg-icona { transform: rotate(45deg); }
.dg-lightbox__prec, .dg-lightbox__succ { top: 50%; transform: translateY(-50%); }
.dg-lightbox__prec { left: var(--dg-space-3); }
.dg-lightbox__succ { right: var(--dg-space-3); }
@media (max-width: 767.98px) {
	.dg-lightbox__prec, .dg-lightbox__succ { top: auto; bottom: var(--dg-space-3); transform: none; }
}