/**
 * Flickity Custom Styles
 * Styles for official Flickity fullscreen plugin
 */




/*
——————————————————————————————————————————
GALLERY 
——————————————————————————————————————————
*/

.ds-gallery 														{ width: 100%; height: var(--rowX); position: relative; }
.ds-gallery .carousel-cell 											{ width: max-content; height: var(--rowX); margin: 0; padding: 0; position: relative;  }
.ds-gallery img 													{ width: auto; height: var(--rowX); display: block; }

.ds-gallery .video-wrapper 											{ height: var(--rowX);  display: flex; align-items: center; justify-content: center; }
.ds-gallery .video-wrapper iframe 									{ margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; display: block; }

/* Fullscreen on html element */
html.is-flickity-fullscreen 										{ overflow: hidden; }
html.is-flickity-fullscreen body 									{ height: 100%; overflow: hidden; }

/* Gallery in fullscreen */
.ds-gallery.is-fullscreen 											{ width: 100% !important; height: 100% !important; margin: 0; padding: 0; position: fixed; top: 0; left: 0; background: #FFFFFF; z-index: 9999; }
.is-fullscreen .flickity-viewport 									{ width: 100% !important; height: 100% !important; }
.is-fullscreen .carousel-cell 										{ width: 100% !important; height: 100% !important; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.is-fullscreen img 													{ max-width: 90vw; max-height: 90vh; width: auto; height: auto; object-fit: contain;  }

.is-fullscreen .video-wrapper										{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.is-fullscreen .video-wrapper iframe								{ max-width: 80%; max-height: 80%; margin: 0; padding: 0; display: block; }



/*
——————————————————————————————————————————
FULLSCREEN BUTTON (Official plugin)
——————————————————————————————————————————
*/

.flickity-fullscreen-button .flickity-button-icon 					{ display: none;  }

.flickity-fullscreen-button 										{ width: 40px; height: 40px; border-radius: 50%; position: absolute; top: 1rem; right: 1rem; background: no-repeat center center; background-color: rgba(255, 255, 255, 0.5); background-size: 20px; transition: all var(--A03); cursor: pointer; }
.flickity-fullscreen-button:hover 									{ background: no-repeat center center; background-color: rgba(255, 255, 255, 1); background-size: 20px; }

.flickity-fullscreen-button-view 									{ background-image: url('../img/icons/plus.svg'); } 
.flickity-fullscreen-button-view:hover 								{ background-image: url('../img/icons/plus.svg'); } 
.flickity-fullscreen-button-exit 									{ background-image: url('../img/icons/close.svg'); display: none; }
.flickity-fullscreen-button-exit:hover 								{ background-image: url('../img/icons/close.svg'); } 

.is-fullscreen .flickity-fullscreen-button-view 					{ display: none; }
.is-fullscreen .flickity-fullscreen-button-exit 					{ display: block; }

/* Hack for visibility issue after slide interaction (safari) */
.flickity-fullscreen-button {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 2;
}


/*
——————————————————————————————————————————
NAVIGATION ARROWS
——————————————————————————————————————————
*/

.flickity-prev-next-button .flickity-button-icon					{ display: none; }

.flickity-prev-next-button 											{ width: 40px; height: 40px; border-radius: 50%; background: no-repeat center center; background-color: rgba(255, 255, 255, 0.5); background-size: 20px; transition: all var(--A03); }
.flickity-prev-next-button:hover 									{ background: no-repeat center center; background-color: rgba(255, 255, 255, 1); background-size: 20px; }
.flickity-prev-next-button:disabled 								{ opacity: 0.3; }

.flickity-prev-next-button.previous                     			{ left:  1rem; background-image: url('../img/icons/arrow-left.svg'); } 
.flickity-prev-next-button.next                         			{ right: 1rem; background-image: url('../img/icons/arrow-right.svg'); }

/* Hack for visibility issue after slide interaction (safari) */
.flickity-prev-next-button {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 2;
}

/*
——————————————————————————————————————————
PAGE DOTS
——————————————————————————————————————————
*/

.flickity-page-dots { bottom: 1rem; }

.flickity-page-dots .dot {
	width: 10px;
	height: 10px;
	background: rgba(0, 0, 0, 0.3);
	border: 2px solid rgba(0, 0, 0, 0.5);
	transition: background var(--A01);
}

.flickity-page-dots .dot.is-selected { background: rgba(0, 0, 0, 0.8); }

/* Fullscreen mode dots */
.is-fullscreen .flickity-page-dots { bottom: 2rem; }

.is-fullscreen .flickity-page-dots .dot {
	background: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.5);
}

.is-fullscreen .flickity-page-dots .dot.is-selected { background: rgba(255, 255, 255, 1); }


/*
——————————————————————————————————————————
CAPTIONS
——————————————————————————————————————————
*/

.carousel-cell { position: relative; }

.carousel-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	color: #fff;
	font-size: var(--font-size-small);
	text-align: center;
	opacity: 0;
	transition: opacity var(--A02);
}

.carousel-cell:hover .carousel-caption,
.carousel-cell.is-selected .carousel-caption { opacity: 1; }

/* Fullscreen captions */
.is-fullscreen .carousel-caption {
	opacity: 1;
	background: rgba(0, 0, 0, 0.7);
	padding: 1.5rem;
	font-size: var(--font-size-base);
}


/*
——————————————————————————————————————————
RESPONSIVE
——————————————————————————————————————————
*/

@media (max-width: 767px) {
	.flickity-fullscreen-button { top: 0.5rem; right: 0.5rem; width: 40px; height: 40px; }
	.is-fullscreen { padding: 1rem; }
	.is-fullscreen img { max-height: 95vh; max-width: 95vw; }
}