/**
 * Griglia loghi condivisa da `foiano/patrocinio`, `foiano/sponsor` e
 * `foiano/collaborazioni` (markup in inc/blocks/logo-grid-partial.php).
 * Un unico file al posto delle tre copie identiche che stavano nei
 * rispettivi style.css (registrato in inc/blocks/index.php).
 */

.fl-logo-grid__heading {
	margin-top: 0;
}

.fl-logo-grid__heading--left { text-align: left; }
.fl-logo-grid__heading--center { text-align: center; }
.fl-logo-grid__heading--right { text-align: right; }

/*
 * Le tre sezioni stanno una dopo l'altra in homepage: metà dello spazio
 * standard tra sezioni (preset `section`, ~24px mobile → ~48px desktop)
 * così si leggono come un'unica area "partner". Specificità più alta della
 * regola `> * + *` generata da WordPress per il blockGap di foiano/edizione.
 */
.foiano-edizione > :is( .fl-patrocinio, .fl-sponsor, .fl-collaborazioni ) + :is( .fl-patrocinio, .fl-sponsor, .fl-collaborazioni ) {
	margin-block-start: calc( var( --wp--preset--spacing--section, 6rem ) / 2 );
}

/*
 * Flex-wrap con larghezza fissa per elemento (N per riga, impostabile dal
 * pannello del blocco) invece di CSS Grid: con justify-content l'ultima
 * riga incompleta resta centrata (con la griglia i loghi rimasti finivano
 * a sinistra), e ogni elemento ha comunque la stessa larghezza.
 */
.fl-logo-grid {
	--fl-logo-columns: var( --fl-logo-per-row, 3 );
	display: flex;
	flex-wrap: wrap;
	gap: var( --fl-logo-gap, 32px );
	justify-content: center;
}

.fl-logo-grid__item {
	flex: 0 0 calc( ( 100% - ( var( --fl-logo-columns ) - 1 ) * var( --fl-logo-gap, 32px ) ) / var( --fl-logo-columns ) );
	display: flex;
	justify-content: center;
	min-width: 0;
}

/* Allineamento orizzontale, dalle icone della toolbar del blocco: posizione
   dell'ultima riga incompleta e del logo dentro il proprio spazio. */
.fl-logo-grid--left { justify-content: flex-start; }
.fl-logo-grid--left .fl-logo-grid__item { justify-content: flex-start; }
.fl-logo-grid--right { justify-content: flex-end; }
.fl-logo-grid--right .fl-logo-grid__item { justify-content: flex-end; }
.fl-logo-grid--space-between { justify-content: space-between; }

/* Allineamento verticale, dalle icone della toolbar del blocco. */
.fl-logo-grid--valign-top { align-items: flex-start; }
.fl-logo-grid--valign-center { align-items: center; }
.fl-logo-grid--valign-bottom { align-items: flex-end; }

.fl-logo-grid__item a {
	display: inline-flex;
	max-width: 100%;
}

/*
 * Altezza = altezza di riferimento del blocco × fattore per-logo calcolato
 * lato server dalle proporzioni dell'immagine (foiano_logo_grid_scale()):
 * loghi larghi e compatti con un peso visivo simile. La larghezza segue
 * le proporzioni, mai oltre lo spazio della colonna.
 */
.fl-logo-grid__item img {
	display: block;
	height: calc( var( --fl-logo-max-size, 72px ) * var( --fl-logo-scale, 1 ) );
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.fl-logo-grid--grayscale .fl-logo-grid__item img {
	filter: grayscale( 100% );
	opacity: 0.8;
	transition: filter 150ms, opacity 150ms;
}

.fl-logo-grid--grayscale .fl-logo-grid__item img:hover,
.fl-logo-grid--grayscale .fl-logo-grid__item a:focus-visible img {
	filter: none;
	opacity: 1;
}

/* Su dispositivi touch non c'è hover per far tornare il colore: loghi
   sempre a colori. */
@media (hover: none) {
	.fl-logo-grid--grayscale .fl-logo-grid__item img {
		filter: none;
		opacity: 1;
	}
}

@media (max-width: 781px) {
	/* Con un logo per riga lo spazio tra loghi è quasi solo verticale: 1,5×
	   lo spazio impostato (48px col default 32), così ogni logo respira. */
	.fl-logo-grid {
		gap: calc( var( --fl-logo-gap, 32px ) * 1.5 );
	}

	.fl-logo-grid__item {
		flex-basis: calc( ( 100% - ( var( --fl-logo-columns ) - 1 ) * var( --fl-logo-gap, 32px ) * 1.5 ) / var( --fl-logo-columns ) );
	}

	/* Loghi un po' più piccoli su mobile, nelle stesse proporzioni. */
	.fl-logo-grid__item img {
		height: calc( var( --fl-logo-max-size, 72px ) * var( --fl-logo-scale, 1 ) * 0.85 );
	}

	.fl-logo-grid--mobile-grid {
		--fl-logo-columns: var( --fl-logo-per-row-mobile, 1 );
	}

	/* "Scroll orizzontale" e "Carosello": una riga scorrevole invece della
	   griglia a capo. */
	.fl-logo-grid--mobile-scroll,
	.fl-logo-grid--mobile-carousel {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.fl-logo-grid--mobile-scroll .fl-logo-grid__item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.fl-logo-grid--mobile-carousel .fl-logo-grid__item {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}
}