/*
 * Stile condiviso dai due shortcode del modulo Sponsor. Variabili locali,
 * pensate per funzionare su qualunque pagina senza dipendere da altri
 * componenti del plugin.
 */

/* Carosello: [fcv_sponsor_carousel] — larghezza slide fissa, ne stanno quante ce ne stanno. */

.fcv-sponsor-carousel {
	display: flex;
	align-items: center;
	width: 100%;
}

.fcv-sponsor-carousel-viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.fcv-sponsor-carousel-track {
	display: flex;
	width: max-content;
	will-change: transform;
}

/* Nastro a scorrimento continuo: la larghezza/durata sono impostate via JS
   (le slide sono duplicate, il loop avviene a meta' del tragitto). */
.fcv-sponsor-carousel-track.is-marquee {
	animation: fcv-sponsor-marquee var(--fcv-marquee-duration, 30s) linear infinite;
}

.fcv-sponsor-carousel:hover .fcv-sponsor-carousel-track.is-marquee,
.fcv-sponsor-carousel:focus-within .fcv-sponsor-carousel-track.is-marquee {
	animation-play-state: paused;
}

@keyframes fcv-sponsor-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX( calc( -1 * var( --fcv-marquee-distance, 0px ) ) );
	}
}

.fcv-sponsor-carousel-slide {
	flex: 0 0 auto;
	width: 170px; /* larghezza fissa: il numero di loghi visibili dipende solo dallo spazio disponibile */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
}

.fcv-sponsor-carousel-slide a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.fcv-sponsor-carousel-slide img {
	display: block;
	max-width: 100%;
	height: 100px;
	width: auto;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.fcv-sponsor-carousel-track.is-marquee {
		animation: none;
	}
}

/* Colonne: [fcv_sponsor_columns] — due colonne verticali, tre su mobile (usato in sidebar). */

.fcv-sponsor-columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px 24px;
	width: 100%;
}

.fcv-sponsor-columns-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.fcv-sponsor-columns-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.fcv-sponsor-columns-item img {
	display: block;
	max-width: 100%;
	height: 100px;
	width: auto;
	object-fit: contain;
}

@media (max-width: 480px) {
	.fcv-sponsor-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px 10px;
	}

	.fcv-sponsor-columns-item {
		padding: 2px;
	}

	.fcv-sponsor-columns-item img {
		height: 110px;
	}
}