/* ──────────────────────────────────────────────
 * Carousel chrome — shared by all carousel subclasses.
 * ────────────────────────────────────────────── */

.da-carousel {
	padding: 40px 0;
}

.da-carousel__heading {
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: center;
	margin: 0 0 32px;
}

.da-carousel__viewport {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	align-items: center;
	touch-action: manipulation;
}

.da-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 60px;
	border: 0;
	background: var(--da-color-primary, #403b86);
	color: #ffffff;
	cursor: pointer;
	touch-action: manipulation;
}

.da-carousel__arrow:disabled {
	opacity: 0.45;
	cursor: default;
}

.da-carousel__track {
	--_carousel-gap: 24px;
	--_carousel-cols: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--_carousel-gap) * (var(--_carousel-cols) - 1)) / var(--_carousel-cols));
	gap: var(--_carousel-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 4px 0;
	touch-action: pan-x;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.da-carousel__track::-webkit-scrollbar {
	display: none;
}

.da-carousel__card {
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid var(--da-color-border, rgba(255, 255, 255, 0.7));
}

@media (min-width: 768px) {
	.da-carousel__track {
		--_carousel-cols: 2;
	}

	.da-carousel__card {
		min-height: 100%;
	}
}

@media (min-width: 1024px) {
	.da-carousel__track {
		--_carousel-cols: 3;
	}
}