/*!
 * Animated Image Showcase - Frontend Styles
 */
.ais-gallery {
	position: relative;
	width: var(--ais-width, 100%);
	max-width: 100%;
	height: var(--ais-height, 400px);
	margin: var(--ais-margin, 0) auto;
	padding: var(--ais-padding, 0);
	border-radius: var(--ais-radius, 8px);
	background: var(--ais-bg, #f0f0f1);
	overflow: hidden;
	box-sizing: border-box;
	perspective: 1200px;
}

.ais-gallery * {
	box-sizing: border-box;
}

.ais-gallery.ais-has-shadow {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.ais-gallery.ais-align-left { margin-left: 0; }
.ais-gallery.ais-align-right { margin-right: 0; }

.ais-fallback-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--ais-object-fit, cover);
	border-radius: inherit;
	display: block;
	z-index: 1;
}

.ais-track {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	transform-style: preserve-3d;
}

.ais-slide {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ais-duration, 600ms) ease, transform var(--ais-duration, 600ms) ease, filter var(--ais-duration, 600ms) ease;
	will-change: transform, opacity, filter;
	border-radius: inherit;
}

.ais-slide.ais-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.ais-slide a,
.ais-slide .ais-slide-inner {
	display: block;
	width: 100%;
	height: 100%;
}

.ais-slide img {
	width: 100%;
	height: 100%;
	object-fit: var(--ais-object-fit, cover);
	display: block;
	border-radius: inherit;
	padding: calc(var(--ais-spacing, 0) / 2);
}

.ais-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	pointer-events: none;
}

/* ---------- Effects ---------- */

/* Slide Left / Right */
.ais-gallery[data-effect="slide-left"] .ais-slide { transform: translateX(100%); }
.ais-gallery[data-effect="slide-left"] .ais-slide.ais-active { transform: translateX(0); }
.ais-gallery[data-effect="slide-left"] .ais-slide.ais-outgoing { transform: translateX(-100%); }

.ais-gallery[data-effect="slide-right"] .ais-slide { transform: translateX(-100%); }
.ais-gallery[data-effect="slide-right"] .ais-slide.ais-active { transform: translateX(0); }
.ais-gallery[data-effect="slide-right"] .ais-slide.ais-outgoing { transform: translateX(100%); }

/* Fade */
.ais-gallery[data-effect="fade"] .ais-slide { transform: none; }

/* Flip */
.ais-gallery[data-effect="flip"] .ais-slide { transform: rotateY(90deg); }
.ais-gallery[data-effect="flip"] .ais-slide.ais-active { transform: rotateY(0deg); }
.ais-gallery[data-effect="flip"] .ais-slide.ais-outgoing { transform: rotateY(-90deg); }

/* Zoom */
.ais-gallery[data-effect="zoom"] .ais-slide { transform: scale(1.4); }
.ais-gallery[data-effect="zoom"] .ais-slide.ais-active { transform: scale(1); }

/* Cube */
.ais-gallery[data-effect="cube"] .ais-slide { transform: rotateY(90deg) translateZ(50px); }
.ais-gallery[data-effect="cube"] .ais-slide.ais-active { transform: rotateY(0) translateZ(0); }
.ais-gallery[data-effect="cube"] .ais-slide.ais-outgoing { transform: rotateY(-90deg) translateZ(50px); }

/* Coverflow */
.ais-gallery[data-effect="coverflow"] .ais-slide { transform: rotateY(35deg) scale(0.85); }
.ais-gallery[data-effect="coverflow"] .ais-slide.ais-active { transform: rotateY(0) scale(1); }
.ais-gallery[data-effect="coverflow"] .ais-slide.ais-outgoing { transform: rotateY(-35deg) scale(0.85); }

/* Rotate */
.ais-gallery[data-effect="rotate"] .ais-slide { transform: rotate(15deg) scale(0.9); }
.ais-gallery[data-effect="rotate"] .ais-slide.ais-active { transform: rotate(0) scale(1); }

/* Scale */
.ais-gallery[data-effect="scale"] .ais-slide { transform: scale(0.6); }
.ais-gallery[data-effect="scale"] .ais-slide.ais-active { transform: scale(1); }

