/* Shared generic carousel. Structure + dots; item sizing is defined by
	each section that uses it. */

.cmath-carousel {
	position: relative;
}

.cmath-carousel__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.cmath-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.cmath-carousel__viewport.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

.cmath-carousel__track {
	display: flex;
	gap: var(--grid-gutter);
}

.cmath-carousel__track > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Dots: same structure/style as blog and services carousels (SVG). */
.cmath-carousel__dots {
	display: flex;
	gap: var(--space-75);
	justify-content: center;
	margin-top: var(--space-200);
}

.cmath-carousel__dot {
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: transparent center / contain no-repeat url("../img/dot-inactive.svg");
}

.cmath-carousel__dot.is-active {
	width: 18px;
	height: 19px;
	background-image: url("../img/dot-active.svg");
}

/* Elementor container as carousel only on mobile (cmath-mobile-carousel class
	in the container Advanced tab). Desktop remains unchanged: no overflow, dots
	hide automatically. !important overrides e-con inline layout. */
@media (max-width: 768px) {
	.cmath-mobile-carousel {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cmath-mobile-carousel::-webkit-scrollbar {
		display: none;
	}

	.cmath-mobile-carousel > * {
		/* 86% so the next slide peeks on the right (site card pattern). */
		flex: 0 0 86% !important;
		max-width: 86% !important;
		scroll-snap-align: start;
	}

	.cmath-mobile-carousel.is-dragging {
		scroll-snap-type: none;
		scroll-behavior: auto;
		cursor: grabbing;
		user-select: none;
	}
}