/* ── LOGO CAROUSEL ─────────────────────────────────────── */

.logo-carousel {
	padding: 72px 0;
	overflow: hidden;
}

.logo-carousel--dark  { background: var(--black); }
.logo-carousel--light { background: var(--off-white); }

/* ── Optional header ─────────────────────────────────── */

.logo-carousel__header {
	text-align: center;
	padding: 0 var(--page-px) 48px;
}

.logo-carousel__header .label-sm {
	margin-bottom: 10px;
}

.logo-carousel__header .section-heading {
	margin: 0;
}

/* ── Viewport: clips overflow + edge fades ───────────── */

.logo-carousel__viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 10%,
		black 90%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 10%,
		black 90%,
		transparent 100%
	);
}

/* ── Scrolling track ─────────────────────────────────── */

.logo-carousel__track {
	display: flex;
	width: max-content;
	animation: lc-scroll var(--lc-duration, 30s) linear infinite;
	will-change: transform;
}

/* Pause on hover */
.logo-carousel__viewport:hover .logo-carousel__track {
	animation-play-state: paused;
}

@keyframes lc-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── Individual logo items ───────────────────────────── */

.logo-carousel__item {
	flex: 0 0 calc(100vw / var(--lc-per-view, 6));
	max-width: calc(100vw / var(--lc-per-view, 6));
	/* Height scales with item width so fewer logos = taller logos */
	height: clamp(56px, calc(100vw / var(--lc-per-view, 6) * 0.38), 110px);
	padding: 0 clamp(20px, 3vw, 52px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-carousel__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: filter 0.35s ease, opacity 0.35s ease;
}

/* Dark mode: white-ish logos, desaturated */
.logo-carousel--dark .logo-carousel__item img {
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.55;
}

/* Light mode: dark logos, desaturated */
.logo-carousel--light .logo-carousel__item img {
	filter: grayscale(1) brightness(0);
	opacity: 0.45;
}

/* Reveal full color on track hover */
.logo-carousel__viewport:hover .logo-carousel__item img {
	filter: none;
	opacity: 1;
}

/* ── Reduced motion ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.logo-carousel__track {
		animation: none;
	}

	.logo-carousel__viewport {
		-webkit-mask-image: none;
		mask-image: none;
		overflow-x: auto;
	}

	.logo-carousel__track {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px 0;
	}
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 1023px) {
	.logo-carousel {
		padding: 56px 0;
	}

	.logo-carousel__header {
		padding-bottom: 36px;
	}

	/* Cap per-view at 4 on tablet */
	.logo-carousel__item {
		flex: 0 0 calc(100vw / 4);
		max-width: calc(100vw / 4);
		height: clamp(48px, calc(100vw / 4 * 0.38), 100px);
	}
}

@media (max-width: 599px) {
	.logo-carousel {
		padding: 48px 0;
	}

	.logo-carousel__header {
		padding: 0 20px 28px;
		text-align: left;
	}

	/* Cap per-view at 3 on mobile */
	.logo-carousel__item {
		flex: 0 0 calc(100vw / 3);
		max-width: calc(100vw / 3);
		height: clamp(44px, calc(100vw / 3 * 0.38), 80px);
	}
}