/**
 * Dante Galli – Elements: galleria masonry e lightbox.
 *
 * Galleria: replica vc_masonry_media_grid (gap 0, colonne 33.333%, comparsa dopo il caricamento
 * delle immagini, loader "load7" di WPBakery, una colonna sotto 768px).
 * Lightbox: aspetto della skin prettyPhoto del tema (overlay #373737 a 0.7, barra bianca alta 67px
 * sotto l'immagine, icone Linea Arrows); fasi lineari 200/400ms misurate sull'originale.
 */

/* ==========================================================================
   Galleria
   ========================================================================== */
.dg-gallery {
	position: relative;
}

.dg-gallery__grid {
	position: relative;
	margin-right: calc(-1 * var(--dg-gallery-gap, 0px));
	margin-bottom: calc(-1 * var(--dg-gallery-gap, 0px));
}

.dg-gallery__grid::after {
	content: "";
	display: table;
	clear: both;
}

.dg-gallery__item {
	position: relative;
	box-sizing: border-box;
	padding: 0 var(--dg-gallery-gap, 0px) var(--dg-gallery-gap, 0px) 0;
	vertical-align: top;
	z-index: 1;
}

.dg-gallery__item:hover {
	z-index: 3;
}

.dg-gallery__link {
	display: block;
}

.dg-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

/* Fino al caricamento di tutte le immagini la griglia non occupa spazio (come gli item display:none). */
.dg-gallery.is-loading .dg-gallery__grid {
	visibility: hidden;
	height: 0;
	overflow: hidden;
}

@media (min-width: 768px) {
	.dg-gallery--cols-2 .dg-gallery__item {
		width: 50%;
	}

	.dg-gallery--cols-3 .dg-gallery__item {
		width: 33.33333333%;
	}

	.dg-gallery--cols-4 .dg-gallery__item {
		width: 25%;
	}

	.dg-gallery--cols-5 .dg-gallery__item {
		width: 20%;
	}

	.dg-gallery--cols-6 .dg-gallery__item {
		width: 16.66666667%;
	}

	/* Posizionamento masonry calcolato in JS; senza JS restano in colonna. */
	.dg-gallery.is-masonry .dg-gallery__item {
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* Loader a puntini (WPBakery .vc_grid-loading / @keyframes load7). */
.dg-gallery__loader {
	display: none;
}

.dg-gallery.is-loading .dg-gallery__loader {
	position: relative;
	display: block;
	width: 12px;
	height: 12px; /* in WPBakery height:20px è sovrascritto dalla regola successiva */
	margin: 2em auto;
	font-size: 10px;
}

.dg-gallery.is-loading .dg-gallery__loader,
.dg-gallery.is-loading .dg-gallery__loader::before,
.dg-gallery.is-loading .dg-gallery__loader::after {
	border-radius: 50%;
	/* fill-mode "none": in WPBakery lo shorthand annulla l'animation-fill-mode:both dichiarato prima. */
	animation: dg-load7 1.8s infinite ease-in-out;
}

.dg-gallery.is-loading .dg-gallery__loader::before,
.dg-gallery.is-loading .dg-gallery__loader::after {
	content: "";
	position: absolute;
	top: 0;
	width: 12px;
	height: 12px;
}

.dg-gallery.is-loading .dg-gallery__loader::before {
	left: -20px;
}

.dg-gallery.is-loading .dg-gallery__loader::after {
	left: 20px;
	animation-delay: 0.32s;
}

@keyframes dg-load7 {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em rgba(235, 235, 235, 0.75);
	}

	40% {
		box-shadow: 0 2.5em 0 0 rgba(235, 235, 235, 0.75);
	}
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.dg-lightbox[hidden] {
	display: none;
}

.dg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
}

.dg-lightbox__overlay {
	position: absolute;
	inset: 0;
	background-color: #373737;
	opacity: 0;
	transition: opacity 0.2s linear;
}

.dg-lightbox.is-open .dg-lightbox__overlay {
	opacity: 0.7;
}

/* Loader: cerchio bianco 32px al centro (.pp_loaderIcon + @keyframes scaleout del tema). */
.dg-lightbox__loader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	opacity: 0;
	pointer-events: none;
}

