/*
 * Logo Slider widget — continuous marquee
 * ------------------------------------------------------------------
 * The track holds two identical groups. Each group is at least as wide
 * as the viewport, so sliding the track by -50% lands exactly on the
 * copy and the loop never shows a gap.
 *
 * Defaults match the design; the widget's Style tab overrides them.
 * ------------------------------------------------------------------
 */

.logos-sliders {
	--ls-duration: 45s;
	--ls-gap:      22px;
	--ls-card-w:   136px;
	--ls-card-h:   136px;
	--ls-fade:     120px;
	--ls-pad-y:    6px;

	position: relative;
	overflow: hidden;
	padding-block: var(--ls-pad-y);
}

.logos-sliders--fade {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ls-fade), #000 calc(100% - var(--ls-fade)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--ls-fade), #000 calc(100% - var(--ls-fade)), transparent 100%);
}

.logos-sliders .logos-sliders__track {
	display: flex;
	width: max-content;
	animation: logos-sliders-slide var(--ls-duration) linear infinite;
	will-change: transform;
}

.logos-sliders--reverse .logos-sliders__track {
	animation-direction: reverse;
}

.logos-sliders--pause:hover .logos-sliders__track {
	animation-play-state: paused;
}

/* A group is never narrower than the viewport, so few logos still loop cleanly. */
.logos-sliders .logos-sliders__group {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-around;
	gap: var(--ls-gap);
	min-width: 100vw; /* fallback; 100cqw (widget width) below where supported */
	margin: 0;
	padding: 0 var(--ls-gap) 0 0; /* same space at the seam as between logos */
	list-style: none;
}

@supports (container-type: inline-size) {
	.logos-sliders {
		container-type: inline-size;
	}

	.logos-sliders .logos-sliders__group {
		min-width: 100cqw;
	}
}

.logos-sliders .logos-sliders__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--ls-card-w);
	height: var(--ls-card-h);
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	border: 1px solid #e3e3e3;
	border-radius: 16px;
	background-color: #ffffff;
}

.logos-sliders .logos-sliders__item::before,
.logos-sliders .logos-sliders__item::marker {
	content: none;
}

.logos-sliders .logos-sliders__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 72%;
	max-height: 72px;
	object-fit: contain;
	user-select: none;
	transition: opacity 0.3s ease, filter 0.3s ease;
}

@keyframes logos-sliders-slide {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 767px) {
	.logos-sliders {
		--ls-gap:    14px;
		--ls-card-w: 104px;
		--ls-card-h: 104px;
		--ls-fade:   48px;
	}

	.logos-sliders .logos-sliders__img {
		max-height: 56px;
	}
}

/* Respect "reduce motion": stop the animation, allow manual scrolling. */
@media (prefers-reduced-motion: reduce) {
	.logos-sliders {
		overflow-x: auto;
	}

	.logos-sliders .logos-sliders__track {
		animation: none;
	}

	.logos-sliders .logos-sliders__group[aria-hidden="true"] {
		display: none;
	}
}

/* Editor placeholder when no logos are selected. */
.logos-sliders__empty {
	padding: 24px;
	border: 1px dashed #c9c9c9;
	border-radius: 8px;
	color: #777777;
	text-align: center;
}