/* Blur */
.ais-gallery[data-effect="blur"] .ais-slide { filter: blur(12px); transform: scale(1.05); }
.ais-gallery[data-effect="blur"] .ais-slide.ais-active { filter: blur(0); transform: scale(1); }

/* Bounce */
.ais-gallery[data-effect="bounce"] .ais-slide.ais-active {
	animation: ais-bounce-in var(--ais-duration, 600ms) ease;
}
@keyframes ais-bounce-in {
	0% { transform: scale(0.3); opacity: 0; }
	50% { transform: scale(1.08); opacity: 1; }
	75% { transform: scale(0.95); }
	100% { transform: scale(1); }
}

/* Card Stack */
.ais-gallery[data-effect="card-stack"] .ais-slide {
	transform: translateY(30px) scale(0.92);
}
.ais-gallery[data-effect="card-stack"] .ais-slide.ais-active {
	transform: translateY(0) scale(1);
}

/* Carousel (3D side-by-side illusion via translateX + scale) */
.ais-gallery[data-effect="carousel"] .ais-slide {
	transform: translateX(60%) scale(0.8);
}
.ais-gallery[data-effect="carousel"] .ais-slide.ais-active {
	transform: translateX(0) scale(1);
}
.ais-gallery[data-effect="carousel"] .ais-slide.ais-outgoing {
	transform: translateX(-60%) scale(0.8);
}

/* Ken Burns (slow continuous zoom/pan while active) */
.ais-gallery[data-effect="ken-burns"] .ais-slide img {
	transition: transform linear;
	transform: scale(1);
}
.ais-gallery[data-effect="ken-burns"] .ais-slide.ais-active img {
	animation: ais-ken-burns 8s ease-in-out forwards;
}
@keyframes ais-ken-burns {
	0% { transform: scale(1) translate(0, 0); }
	100% { transform: scale(1.15) translate(-2%, -2%); }
}

/* ---------- Navigation ---------- */

.ais-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
.ais-arrow:hover,
.ais-arrow:focus-visible {
	background: rgba(0, 0, 0, 0.75);
	outline: none;
}
.ais-arrow-prev { left: 12px; }
.ais-arrow-next { right: 12px; }

.ais-dots {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.ais-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.ais-dot.ais-active {
	background: #fff;
	transform: scale(1.25);
}

.ais-gallery:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.ais-noscript-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
	width: 100%;
	height: 100%;
	overflow: auto;
}
.ais-noscript-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
}

@media (max-width: 768px) {
	.ais-arrow { width: 32px; height: 32px; font-size: 14px; }
}

@media (max-width: 480px) {
	/*
	 * Cap runaway height on very small screens without discarding the
	 * gallery's configured height (previously this forced height:auto with
	 * a fixed 220px min-height, silently overriding whatever the admin set
	 * in Image Settings and making the gallery look inconsistent on phones).
	 */
	.ais-gallery { max-height: 70vh; }
}

/*
 * Device Display: "Enable Animated Content on Mobile / Desktop & Tablet".
 * The gallery, images, and navigation always display regardless of these
 * options — only the transition animation itself is switched off, so
 * slides change instantly instead of animating. The 768px breakpoint
 * matches the arrow-sizing breakpoint above so "mobile" is consistently
 * defined throughout the plugin.
 */
@media (max-width: 768px) {
	.ais-gallery[data-no-animate-mobile] .ais-slide {
		transition: none !important;
	}
	.ais-gallery[data-no-animate-mobile] .ais-slide.ais-active {
		animation: none !important;
	}
	.ais-gallery[data-no-animate-mobile] .ais-slide img {
		transition: none !important;
		animation: none !important;
	}
}

@media (min-width: 769px) {
	.ais-gallery[data-no-animate-desktop] .ais-slide {
		transition: none !important;
	}
	.ais-gallery[data-no-animate-desktop] .ais-slide.ais-active {
		animation: none !important;
	}
	.ais-gallery[data-no-animate-desktop] .ais-slide img {
		transition: none !important;
		animation: none !important;
	}
}