/**
 * Slideshow styles for dsn_modal galleries.
 * Inlines minimal Flickity baseline so the plugin is self-contained.
 */

/* ---- Flickity baseline ---- */
.dsn-ms-slideshow.flickity-enabled { position: relative; }
.dsn-ms-slideshow.flickity-enabled:focus { outline: none; }
.dsn-ms-slideshow .flickity-viewport { overflow: hidden; position: relative; height: 100%; }
.dsn-ms-slideshow .flickity-slider { position: absolute; width: 100%; height: 100%; }
.dsn-ms-slideshow.is-draggable {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.dsn-ms-slideshow.is-draggable .flickity-viewport { cursor: move; cursor: grab; }
.dsn-ms-slideshow.is-draggable .flickity-viewport.is-pointer-down { cursor: grabbing; }

/* ---- Slideshow wrapper: fixed aspect ratio so all slides share height ---- */
.dsn-ms-slideshow {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 80vh;
}
.dsn-ms-slideshow .flickity-viewport {
	height: 100% !important;
}
/* Cancel Flickity's horizontal slider; we stack slides absolutely for fade. */
.dsn-ms-slideshow .flickity-slider {
	transform: none !important;
	position: relative;
	width: 100%;
	height: 100%;
}

/* ---- Slides: stacked, fade via opacity ---- */
/* `left: 0 !important` overrides Flickity's inline horizontal offset (it normally
   places cells side-by-side at left:0, left:Wpx, left:2Wpx... and translates the
   slider). Since we kill the translate, we also need every slide to share left:0. */
.dsn-ms-slideshow .dsn-ms-slide {
	position: absolute !important;
	left: 0 !important;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 500ms ease-in-out;
	pointer-events: none;
}
.dsn-ms-slideshow .dsn-ms-slide.is-selected {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}
.dsn-ms-slideshow .dsn-ms-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Arrows ---- */
.dsn-ms-slideshow .flickity-prev-next-button {
	position: absolute;
	top: 50%;
	width: 44px; height: 44px;
	border: none; border-radius: 50%;
	background: rgba(255,255,255,0.85);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .2s;
	z-index: 3;
}
.dsn-ms-slideshow .flickity-prev-next-button:hover { background: #fff; }
.dsn-ms-slideshow .flickity-prev-next-button:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,130,181,0.4); }
.dsn-ms-slideshow .flickity-prev-next-button.previous { left: 16px; }
.dsn-ms-slideshow .flickity-prev-next-button.next { right: 16px; }
.dsn-ms-slideshow .flickity-prev-next-button:disabled { opacity: 0.25; cursor: auto; }
.dsn-ms-slideshow .flickity-prev-next-button svg {
	position: absolute; left: 20%; top: 20%;
	width: 60%; height: 60%;
}
.dsn-ms-slideshow .flickity-prev-next-button .arrow { fill: #0f2356; }

/* ---- Dots ---- */
.dsn-ms-slideshow .flickity-page-dots {
	position: absolute;
	width: 100%;
	bottom: 12px;
	padding: 0; margin: 0;
	list-style: none;
	text-align: center;
	line-height: 1;
	z-index: 3;
}
.dsn-ms-slideshow .flickity-page-dots .dot {
	display: inline-block;
	width: 8px; height: 8px;
	margin: 0 4px;
	background: #fff;
	border-radius: 50%;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity .2s, transform .2s;
}
.dsn-ms-slideshow .flickity-page-dots .dot.is-selected {
	opacity: 1;
	transform: scale(1.25);
}

/* ---- When inside a no-padding modal, slides should fill width ---- */
.dsn-ms-no-padding .dsn-ms-content .dsn-ms-slideshow { margin: 0; }

/* Hide the original Gutenberg gallery before JS upgrades it (avoids flash of grid). */
.dsn-ms-overlay .wp-block-gallery:not(.dsn-ms-slideshow-ready) {
	visibility: hidden;
	min-height: 200px;
}