/* Home "Services" cards -> carousel. Card design untouched; only the row becomes a slider. */
.e-home-cards.is-carousel {
	--sc-gap: 24px;
	--sc-per-view: 4;
	flex-wrap: nowrap !important;
	align-items: flex-start !important; /* keep every card at its own height, as in the grid */
	gap: var(--sc-gap) !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.e-home-cards.is-carousel::-webkit-scrollbar { display: none; }

.e-home-cards.is-carousel > .e-card {
	flex: 0 0 calc((100% - (var(--sc-per-view) - 1) * var(--sc-gap)) / var(--sc-per-view)) !important;
	max-width: none !important;
	width: auto !important;
	align-self: flex-start !important; /* first card has "stretch" set in Elementor */
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.e-home-cards.is-carousel { --sc-per-view: 2; }
}
@media (max-width: 767px) {
	.e-home-cards.is-carousel { --sc-gap: 16px; --sc-per-view: 1.15; } /* peek of next card hints swipe */
}

/* Controls */
.sc-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	margin-top: 4px;
}
.sc-nav[hidden] { display: none; }
.sc-btn {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #6fae3b;
	border-radius: 50%;
	background: #fff;
	color: #6fae3b;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s, color .2s;
}
.sc-btn:hover,
.sc-btn:focus-visible { background: #6fae3b; color: #fff; outline: none; }
.sc-btn svg { width: 18px; height: 18px; }
.sc-dots { display: flex; gap: 8px; }
.sc-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #cfd8c6;
	cursor: pointer;
	transition: width .25s, background-color .25s;
}
.sc-dot.is-active { width: 22px; background: #6fae3b; }

@media (prefers-reduced-motion: reduce) {
	.e-home-cards.is-carousel { scroll-behavior: auto; }
}
