/**
 * Adamedia Divi Thumb Slider
 *
 * Verwendung:
 * Divi-Slider-Modul > Erweitert > CSS-ID & Klassen > CSS-Klasse:
 * am-thumb-slider
 */

.et_pb_slider.am-thumb-slider {
	--am-thumb-size: 90px;
	--am-thumb-size-tablet: 58px;
	--am-thumb-size-mobile: 52px;
	--am-thumb-gap: 24px;
	--am-thumb-gap-tablet: 16px;
	--am-thumb-gap-mobile: 12px;
	--am-thumb-bottom: 25px;
	--am-thumb-bottom-tablet: 20px;
	--am-thumb-bottom-mobile: 15px;
	--am-thumb-bottom-space: 110px;
	--am-thumb-bottom-space-mobile: 85px;
	--am-thumb-opacity: 0.55;
	--am-thumb-active-scale: 1.12;
	--am-thumb-active-scale-mobile: 1.08;

	padding-bottom: var(--am-thumb-bottom-space) !important;
	overflow: visible !important;
}

/* Varianten */
.et_pb_slider.am-thumb-slider.am-thumb-slider-small {
	--am-thumb-size: 68px;
	--am-thumb-size-tablet: 52px;
	--am-thumb-size-mobile: 44px;
	--am-thumb-bottom-space: 90px;
	--am-thumb-bottom-space-mobile: 72px;
}

.et_pb_slider.am-thumb-slider.am-thumb-slider-large {
	--am-thumb-size: 110px;
	--am-thumb-size-tablet: 70px;
	--am-thumb-size-mobile: 60px;
	--am-thumb-bottom-space: 130px;
	--am-thumb-bottom-space-mobile: 96px;
}

.et_pb_slider.am-thumb-slider.am-thumb-slider-square .et-pb-controllers a {
	border-radius: 18% !important;
}

/* Slide-Container dürfen die Thumbnail-Navigation nicht abschneiden. */
.et_pb_slider.am-thumb-slider .et_pb_slides,
.et_pb_slider.am-thumb-slider .et_pb_slide,
.et_pb_slider.am-thumb-slider .et_pb_container {
	overflow: visible !important;
}

/* Native Divi-Sliderbilder ausblenden, aber als Bildquelle im DOM behalten. */
.et_pb_slider.am-thumb-slider:not(.am-thumb-slider-show-images) .et_pb_slide_image {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	margin: 0 !important;
}

/* Divi-Bildlayout neutralisieren, damit Text-Slides trotz gesetztem Slide-Bild vollbreit bleiben. */
.et_pb_slider.am-thumb-slider:not(.am-thumb-slider-show-images) .et_pb_slide_with_image .et_pb_slide_description {
	width: 100% !important;
	float: none !important;
	padding-left: 8% !important;
	padding-right: 8% !important;
}

.et_pb_slider.am-thumb-slider:not(.am-thumb-slider-show-images) .et_pb_slider_container_inner {
	display: block !important;
}

.et_pb_slider.am-thumb-slider .et_pb_slide_description {
	text-shadow: none !important;
	padding-bottom: 40px !important;
}

/* Divi-Controller-Leiste. */
.et_pb_slider.am-thumb-slider .et-pb-controllers {
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: var(--am-thumb-gap);
	line-height: 0;
	bottom: var(--am-thumb-bottom) !important;
	z-index: 5;
}

/* Einzelne Controller als runde Bild-Thumbnails. */
.et_pb_slider.am-thumb-slider .et-pb-controllers a {
	width: var(--am-thumb-size) !important;
	height: var(--am-thumb-size) !important;
	display: inline-block !important;
	border-radius: 50% !important;
	margin: 0 !important;
	padding: 0 !important;

	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;

	font-size: 0 !important;
	color: transparent !important;
	text-indent: -9999px;
	overflow: hidden;

	opacity: var(--am-thumb-opacity);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.et_pb_slider.am-thumb-slider .et-pb-controllers a:hover,
.et_pb_slider.am-thumb-slider .et-pb-controllers .et-pb-active-control {
	opacity: 1;
}

.et_pb_slider.am-thumb-slider .et-pb-controllers .et-pb-active-control {
	transform: scale(var(--am-thumb-active-scale));
}

/* Fallback-Thumbs minimal markieren, damit sie nicht wie kaputte Bilder wirken. */
.et_pb_slider.am-thumb-slider .et-pb-controllers a.am-thumb-is-placeholder {
	background-color: #f2f3f4 !important;
}

@media (max-width: 980px) {
	.et_pb_slider.am-thumb-slider .et-pb-controllers {
		gap: var(--am-thumb-gap-tablet);
		bottom: var(--am-thumb-bottom-tablet) !important;
	}

	.et_pb_slider.am-thumb-slider .et-pb-controllers a {
		width: var(--am-thumb-size-tablet) !important;
		height: var(--am-thumb-size-tablet) !important;
	}

	.et_pb_slider.am-thumb-slider .et-pb-controllers .et-pb-active-control {
		transform: scale(var(--am-thumb-active-scale-mobile));
	}
}

@media (max-width: 767px) {
	.et_pb_slider.am-thumb-slider {
		padding-bottom: var(--am-thumb-bottom-space-mobile) !important;
	}

	.et_pb_slider.am-thumb-slider .et-pb-controllers {
		gap: var(--am-thumb-gap-mobile);
		flex-wrap: wrap;
		bottom: var(--am-thumb-bottom-mobile) !important;
	}

	.et_pb_slider.am-thumb-slider .et-pb-controllers a {
		width: var(--am-thumb-size-mobile) !important;
		height: var(--am-thumb-size-mobile) !important;
	}

	.et_pb_slider.am-thumb-slider .et_pb_slide_description {
		padding-bottom: 30px !important;
	}

	/* Divi-Mobile-Animationsproblem bei Slider-Texten entschärfen. */
	.et_pb_slider.am-thumb-slider .et-pb-active-slide .et_pb_slide_description {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}