/*
 * Striscia loghi (widget fm-marangoni-loghi).
 *
 * Ogni logo e' una maschera riempita col colore scelto in Elementor: cosi'
 * loghi di marchi diversi diventano tutti dello stesso colore su qualunque
 * fondo. Le variabili --fm-logo-* le scrivono i controlli del widget.
 */
.fm-nastro {
	--fm-logo-colore: rgba(244, 241, 233, 0.45);
	--fm-logo-sopra: #f4f1e9;
	--fm-logo-h: 56px;
	--fm-logo-w: 170px;
	--fm-logo-gap: 64px;
	--fm-nastro-durata: 60s;
	overflow: hidden;
	width: 100%;
}

.fm-nastro--sfuma {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.fm-nastro__traccia {
	display: flex;
	width: max-content;
	animation: fm-nastro var(--fm-nastro-durata) linear infinite;
}

.fm-nastro--ferma:hover .fm-nastro__traccia {
	animation-play-state: paused;
}

.fm-nastro__fila {
	display: flex;
	align-items: center;
	gap: var(--fm-logo-gap);
	margin: 0;
	padding: 0 calc(var(--fm-logo-gap) / 2);
	list-style: none;
}

.fm-nastro__logo {
	flex: 0 0 auto;
	width: min(var(--fm-logo-w), calc(var(--fm-logo-h) * var(--fm-fw, 1.5)));
	height: min(var(--fm-logo-h), calc(var(--fm-logo-h) * var(--fm-fh, 1)));
	margin: 0;
	background-color: var(--fm-logo-colore);
	-webkit-mask: var(--fm-logo) center / contain no-repeat;
	mask: var(--fm-logo) center / contain no-repeat;
	transition: background-color 0.3s ease;
}

.fm-nastro__logo:hover {
	background-color: var(--fm-logo-sopra);
}

@keyframes fm-nastro {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fm-nastro__traccia {
		width: 100%;
		animation: none;
	}

	.fm-nastro__fila {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 24px;
	}

	.fm-nastro__fila[aria-hidden="true"] {
		display: none;
	}
}

/*
 * In una riga accanto a un titolo («Ho lavorato con») il widget con «Cresci»
 * di Elementor (flex 1 0 auto) prendeva il 100% della riga senza restringersi:
 * fra 768 e 1024 px la pagina scorreva di lato. Qui puo' sempre restringersi.
 */
.elementor-widget-fm-marangoni-loghi {
	flex-shrink: 1 !important;
	flex-basis: 0 !important;
	min-width: 0;
}