/**
 * NS Logo Carousel — stile frontend (CSS-only, nessun JS di animazione).
 */

.ns-logo-carousel {
	max-width: var(--ns-lc-width, 100%);
	margin-inline: auto;
}

.ns-logo-carousel__viewport {
	overflow: hidden;
	width: 100%;
	/* Riserva spazio verticale così il carosello non collassa a 0
	   prima che i loghi (loading=lazy) siano caricati. */
	min-height: var(--ns-lc-logo-max-height, 80px);
}

/* Sfumatura ai lati (fade edges) tramite mask CSS: dissolve verso trasparente. */
.ns-logo-carousel[data-fade="1"] .ns-logo-carousel__viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--ns-lc-fade-width, 64px),
		#000 calc(100% - var(--ns-lc-fade-width, 64px)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--ns-lc-fade-width, 64px),
		#000 calc(100% - var(--ns-lc-fade-width, 64px)),
		transparent 100%
	);
}

.ns-logo-carousel__track {
	display: flex;
	align-items: center;
	gap: var(--ns-lc-gap, 48px);
	width: max-content;
	animation-name: ns-lc-scroll;
	animation-duration: var(--ns-lc-speed, 30s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}

.ns-logo-carousel[data-direction="right"] .ns-logo-carousel__track {
	animation-direction: reverse;
}

.ns-logo-carousel[data-pause-on-hover="1"]:hover .ns-logo-carousel__track {
	animation-play-state: paused;
}

.ns-logo-carousel__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.ns-logo-carousel__item a {
	display: block;
	line-height: 0;
}

.ns-logo-carousel__item img,
.ns-logo-carousel__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 220px;
	max-height: var(--ns-lc-logo-max-height, 80px);
	object-fit: contain;
}

@keyframes ns-lc-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* --- Temi --- */
.ns-logo-carousel--theme-dark {
	background: #1a1a1a;
	padding-block: 1.5rem;
}

.ns-logo-carousel--theme-dark .ns-logo-carousel__img {
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.ns-logo-carousel--theme-light {
	background: #ffffff;
	padding-block: 1.5rem;
}

.ns-logo-carousel--theme-light .ns-logo-carousel__img {
	opacity: 0.85;
}

.ns-logo-carousel--theme-light .ns-logo-carousel__img:hover,
.ns-logo-carousel--theme-dark .ns-logo-carousel__img:hover {
	opacity: 1;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.ns-logo-carousel__viewport {
		min-height: var(--ns-lc-logo-max-height-tablet, var(--ns-lc-logo-max-height, 64px));
	}
	.ns-logo-carousel__track {
		gap: var(--ns-lc-gap-tablet, var(--ns-lc-gap, 32px));
		animation-duration: var(--ns-lc-speed-tablet, var(--ns-lc-speed, 28s));
	}
	.ns-logo-carousel__item img,
	.ns-logo-carousel__img {
		max-height: var(--ns-lc-logo-max-height-tablet, var(--ns-lc-logo-max-height, 64px));
	}
}

@media (max-width: 767px) {
	.ns-logo-carousel__viewport {
		min-height: var(--ns-lc-logo-max-height-mobile, var(--ns-lc-logo-max-height, 48px));
	}
	.ns-logo-carousel__track {
		gap: var(--ns-lc-gap-mobile, var(--ns-lc-gap, 24px));
		animation-duration: var(--ns-lc-speed-mobile, var(--ns-lc-speed, 24s));
	}
	.ns-logo-carousel__item img,
	.ns-logo-carousel__img {
		max-height: var(--ns-lc-logo-max-height-mobile, var(--ns-lc-logo-max-height, 48px));
	}
}

/* --- Accessibilità: riduzione movimento --- */
@media (prefers-reduced-motion: reduce) {
	.ns-logo-carousel__track {
		animation: none;
		transform: none;
	}
	.ns-logo-carousel__viewport {
		overflow-x: auto;
	}
}