/*
 * Logo Ticker block (blocks/logo-ticker/logo-ticker.php + js/logo-ticker.js).
 * Full-width row of logos on the page background, moving slowly right to left.
 * The track holds the logo run twice and moves by exactly half its width, so it loops
 * seamlessly. Slots use padding, not gap, so both halves are exactly the same width.
 * Plain CSS, no build step.
 */

.logo-ticker {
	--logo-ticker-purple: var(--wp--preset--color--purple, #322173);
	--logo-ticker-slot: 10rem;     /* logo box width: also the max width, so wide logos (ACES) don't grow */
	--logo-ticker-height: 5.75rem; /* logo box height (92px): squarer logos can be taller */
	--logo-ticker-space: 2rem;    /* each side of a logo */
	padding: clamp(2.5rem, 5vw, 4rem) 0 0;
}

.logo-ticker__title {
	max-width: var(--wp--style--global--content-size, 1180px);
	margin: 0 auto 2rem;
	padding: 0 1rem;
	font-family: "GillSansNova-Medium", sans-serif;
	font-weight: normal; /* Medium is its own family; the h2 weight would be synthesised */
	font-size: var(--wp--preset--font-size--large, 1.75rem);
	text-align: center;
	text-wrap: balance;
}

/* Logos fade in and out at the screen edges; a mask works on any background. */
.logo-ticker__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-ticker__track {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: logo-ticker-scroll var(--logo-ticker-duration, 60s) linear infinite;
}

.logo-ticker__viewport:hover .logo-ticker__track,
.logo-ticker.is-paused .logo-ticker__track {
	animation-play-state: paused;
}

.logo-ticker__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	width: var(--logo-ticker-slot);
	height: var(--logo-ticker-height);
	margin: 0;
	padding: 0 var(--logo-ticker-space);
}

/* (0,2,0) beats the theme's img rules. Logos keep their shape inside the slot. */
.logo-ticker .logo-ticker__logo {
	display: block;
	width: auto;
	height: auto;
	/* --logo-scale (per logo, from its "Logo Ticker size" field) shrinks logos that look too big. */
	max-width: calc(100% * var(--logo-scale, 1));
	max-height: calc(100% * var(--logo-scale, 1));
	object-fit: contain;
}

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

/* Pause/Play: purple outline pill (icon + uppercase label), centred under the logos. */
.logo-ticker__controls {
	display: flex;
	justify-content: center;
	max-width: var(--wp--style--global--content-size, 1180px);
	margin: 2rem auto 0;
	padding: 0 1rem;
}

.logo-ticker__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	height: 2.25rem;
	padding: 0 1rem 0 0.75rem;
	border: 1px solid var(--logo-ticker-purple);
	border-radius: 999px;
	font-family: "GillSansNova-SemiBold", sans-serif;
	font-weight: normal; /* SemiBold is its own family; button weight would be synthesised */
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	background: transparent;
	color: var(--logo-ticker-purple);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.logo-ticker__toggle[hidden] {
	display: none;
}

.logo-ticker__toggle:hover,
.logo-ticker__toggle:focus-visible {
	background: var(--logo-ticker-purple);
	color: #fff;
}

.logo-ticker__toggle:focus:not(:focus-visible) {
	outline: none;
}

.logo-ticker__toggle:focus-visible {
	outline: 2px solid var(--logo-ticker-purple);
	outline-offset: 2px;
}

.logo-ticker__icon {
	display: block;
	width: 1rem;
	height: 1rem;
}

.logo-ticker.is-paused .logo-ticker__icon--pause,
.logo-ticker:not(.is-paused) .logo-ticker__icon--play {
	display: none;
}

.logo-ticker__empty {
	padding: 2rem 1rem;
	border: 1px dashed #86888C;
	text-align: center;
}

@media (max-width: 767.98px) {
	.logo-ticker {
		--logo-ticker-slot: 7.5rem;
		--logo-ticker-height: 3.5rem;
		--logo-ticker-space: 1.25rem;
	}

	.logo-ticker__viewport {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	}
}

/* No movement: one copy of the logos as a static, centred, wrapping grid. */
@media (prefers-reduced-motion: reduce) {
	.logo-ticker__viewport {
		max-width: var(--wp--style--global--content-size, 1180px);
		margin: 0 auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.logo-ticker__track {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 1.5rem;
		width: auto;
		animation: none;
	}

	.logo-ticker__item[aria-hidden="true"],
	.logo-ticker__controls {
		display: none;
	}
}