/* Contenitore principale dello slider */
.brand-slider {
	width: 100%;
	overflow: hidden;
/* Nasconde ciò che esce dal contenitore */
	white-space: nowrap;
/* Mantiene tutti gli elementi in una singola riga */
	position: relative;
	padding: 10px 0;
/* Spazio sopra e sotto il carosello. Riduciamo per dare più spazio utile ai loghi. */
	box-sizing: border-box;
/* ALTEZZA COMPLESSIVA DEL CAROSELLO */
	height: 180px;
/* Regola questo valore per l'altezza finale desiderata. */
/* background-color: #f0f0f0; */
/* Lasciato commentato per la produzione */
}

/* Il binario che si muove */
.brand-track {
	display: flex;
/* Mette i loghi in fila */
	animation: scroll 30s linear infinite;
/* Animazione: nome, durata, tipo, ripetizione */
	height: 100%;
/* Fa sì che la traccia occupi l'intera altezza del suo contenitore (.brand-slider) */
}

/* Reset animazione al passaggio del mouse */
.brand-slider:hover .brand-track {
	animation-play-state: paused;
/* Mette in pausa lo scorrimento al passaggio del mouse */
}

/* Ogni singolo slide (logo) */
.brand-track .slide {
	display: flex;
/* Centra il logo all'interno del suo div */
	align-items: center;
/* Cruciale per centratura verticale */
	justify-content: center;
/* Cruciale per centratura orizzontale */
	flex-shrink: 0;
/* Impedisce agli elementi di ridursi */
/* NUOVE DIMENSIONI PER OGNI SLIDE. Queste definiscono lo spazio per un singolo logo. */
	width: 200px;
/* RIDOTTO: Larghezza fissa per ogni slide. Adatta questo. */
	height: 100%;
/* La slide occupa tutta l'altezza del .brand-slider */
	margin: 0 10px;
/* RIDOTTO: Spazio tra i loghi. Ho messo 10px per lato. */
	box-sizing: border-box;
/* border: 1px dashed #ccc; */
/* Lasciato commentato per la produzione */
}

/* Link del logo (il tag ) */
.brand-track .slide a {
	display: flex;
/* Rendi il link un flex container per centrare l'immagine al suo interno */
	align-items: center;
/* Centra verticalmente l'immagine dentro il link */
	justify-content: center;
/* Centra orizzontalmente l'immagine dentro il link */
	width: 100%;
/* Il link occupa tutta la larghezza disponibile nella slide */
	height: 100%;
/* Il link occupa tutta l'altezza disponibile nella slide */
	text-decoration: none;
/* Rimuove la sottolineatura dai link */
}

/* Immagini dei loghi all'interno delle slide */
.brand-track .slide img {
	max-width: 95%;
/* Leggermente aumentato per far occupare più spazio al logo, riducendo il "cuscinetto" */
	max-height: 95%;
/* Leggermente aumentato */
	display: block;
/* Rimuove lo spazio extra sotto le immagini */
	object-fit: contain;
/* Cruciale: L'immagine si adatta senza tagliarsi */
/*filter: grayscale(100%);*/
/* Lasciato commentato */
	opacity: 1;
/* Rende i loghi leggermente trasparenti (opzionale) */
	transition: all .3s ease;
/* Transizione per gli effetti hover */
}

/* Effetto hover sui loghi */
.brand-track .slide img:hover {
/*filter: grayscale(0%);*/
/* Lasciato commentato */
	opacity: 1;
/* Rende il logo completamente visibile al passaggio del mouse */
	transform: scale(1.05);
/* Piccolo ingrandimento al passaggio del mouse */
}

/* Definisce l'animazione di scorrimento */
@keyframes scroll {
	0% {
		transform: translateX(0);
	/* Inizia alla posizione originale */
	}
	
	100% {
	/* *** AGGIORNATO *** */
	/* Calcolo: -(larghezza della slide) * (numero di loghi originali) - (margine laterale * 2 * numero di loghi originali) */
	/* Esempio per 10 loghi originali, slide da 200px e margine di 10px */
		transform: translateX(calc(-200px * 10 - (10px * 2 * 10)));
	/* Questo diventa: -(2000px) - (200px) = -2200px */
	}
}

/* Media Queries per la responsività */
@media (max-width: 768px) {
	.brand-slider {
		height: 150px;
	/* Altezza ridotta per tablet */
		padding: 8px 0;
	}
	
	.brand-track .slide {
		width: 150px;
	/* RIDOTTO: Riduci la larghezza delle slide su schermi più piccoli */
		margin: 0 8px;
	/* RIDOTTO: Margine ridotto per tablet */
	}
	
	@keyframes scroll {
	/* *** AGGIORNATO PER TABLET *** */
	100% {
		transform: translateX(calc(-150px * 10 - (8px * 2 * 10)));
	}
}

.brand-track {
	animation-duration: 25s;
/* Aumenta la velocità per schermi più piccoli */
}	
}

@media (max-width: 480px) {
	.brand-slider {
		height: 120px;
	/* Ulteriore riduzione per mobile */
		padding: 1px 0;
	}
	
	.brand-track .slide {
		width: 100px;
	/* RIDOTTO: Ulteriore riduzione per mobile */
		margin: 0 5px;
	/* RIDOTTO: Margine ridotto per mobile */
	}
	
	@keyframes scroll {
	/* *** AGGIORNATO PER MOBILE *** */
	100% {
		transform: translateX(calc(-100px * 10 - (5px * 2 * 10)));
	}
}

.brand-track {
	animation-duration: 20s;
/* Ancora più veloce per mobile */
}	
}