/**
 * Colonnes Gutenberg — carrousel mobile (.carousel-on-mobile)
 */

.echm-columns-carousel {
	position: relative;
	width: 100%;
}

@media (max-width: 781px) {
	.echm-columns-carousel .wp-block-columns.carousel-on-mobile {
		display: flex !important;
		flex-flow: row nowrap !important;
		align-items: stretch !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		touch-action: pan-x;
	}

	.echm-columns-carousel .wp-block-columns.carousel-on-mobile::-webkit-scrollbar {
		display: none;
	}

	.echm-columns-carousel .wp-block-columns.carousel-on-mobile > .wp-block-column {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}

@media (min-width: 782px) {
	.echm-columns-carousel__dots {
		display: none !important;
	}
}

.echm-columns-carousel__dots {
	display: none;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	padding: 0;
}

@media (max-width: 781px) {
	.echm-columns-carousel__dots {
		display: flex;
	}
}

.echm-columns-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.echm-columns-carousel__dot.is-active,
.echm-columns-carousel__dot[aria-selected='true'] {
	background-color: #ffffff;
	transform: scale(1.15);
}

.echm-columns-carousel__dot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}