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


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

.ds-gallery 														{ width: 100%; height: var(--available-H); margin: 0; padding: 0; position: relative; grid-column: span 12; }
.ds-gallery .carousel-cell 											{ width: 100%; height: var(--available-H); margin: 0 var(--S01) 0 0; padding: 0 0 var(--caption-H) 0; position: relative; display: flex; flex-direction: column; align-items: center;  justify-content: var(--cell-align, flex-start); /* vertical position, set per cell via JS */ }
.ds-gallery img 													{ max-width: 100%; height: auto; margin: 0; 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; }
.ds-gallery.is-fullscreen .flickity-viewport 						{ width: 100% !important; height: 100% !important; }
.ds-gallery.is-fullscreen .carousel-cell 							{ width: 100% !important; height: 100% !important; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.ds-gallery.is-fullscreen img 										{ max-width: 95vw; max-height: 85vh; width: auto; height: auto; object-fit: contain; }

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

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

.flickity-fullscreen-button 										{ width: auto; height: var(--caption-H); border-radius: 0; position: absolute; bottom: 0; right: 0; cursor: pointer; z-index: 10; }

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

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

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

.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); display: none; }
.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: var(--S01); background-image: url('../img/icons/arrow-left.svg'); } 
.flickity-prev-next-button.next                         			{ right: var(--S01); background-image: url('../img/icons/arrow-right.svg'); }

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

.flickity-page-dots 												{ height: var(--caption-H); width: auto; bottom: 0; right: 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px; }
.flickity-page-dots .dot 											{ width: 12px; height: 12px; margin: 0; background: #FFFFFF; border: 1px solid #000000; opacity: 1; transition: background var(--A01); }
.flickity-page-dots .dot.is-selected 								{ background: #000000; }

/* Fullscreen mode */
.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-caption 													{ height: var(--caption-H); position: absolute; bottom: 0; left: 0; right: 0; opacity: 0; transition: opacity var(--A02); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
.carousel-cell.is-selected .carousel-caption						{ opacity: 1; }

/* Fullscreen mode */
.is-fullscreen .carousel-caption 									{ opacity: 1; padding: 0 var(--S01); }


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

@media ( min-width: 768px) {

}

@media ( min-width: 1024px) {
	.ds-gallery .carousel-cell 											{ width: auto; margin: 0; padding: 0 25vw var(--caption-H) 0; align-items: flex-start; }
	.ds-gallery img 													{ width: auto; height: 75%; margin: 0; display: block; }

	.flickity-prev-next-button											{ display: block; }	
	.flickity-fullscreen-button-view  									{ display: block; }

	.is-fullscreen .flickity-fullscreen-button  						{ right: var(--S01); }
	.flickity-page-dots 												{ display: none; }
}

@media ( min-width: 1440px) {
	.flickity-prev-next-button.previous                     			{ left: var(--S01); } 
	.flickity-prev-next-button.next                         			{ right: var(--S01); }
	
	.is-fullscreen .flickity-fullscreen-button  						{ right: var(--S02); }
	.is-fullscreen .carousel-caption 									{ padding: 0 var(--S02); }

}

@media ( min-width: 1920px) {
	.flickity-prev-next-button.previous                     			{ left: var(--S01); } 
	.flickity-prev-next-button.next                         			{ right: var(--S01); }

	.is-fullscreen .flickity-fullscreen-button  						{ right: var(--S03); }
	.is-fullscreen .carousel-caption 									{ padding: 0 var(--S03); }
}