/* Modulo Galleria — layout solo CSS. Le impostazioni sono attributi sul contenitore. */
.ns-galleria {
	--ns-col: 2;
	--ns-spazio: 4px;
	display: grid;
	grid-template-columns: repeat(var(--ns-col), minmax(0, 1fr));
	gap: var(--ns-spazio);
}
.ns-galleria > img {
	display: block;
	width: 100%;
	height: auto;
}
.ns-galleria:not([data-lightbox="false"]) > img { cursor: zoom-in; }

/* Colonne: un attributo per breakpoint, stessi breakpoint di Bootstrap (md 768, lg 992). */
.ns-galleria[data-colonne="1"] { --ns-col: 1; } .ns-galleria[data-colonne="2"] { --ns-col: 2; }
.ns-galleria[data-colonne="3"] { --ns-col: 3; } .ns-galleria[data-colonne="4"] { --ns-col: 4; }
.ns-galleria[data-colonne="5"] { --ns-col: 5; } .ns-galleria[data-colonne="6"] { --ns-col: 6; }
@media (min-width: 768px) {
	.ns-galleria[data-colonne-md="1"] { --ns-col: 1; } .ns-galleria[data-colonne-md="2"] { --ns-col: 2; }
	.ns-galleria[data-colonne-md="3"] { --ns-col: 3; } .ns-galleria[data-colonne-md="4"] { --ns-col: 4; }
	.ns-galleria[data-colonne-md="5"] { --ns-col: 5; } .ns-galleria[data-colonne-md="6"] { --ns-col: 6; }
	.ns-galleria[data-colonne-md="7"] { --ns-col: 7; } .ns-galleria[data-colonne-md="8"] { --ns-col: 8; }
}
@media (min-width: 992px) {
	.ns-galleria[data-colonne-lg="1"] { --ns-col: 1; } .ns-galleria[data-colonne-lg="2"] { --ns-col: 2; }
	.ns-galleria[data-colonne-lg="3"] { --ns-col: 3; } .ns-galleria[data-colonne-lg="4"] { --ns-col: 4; }
	.ns-galleria[data-colonne-lg="5"] { --ns-col: 5; } .ns-galleria[data-colonne-lg="6"] { --ns-col: 6; }
	.ns-galleria[data-colonne-lg="7"] { --ns-col: 7; } .ns-galleria[data-colonne-lg="8"] { --ns-col: 8; }
}

/* Spazio fra le foto: valori a passi, come le utility gap di Bootstrap. */
.ns-galleria[data-spazio="0"] { --ns-spazio: 0; }     .ns-galleria[data-spazio="2"] { --ns-spazio: 2px; }
.ns-galleria[data-spazio="4"] { --ns-spazio: 4px; }   .ns-galleria[data-spazio="8"] { --ns-spazio: 8px; }
.ns-galleria[data-spazio="12"] { --ns-spazio: 12px; } .ns-galleria[data-spazio="16"] { --ns-spazio: 16px; }
.ns-galleria[data-spazio="24"] { --ns-spazio: 24px; } .ns-galleria[data-spazio="32"] { --ns-spazio: 32px; }

/* Masonry: colonne CSS, per foto di proporzioni diverse. Le foto scorrono per colonna. */
.ns-galleria[data-layout="masonry"] {
	display: block;
	column-count: var(--ns-col);
	column-gap: var(--ns-spazio);
}
.ns-galleria[data-layout="masonry"] > img {
	margin-bottom: var(--ns-spazio);
	break-inside: avoid;
}

/* Lightbox: <dialog> nativo creato dal JavaScript. */
.ns-galleria-lightbox {
	width: 100vw; height: 100vh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0;
	background: rgba(17, 17, 17, .94); color: #fff;
}
.ns-galleria-lightbox::backdrop { background: rgba(17, 17, 17, .94); }
.ns-galleria-lightbox figure {
	margin: 0; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 3.5rem 1rem 1rem;
}
.ns-galleria-lightbox img {
	max-width: 100%; max-height: calc(100vh - 6rem);
	width: auto; height: auto; object-fit: contain;
	user-select: none; -webkit-user-drag: none;
}
.ns-galleria-lightbox figcaption { margin-top: .75rem; font-size: .8125rem; letter-spacing: 1px; opacity: .8; }
.ns-galleria-lightbox button {
	position: absolute; appearance: none; border: 0; background: transparent; color: inherit;
	width: 3rem; height: 3rem; font-size: 2rem; line-height: 1; cursor: pointer; opacity: .8;
}
.ns-galleria-lightbox button:hover, .ns-galleria-lightbox button:focus-visible { opacity: 1; }
.ns-galleria-lightbox .ns-gl-chiudi { top: .5rem; right: .5rem; }
.ns-galleria-lightbox .ns-gl-prec { top: 50%; left: .5rem; transform: translateY(-50%); }
.ns-galleria-lightbox .ns-gl-succ { top: 50%; right: .5rem; transform: translateY(-50%); }