/*
 * Icons Text Carousel block (Swiper version).
 * Slides per view are handled by Swiper (see shared/assets/js/icons-text-carousel.js):
 * 3 from 1100px, 2 from 769px, 1 below.
 */

.icons-text-carousel {
	display: flex;
	align-items: center;
	gap: 10px;
}

.icons-text-carousel .swiper {
	flex: 1;
	min-width: 0;
}

.icons-text-carousel .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
}

.icons-text-carousel .descriptionWrp {
	color: black;
	text-align: center;
	width: 85%;
	max-width: 340px;
}

.dark-bg .icons-text-carousel .descriptionWrp {
	color: white;
}

.icons-text-carousel .descriptionWrp img {
	width: 60px;
	height: 60px;
}

.icons-text-carousel .textDescriptionWrp span.textTitle {
	margin-top: 15px;
}

.icons-text-carousel .textDescriptionWrp span.textBody {
	display: flex;
	align-items: normal;
	min-height: 130px;
}

/* Navigation buttons — same styling as the other theme carousels */
.icons-text-carousel .carouselLeftBtn.ds-c-button--icon.ds-c-button--sr-only,
.icons-text-carousel .carouselRightBtn.ds-c-button--icon.ds-c-button--sr-only {
	width: 42px;
	height: 42px;
	background-color: var(--ds-color-alias-cta-scheme-brand-1-secondary-default-border);
	color: white;
}

.icons-text-carousel .swiper-button-disabled {
	opacity: 0.5;
	pointer-events: none;
}

@media (max-width: 1100px) {
	.icons-text-carousel .descriptionWrp {
		max-width: 270px;
	}
}

@media (max-width: 768px) {
	/* Buttons move from the sides to the bottom right, as before */
	.icons-text-carousel {
		display: block;
		position: relative;
		padding-bottom: 62px;
	}
	.icons-text-carousel .carouselLeftBtn.ds-c-button--icon.ds-c-button--sr-only,
	.icons-text-carousel .carouselRightBtn.ds-c-button--icon.ds-c-button--sr-only {
		position: absolute;
		bottom: 0;
		right: 10px;
	}
	.icons-text-carousel .carouselLeftBtn.ds-c-button--icon.ds-c-button--sr-only {
		right: 60px;
	}
	.icons-text-carousel .descriptionWrp {
		margin-bottom: 20px;
	}
}