/**
 * Hotspot-carousel: alleen van toepassing binnen .ih-hotspots-carousel (shortcode image_hotspots_slider).
 * Losse [image_hotspots] gebruikt dit bestand niet voor layout van de afbeelding.
 */

.ih-carousel-slider-frame {
	width: 100%;
	background: #ffffff;
	position: relative;
	overflow: hidden;
	display: block;
}

.ih-hotspots-carousel .swiper {
	width: 100%;
}

.ih-hotspots-carousel .swiper-slide {
	background-color: #ffffff;
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
}

.ih-hotspots-carousel .swiper-slide .ih-frontend-wrap {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
}

.ih-hotspots-carousel .swiper-button-next,
.ih-hotspots-carousel .swiper-button-prev {
	background-color: #fff !important;
	width: 50px !important;
	height: 50px !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
	z-index: 100;
}

.ih-hotspots-carousel .swiper-button-prev {
	left: 40px !important;
}

.ih-hotspots-carousel .swiper-button-next {
	right: 40px !important;
}

.ih-hotspots-carousel .swiper-button-next::after,
.ih-hotspots-carousel .swiper-button-prev::after {
	content: '' !important;
	width: 15px;
	height: 15px;
	border-top: 2px solid #000 !important;
	border-right: 2px solid #000 !important;
}

.ih-hotspots-carousel .swiper-button-next::after {
	transform: rotate(45deg);
	margin-left: -6px;
}

.ih-hotspots-carousel .swiper-button-prev::after {
	transform: rotate(-135deg);
	margin-right: -6px;
}

/* Desktop: vast kader (ratio via --ih-carousel-aspect-*) */
@media (min-width: 768px) {
	.ih-carousel-slider-frame {
		aspect-ratio: var(--ih-carousel-aspect-w, 16) / var(--ih-carousel-aspect-h, 7);
	}

	.ih-hotspots-carousel .swiper {
		height: 100% !important;
		position: absolute;
		top: 0;
		left: 0;
	}

	.ih-hotspots-carousel .swiper-slide {
		height: 100% !important;
		max-height: 100% !important;
		padding: var(--ih-carousel-slide-padding, 18px) 0 var(--ih-carousel-slide-padding, 18px) var(--ih-carousel-slide-padding, 18px);
		border-right: var(--ih-carousel-slide-padding, 18px) solid #ffffff;
	}

	/* Hero: gelijke slidebreedte, afbeelding vult (cover) */
	.ih-hotspots-carousel:not(.ih-hotspots-carousel--desktop-proportional) .swiper-slide > * {
		flex: 1;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		overflow: hidden;
	}

	.ih-hotspots-carousel:not(.ih-hotspots-carousel--desktop-proportional) .swiper-slide img {
		width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		display: block !important;
	}

	/* Proportioneel: vaste hoogte, breedte per verhouding (liggend breed, staand smal) */
	.ih-hotspots-carousel--desktop-proportional .swiper-slide {
		width: auto !important;
		flex-shrink: 0;
	}

	.ih-hotspots-carousel--desktop-proportional .swiper-slide > * {
		flex: 0 0 auto;
		display: block !important;
		width: auto !important;
		height: 100% !important;
		max-height: 100% !important;
		overflow: hidden;
	}

	.ih-hotspots-carousel--desktop-proportional .swiper-slide .ih-frontend-wrap {
		width: auto !important;
		max-width: none !important;
		height: 100% !important;
	}

	.ih-hotspots-carousel--desktop-proportional .swiper-slide img {
		width: auto !important;
		height: 100% !important;
		max-width: none !important;
		max-height: 100% !important;
		object-fit: contain !important;
		object-position: center !important;
		display: block !important;
		vertical-align: top;
	}
}

/* Mobiel: wit tussen plaatjes (zoals desktop border-right), geen kader rondom slider */
@media (max-width: 767px) {
	.ih-carousel-slider-frame {
		padding: 0;
		margin: 0;
		background: transparent;
	}

	.ih-hotspots-carousel .swiper {
		height: auto !important;
		position: relative;
		margin: 0;
		padding: 0;
		background: transparent;
	}

	/* Wit in ruimte tussen slides (spaceBetween); align-items voorkomt gelijke slide-hoogte */
	.ih-hotspots-carousel .swiper-wrapper {
		align-items: flex-start;
		background: #ffffff;
	}

	.ih-hotspots-carousel .swiper-slide {
		height: auto !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		background: transparent;
		box-sizing: border-box;
	}

	.ih-hotspots-carousel .swiper-slide > * {
		flex: 0 0 auto;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-height: var(--ih-carousel-mobile-max-height, min(72dvh, 820px));
		overflow: hidden;
	}

	.ih-hotspots-carousel--desktop-proportional .swiper-slide .ih-frontend-wrap {
		width: 100% !important;
		height: auto !important;
	}

	.ih-hotspots-carousel .swiper-slide img {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		object-fit: unset !important;
		object-position: center !important;
		display: block !important;
		vertical-align: top;
	}

	.ih-hotspots-carousel:not(.ih-hotspots-carousel--mobile-arrows) .swiper-button-next,
	.ih-hotspots-carousel:not(.ih-hotspots-carousel--mobile-arrows) .swiper-button-prev {
		display: none;
	}
}