/* Logo Marquee – frontend */

.lm-marquee {
	--lm-w: 160px;
	--lm-h: 80px;
	--lm-gap: 56px;
	--lm-scale: 1.1;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

/* Vertical padding leaves room for the hover pop-out so it isn't clipped. */
.lm-marquee .lm-viewport {
	overflow: hidden;
	box-sizing: border-box;
	padding-block: calc(var(--lm-h) * (var(--lm-scale) - 1) / 2 + 14px);
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

/* No JS: fall back to a plain scrollable row. */
.lm-marquee:not(.is-ready) .lm-viewport {
	overflow-x: auto;
}

.lm-marquee .lm-viewport.is-dragging {
	cursor: grabbing;
}

.lm-marquee.lm-fade .lm-viewport {
	-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%);
}

.lm-marquee .lm-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
}

/* Reset theme list styles. */
.lm-marquee .lm-set {
	display: flex;
	flex: none;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lm-marquee .lm-item {
	flex: none;
	width: var(--lm-w);
	height: var(--lm-h);
	margin: 0 var(--lm-gap) 0 0;
	padding: 0;
	list-style: none;
}

.lm-marquee .lm-item::before,
.lm-marquee .lm-item::marker {
	content: none;
}

.lm-marquee .lm-logo {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	box-shadow: none;
	border: 0;
	outline-offset: 4px;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Every logo is fitted into the same box; spare room becomes whitespace. */
.lm-marquee .lm-item img.lm-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	object-position: center;
	-webkit-user-drag: none;
	pointer-events: none;
	transition: filter 0.35s ease, opacity 0.35s ease;
}

/* Black & white by default. */
.lm-marquee.lm-grayscale .lm-item img.lm-img {
	filter: grayscale(1) drop-shadow(0 0 0 transparent);
	opacity: 0.65;
}

@media (hover: hover) {
	.lm-marquee .lm-item:hover .lm-logo {
		z-index: 2;
		transform: scale(var(--lm-scale));
	}

	.lm-marquee .lm-item:hover img.lm-img {
		filter: grayscale(0) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.16));
		opacity: 1;
	}

	.lm-marquee .lm-viewport.is-dragging .lm-item:hover .lm-logo {
		transform: none;
	}
}

/* Keyboard focus mirrors hover. */
.lm-marquee .lm-logo:focus-visible {
	z-index: 2;
	transform: scale(var(--lm-scale));
}

.lm-marquee .lm-logo:focus-visible img.lm-img {
	filter: grayscale(0);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.lm-marquee .lm-logo,
	.lm-marquee .lm-item img.lm-img {
		transition: none;
	}
}