/* ── Logo Marquee Gallery – Frontend ─────────────────────────────────── */

.lmg-wrapper {
	--lmg-speed:  35s;
	--lmg-height: 60px;
	--lmg-gap:    70px;
	--lmg-pad:    28px;

	overflow: hidden;
	width: 100%;
	padding: var(--lmg-pad) 0;
	position: relative;
	box-sizing: border-box;

	/* Soft fade at both edges so the scroll looks infinite */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 7%,
		#000 93%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 7%,
		#000 93%,
		transparent 100%
	);
}

/* ── Rows ──────────────────────────────────────────────────────────────── */

.lmg-row {
	overflow: hidden;
	padding: 8px 0;
}

.lmg-row + .lmg-row {
	margin-top: 4px;
}

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

.lmg-track {
	display: flex;
	align-items: center;
	gap: var(--lmg-gap);
	width: max-content;
	will-change: transform;
}

.lmg-track.lmg-forward {
	animation: lmg-fwd var(--lmg-speed) linear infinite;
}

.lmg-track.lmg-reverse {
	animation: lmg-rev var(--lmg-speed) linear infinite;
}

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

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

/* Pause the whole row on hover so the user can focus on a logo */
.lmg-row:hover .lmg-track {
	animation-play-state: paused;
}

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

.lmg-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lmg-item img {
	height: var(--lmg-height);
	width: auto;
	max-width: 200px;
	object-fit: contain;
	display: block;

	/* Greyed-out by default */
	filter: grayscale(1);
	opacity: 0.45;
	transition: filter 0.35s ease, opacity 0.35s ease;
}

/* Full colour + full opacity on hover */
.lmg-item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

.lmg-item a {
	display: block;
	line-height: 0;
	outline: none;
	text-decoration: none;
}

.lmg-item a img {
	cursor: pointer;
}

/* ── Accessibility: respect reduced-motion preference ─────────────────── */

@media (prefers-reduced-motion: reduce) {
	.lmg-track {
		animation: none !important;
	}
}