/* ============================================================
   Reer Gallery
   ============================================================ */
/* evita il flash al caricamento (FOUC) */
   body .rg-wrapper .rg-main:not(.flickity-enabled) {
	   visibility: hidden;
	   height: 0;
	   overflow: hidden;
   }
   body .rg-wrapper .rg-main.flickity-enabled {
	   visibility: visible;
	   height: auto;
   }
   
   /* mantieni un aspect ratio durante il caricamento per riservare lo spazio
	  ed evitare layout shift della pagina */
   body .rg-wrapper .rg-main {
	   aspect-ratio: 16 / 10;
	   min-height: 0;
   }
   body .rg-wrapper .rg-main.flickity-enabled {
	   aspect-ratio: auto;
   }
   
body .rg-wrapper {
	margin-bottom: clamp(20px, 4vw, 50px);
}

/* -------- SLIDER GRANDE -------- */
body .rg-wrapper .rg-main {
	margin: 0 0 20px 0;
	/*border-radius: 32px;*/
	overflow: hidden;
	background: var(--bianco);
	border: 1px solid var(--grigiochiaro);
}
body .rg-wrapper .rg-main .rg-slide {
	width: 100%;
}
body .rg-wrapper .rg-main .rg-slide img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	aspect-ratio: 16 / 9;
}
body .rg-wrapper .rg-main .rg-slide-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
body .rg-wrapper .rg-main .rg-slide-video iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
body .rg-wrapper .rg-main .flickity-prev-next-button {
	width: 44px;
	height: 44px;
	background: rgba(255,255,255,.9);
}
body .rg-wrapper .rg-main .flickity-prev-next-button:hover { background: var(--bianco); }
body .rg-wrapper .rg-main .flickity-page-dots { display: none; }


/* -------- THUMBNAILS: 4 colonne via percentPosition -------- */
body .rg-wrapper .rg-thumbs {
	margin: 0 0 50px 0;
	padding: 0;
	position: relative;
}
body .rg-wrapper .rg-thumbs .flickity-viewport {
	overflow: hidden;
}

body .rg-wrapper .rg-thumbs .rg-thumb {
	width: 25%!important;
	padding: 0 6px;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
}

body .rg-wrapper .rg-thumbs .rg-thumb-inner {
	border-radius: 32px;
	overflow: hidden;
	background: var(--bianco);
	border: 1px solid var(--grigiochiaro);
	transition: border-color .2s ease;
	display: block;
	max-height: 150px;
	max-width: 150px;
}
body .rg-wrapper .rg-thumbs .rg-thumb img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity .2s ease;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
/*
body .rg-wrapper .rg-thumbs .rg-thumb:not(.is-nav-selected) img { opacity: .55; }
body .rg-wrapper .rg-thumbs .rg-thumb:hover img { opacity: .85; }
*/
body .rg-wrapper .rg-thumbs .rg-thumb.is-nav-selected .rg-thumb-inner {
	border-color: var(--blu);
}
body .rg-wrapper .rg-thumbs .rg-thumb.is-nav-selected img { opacity: 1; }


/* -------- DOTS dashes-spaced (stile slider-prodotti) -------- */
body .rg-wrapper .rg-thumbs .flickity-page-dots {
	bottom: -28px;
	position: absolute;
	width: 100%;
	left: 0;
	text-align: center;
	padding: 0;
	margin: 0;
	line-height: 0;
}
body .rg-wrapper .rg-thumbs .flickity-page-dots .dot {
	height: 8px;
	width: 24px;
	border-radius: 20px;
	opacity: 1;
	background-color: var(--giallo, #ffcc00);
	border: none;
	margin: 0 4px;
	display: inline-block;
}
body .rg-wrapper .rg-thumbs .flickity-page-dots .dot.is-selected {
	width: 40px;
	background-color: var(--blu, #001f5b);
}


/* -------- PLAY BUTTON sulla thumb video -------- */
body .rg-wrapper .rg-play-btn {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--giallo, #ffcc00);
	pointer-events: none;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
body .rg-wrapper .rg-play-btn::before {
	content: "";
	position: absolute;
	top: 50%; left: 56%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--nero, #000);
}


/* -------- RESPONSIVE -------- */
@media (max-width: 849px) {
	body .rg-wrapper .rg-thumbs .rg-thumb {
		width: 33.333%!important;
	}
	body .rg-wrapper .rg-main
	{
		border-radius: 16px;
	}
	body .rg-wrapper .rg-thumbs .rg-thumb-inner
	{
		border-radius: 16px;
	}
}
@media (max-width: 549px) {
	body .rg-wrapper .rg-thumbs .rg-thumb {
		width: 33.333%!important;
	}
	body .rg-wrapper .rg-main
	{
		border-radius: 16px;
	}
	body .rg-wrapper .rg-thumbs .rg-thumb-inner
	{
		border-radius: 16px;
	}
}