/*
 * TOPOSEL Home – reusable carousel layout.
 * Scoped under .tsl-home; loaded ONLY on the approved test page.
 * Each section sets --tsl-per-view (slides visible at once) for its screen sizes.
 */

.tsl-home .tsl-carousel {
	--tsl-per-view: 1;

	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
}

.tsl-home .tsl-carousel__viewport {
	overflow: hidden;
}

.tsl-home .tsl-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.5s ease;
	will-change: transform;
}

/* Used by carousel.js to reposition instantly between moves. */
.tsl-home .tsl-carousel__track--jump {
	transition: none;
}

.tsl-home .tsl-carousel__slide {
	display: flex;
	flex: 0 0 calc(100% / var(--tsl-per-view));
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0 12px;
}

.tsl-home .tsl-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
}

/* Arrows only work with JavaScript, and are hidden when every slide already fits. */
.tsl-home .tsl-carousel:not(.tsl-carousel--ready) .tsl-carousel__btn,
.tsl-home .tsl-carousel--static .tsl-carousel__btn {
	visibility: hidden;
}

/* Fewer slides than fit: keep them centred instead of bunched at the left. */
.tsl-home .tsl-carousel--static:not(.tsl-carousel--scroll) .tsl-carousel__track {
	justify-content: center;
}

/* Flow mode (logo bands): no arrows, no slide transition, soft edges where the logos glide in and out. */
.tsl-home .tsl-carousel--flow {
	grid-template-columns: minmax(0, 1fr);
}

.tsl-home .tsl-carousel--flow .tsl-carousel__btn {
	display: none;
}

.tsl-home .tsl-carousel--flow .tsl-carousel__track {
	transition: none;
}

.tsl-home .tsl-carousel--flow .tsl-carousel__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
	.tsl-home .tsl-carousel__track {
		transition: none;
	}
}