/* Services — dual marquee sliders (3 visible per row) */

.bs-services-sliders {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 8px;
	overflow: hidden;
}

.bs-services-marquee {
	overflow: hidden;
	width: 100%;
	cursor: default;
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 6%,
		#000 94%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 6%,
		#000 94%,
		transparent 100%
	);
}

.bs-services-track {
	display: flex;
	gap: 20px;
	width: max-content;
	will-change: transform;
}

.bs-services-marquee .bs-service-card {
	flex: 0 0 clamp(260px, 30vw, 380px);
	width: clamp(260px, 30vw, 380px);
	min-width: 0;
	max-width: 400px;
}

/* Row 1 — moves right */
.bs-services-marquee--right .bs-services-track {
	animation: bs-services-marquee-right 42s linear infinite;
}

/* Row 2 — moves left */
.bs-services-marquee--left .bs-services-track {
	animation: bs-services-marquee-left 42s linear infinite;
}

@keyframes bs-services-marquee-right {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes bs-services-marquee-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.bs-services-marquee:hover .bs-services-track,
.bs-services-marquee.is-paused .bs-services-track {
	animation-play-state: paused;
}

/* User-scrollable row (drag / swipe + optional auto-scroll via JS) */
.bs-services-marquee.is-scroll-driven {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: auto;
	cursor: grab;
	touch-action: auto;
	overscroll-behavior-x: contain;
	overscroll-behavior-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.bs-services-marquee.is-scroll-driven::-webkit-scrollbar {
	display: none;
	height: 0;
}

.bs-services-marquee.is-scroll-driven.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.bs-services-marquee.is-scroll-driven .bs-services-track {
	animation: none !important;
	transform: none !important;
}

.bs-services-marquee.is-scroll-driven .bs-service-card {
	scroll-snap-align: none;
}

.bs-services-marquee.is-scroll-driven.is-paused {
	/* auto-scroll paused; user can still drag */
}

/* Icon accents */
.bs-service-card--accent-black .bs-service-icon { background: var(--bs-black, #121317); color: #fff; }
.bs-service-card--accent-blue .bs-service-icon { background: var(--bs-blue, #3772ff); color: #fff; }
.bs-service-card--accent-yellow .bs-service-icon { background: var(--bs-yellow, #f4b10b); color: var(--bs-black, #121317); }
.bs-service-card--accent-red .bs-service-icon { background: var(--bs-red, #ff0000); color: #fff; }
.bs-service-card--accent-dark .bs-service-icon { background: #121317; color: #fff; }

@media (max-width: 960px) {
	.bs-services-marquee .bs-service-card {
		flex: 0 0 min(280px, 85vw);
		width: min(280px, 85vw);
		min-width: 0;
	}
}

@media (max-width: 640px) {
	.bs-services-marquee .bs-service-card {
		flex: 0 0 min(260px, 88vw);
		width: min(260px, 88vw);
		min-width: 0;
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bs-services-track {
		animation: none !important;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}
	.bs-services-marquee {
		mask-image: none;
		-webkit-mask-image: none;
		overflow: visible;
	}
	.bs-services-marquee .bs-service-card {
		flex: 1 1 280px;
		width: auto;
		max-width: 400px;
	}
}