/* Logo Marquee Widget - base styles */

.lmw-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* ---------- shared logo item ---------- */
.lmw-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lmw-logo-item a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lmw-logo-item img {
	display: block;
	max-width: 100%;
	object-fit: contain;
	transition: opacity 0.25s ease, filter 0.25s ease;
}

.lmw-grayscale .lmw-logo-item img {
	filter: grayscale(100%);
}

.lmw-grayscale .lmw-logo-item:hover img {
	filter: grayscale(0%);
}

/* ---------- desktop / tablet grid ---------- */
.lmw-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 40px;
	align-items: center;
	justify-items: center;
}

.lmw-marquee {
	display: none;
	overflow: hidden;
}

/* ---------- mobile marquee (default fallback breakpoint, overridden by JS per-instance) ---------- */
@media (max-width: 767px) {
	.lmw-grid {
		display: none;
	}

	.lmw-marquee {
		display: flex;
		position: relative;
		width: 100%;
	}
}

/* Explicit state classes set by JS - take priority so custom per-widget
   breakpoints (not just the 767px default) work correctly. */
.lmw-wrapper.lmw-is-mobile .lmw-grid {
	display: none !important;
}

.lmw-wrapper.lmw-is-mobile .lmw-marquee {
	display: flex !important;
}

.lmw-wrapper.lmw-is-desktop .lmw-grid {
	display: grid !important;
}

.lmw-wrapper.lmw-is-desktop .lmw-marquee {
	display: none !important;
}

/* Two flush, non-wrapping tracks placed side by side create the illusion
   of an infinite loop: when track 1 scrolls fully out, track 2 is already
   in its place, and the animation resets invisibly. */
.lmw-marquee {
	flex-wrap: nowrap;
	align-items: center;
}

.lmw-marquee-track {
	display: flex;
	align-items: center;
	gap: 60px;
	flex-shrink: 0;
	width: max-content;
	padding-right: 60px;
	animation: lmw-scroll var(--lmw-speed, 25s) linear infinite;
	animation-direction: var(--lmw-direction, normal);
	will-change: transform;
}

.lmw-marquee[data-paused="true"] .lmw-marquee-track {
	animation-play-state: paused;
}

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

/* Edge fade mask on marquee */
.lmw-fade-edges .lmw-marquee {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.lmw-marquee-track {
		animation: none;
	}
}