/**
 * Logo Marquee — infinite horizontal scrolling bar of logos or text.
 * Per-instance values arrive as CSS custom properties on .logo-marquee.
 */

.logo-marquee {
	--lm-bg: transparent;
	--lm-height: 46px;
	--lm-gap: 48px;
	--lm-speed: 34s;
	--lm-pad: 32px;

	background: var(--lm-bg);
	width: 100%;
	overflow: hidden;
	padding: var(--lm-pad) 0;
	position: relative;
}

.logo-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: logo-marquee-scroll var(--lm-speed) linear infinite;
}

/* Half wrappers do not affect layout — the cells become the flex items. */
.logo-marquee__half {
	display: contents;
}

.logo-marquee--reverse .logo-marquee__track {
	animation-direction: reverse;
}

.logo-marquee--pausable:hover .logo-marquee__track {
	animation-play-state: paused;
}

/*
 * UX Builder preview: hold the track still so the element is easy to select
 * and position. Background, sizing, spacing and recoloring all still apply,
 * so the preview reads like the real bar minus the motion.
 */
.logo-marquee--static .logo-marquee__track {
	animation: none;
	transform: none;
}

/* --- Image logos --------------------------------------------------------- */

/*
 * Uniform trailing margin on every cell keeps the two halves perfectly
 * periodic, so translateX(-50%) lands exactly one half over — seamless.
 */
.logo-marquee__logo {
	height: var(--lm-height);
	width: auto;
	margin: 0 var(--lm-gap) 0 0;
	flex: 0 0 auto;
	max-width: none;
}

.logo-marquee--white .logo-marquee__logo {
	filter: brightness(0) invert(1);
}

.logo-marquee--black .logo-marquee__logo {
	filter: brightness(0);
}

/* --- Scrolling text ------------------------------------------------------ */

.logo-marquee__text {
	font-size: var(--lm-height);
	line-height: 1;
	white-space: nowrap;
	font-weight: 600;
	margin: 0 var(--lm-gap) 0 0;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

.logo-marquee__text::after {
	content: var(--lm-sep, "\2022");
	margin-left: var(--lm-gap);
	opacity: 0.5;
	font-weight: 400;
}

.logo-marquee--nosep .logo-marquee__text::after {
	content: none;
	margin: 0;
}

.logo-marquee--text.logo-marquee--white .logo-marquee__text {
	color: #fff;
}

.logo-marquee--text.logo-marquee--black .logo-marquee__text {
	color: #000;
}

/* "original" inherits the theme's text color — no rule needed. */

/*
 * An explicit text color wins over the White/Black setting. Listed last and
 * matched with equal specificity so it always takes precedence.
 */
.logo-marquee--text.logo-marquee--textcolor .logo-marquee__text {
	color: var(--lm-text);
}

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

@media (max-width: 849px) {
	.logo-marquee__logo {
		height: calc(var(--lm-height) * 0.7);
		margin-right: calc(var(--lm-gap) * 0.6);
	}

	.logo-marquee__text {
		font-size: calc(var(--lm-height) * 0.7);
		margin-right: calc(var(--lm-gap) * 0.6);
	}

	.logo-marquee__text::after {
		margin-left: calc(var(--lm-gap) * 0.6);
	}

	.logo-marquee {
		padding: calc(var(--lm-pad) * 0.7) 0;
	}
}

/* Static, wrapped, centred layout when motion is not wanted. */
@media (prefers-reduced-motion: reduce) {
	.logo-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
		gap: 24px var(--lm-gap);
	}

	.logo-marquee__logo,
	.logo-marquee__text {
		margin-right: 0;
	}

	/* The duplicate half is redundant without motion. */
	.logo-marquee__half:nth-child(2) {
		display: none;
	}
}