.dg-lightbox__loader::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	background-color: #fff;
	animation: dg-scaleout 1s infinite ease-in-out;
}

/* Compare in dissolvenza con il riquadro (400ms), sparisce di colpo come .pp_loaderIcon. */
.dg-lightbox.is-loading .dg-lightbox__loader {
	opacity: 1;
	transition: opacity 0.4s linear;
}

@keyframes dg-scaleout {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
		opacity: 0;
	}
}

.dg-lightbox__frame {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.2s linear;
	color: #2d2d2d;
}

.dg-lightbox.is-shown .dg-lightbox__frame {
	opacity: 1;
}

.dg-lightbox__stage {
	position: relative;
	line-height: 1;
}

.dg-lightbox__img {
	display: block;
	max-width: none;
	vertical-align: middle;
}

/* Barra inferiore (.pp_details). */
.dg-lightbox__details {
	position: relative;
	height: 67px;
	margin: 0;
	background-color: #fff;
	line-height: 67px;
}

:where(.dg-lightbox) button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

:where(.dg-lightbox) button:focus {
	outline: none;
}

:where(.dg-lightbox) button:focus-visible {
	outline: 2px solid #c3b380;
	outline-offset: -2px;
}

/*
 * Glifi Linea Arrows: alti 1em e centrati nella riga come i caratteri del tema.
 * +0.033em: il TTF del tema ha metriche verticali (hhea 516/-4) diverse da quelle del font SVG
 * da cui è estratto il path (480/-32), quindi il carattere originale sta leggermente più in basso
 * (misurato: 1.13px a 34px).
 */
.dg-lightbox .dg-svg {
	position: absolute;
	top: calc((1lh - 1em) / 2 + 0.033em);
	left: 0;
}

.dg-lightbox__close {
	position: absolute;
	top: 0;
	right: 23px;
	display: block;
	width: 25px;
	height: 67px;
	color: #2d2d2d;
	font-size: 34px;
	transition: color 0.15s ease-out;
}

.dg-lightbox__nav {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	vertical-align: top;
}

.dg-lightbox__arrow {
	position: relative;
	float: left;
	width: 4%;
	min-width: 20px;
	height: 100%;
	overflow: hidden;
	color: #2d2d2d;
	font-size: 33px;
	transition: color 0.15s ease-out;
}

.dg-lightbox__arrow--prev {
	margin-left: 22px;
}

.dg-lightbox__arrow .dg-svg {
	left: calc(50% - 0.5em - 2px);
}

.dg-lightbox__counter {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -16px;
	padding: 0;
	color: #2d2d2d;
	font-size: 14px;
	line-height: inherit;
	letter-spacing: 5px;
}

/* Frecce sopra l'immagine (.pp_next / .pp_previous), visibili al passaggio del mouse. */
.dg-lightbox__side {
	position: absolute;
	top: 50%;
	display: block;
	width: 40px;
	height: 27px;
	margin: -13px 0 0;
	color: #2d2d2d;
	font-size: 40px;
	line-height: 27px;
	opacity: 0;
	transition: opacity 0.2s ease-out, color 0.2s ease-out;
}

.dg-lightbox__side--prev {
	left: 20px;
}

.dg-lightbox__side--next {
	right: 20px;
}

.dg-lightbox__stage:hover .dg-lightbox__side,
.dg-lightbox__side:focus-visible {
	opacity: 1;
}

.dg-lightbox__close:hover,
.dg-lightbox__arrow:hover,
.dg-lightbox__side:hover {
	color: #373737;
}

.dg-lightbox.is-single .dg-lightbox__nav,
.dg-lightbox.is-single .dg-lightbox__side {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.dg-lightbox__overlay,
	.dg-lightbox__frame,
	.dg-lightbox__loader {
		transition: none;
	}
}