/* ==========================================================================
   Sponsor Logo Carousel  — [ptac_sponsor_carousel]
   Pure CSS infinite scroll with graceful degradation.
   ========================================================================== */

/* --- Section wrapper ---------------------------------------------------- */
.ptac-sponsor-carousel {
	--_gap: 3rem;
	--_logo-h: 80px;

	overflow: hidden;
	padding: 2.5rem 0;
	text-align: center;
}

/* --- Heading ------------------------------------------------------------ */
.ptac-sc__heading {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	margin: 0 0 1.5rem;
	color: var(--ptac-sg-heading-color, inherit);
}

/* --- Track wrapper masks the overflow ----------------------------------- */
.ptac-sc__track-wrapper {
	position: relative;
	overflow: hidden;
	/* Soft fade at edges */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
}

/* --- Track (the moving strip) ------------------------------------------- */
.ptac-sc__track {
	display: flex;
	gap: var(--_gap);
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	/* When not animated, centre the logos */
	justify-content: center;
	flex-wrap: wrap;
}

/* Animated variant — infinite horizontal scroll */
.ptac-sc__track--animated {
	flex-wrap: nowrap;
	justify-content: flex-start;
	/* Total width = (count * item-width) * 2  — but we let flex handle it.
	   The animation shifts by exactly half (the first set of logos). */
	animation: ptac-sc-scroll var(--ptac-sc-speed, 30s) linear infinite;
	will-change: transform;
}

/* Pause on hover / focus for accessibility */
.ptac-sc__track--animated:hover,
.ptac-sc__track--animated:focus-within {
	animation-play-state: paused;
}

/* --- Individual slide --------------------------------------------------- */
.ptac-sc__slide {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
}

.ptac-sc__slide img {
	display: block;
	max-height: var(--_logo-h);
	width: auto;
	max-width: 180px;
	object-fit: contain;
	/* Subtle desaturation so logos don't compete with event content */
	filter: grayscale(40%);
	opacity: 0.85;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.ptac-sc__slide img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/* --- Keyframes ---------------------------------------------------------- */
@keyframes ptac-sc-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		/* Shift by exactly half the track (the first copy of logos) */
		transform: translateX(calc(-50% - var(--_gap) / 2));
	}
}

/* --- Reduced motion preference ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.ptac-sc__track--animated {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Hide the duplicate set when not animating */
	.ptac-sc__slide--dup {
		display: none;
	}
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 768px) {
	.ptac-sponsor-carousel {
		--_logo-h: 56px;
		--_gap: 2rem;
		padding: 1.5rem 0;
	}

	.ptac-sc__slide img {
		max-width: 120px;
	}
}

/* --- Single-logo fallback (no animation) -------------------------------- */
.ptac-sc__track:not(.ptac-sc__track--animated) {
	justify-content: center;
}

.ptac-sc__track:not(.ptac-sc__track--animated) .ptac-sc__slide img {
	filter: none;
	opacity: 1;
}