/**
 * Logo Roll — aspetto e scorrimento. BLOCCO NUOVO, non un porting.
 *
 * La fascia di loghi che scorre: una striscia chiara, i loghi in fila alla stessa altezza,
 * e il nastro che scivola verso sinistra senza fine. In elewidget non c'è niente del
 * genere, quindi non c'è nessun markup da rispettare — la forma è quella del riferimento.
 *
 * ── LO SCORRIMENTO NON SI PUÒ FARE COL SOLO CSS, E VALE LA PENA DIRE PERCHÉ ────────────
 *
 * Un nastro che gira all'infinito ha bisogno di due cose che il foglio di stile non sa:
 * quante COPIE del gruppo di loghi servono per coprire lo schermo, e QUANTO è largo un
 * gruppo — che è la distanza esatta da percorrere prima di ricominciare, e l'unica che non
 * fa vedere il salto.
 *
 * Tutte e due dipendono dai loghi che ci ha messo l'autore e dalla larghezza dello schermo,
 * cioè da cose che si sanno solo a pagina montata. Le misura `js/widgets/logoroll.js` e le
 * consegna qui come due variabili — `--se-lr-passo` e `--se-lr-durata` — più la classe
 * `seLogoRoll--acceso`. Il movimento resta interamente del CSS: il JavaScript non sposta
 * niente a ogni fotogramma, dice solo di quanto e in quanto tempo.
 *
 * Il `50%` che si vede in giro (due copie e via) qui non va: funziona finché il gruppo è
 * più largo dello schermo, e con quattro loghi su un monitor largo si aprirebbe un vuoto.
 *
 * ⚠ FERMO NELL'EDITOR, ED È VOLUTO. Il canvas non carica i file di `js/widgets/`, quindi
 * nell'editor la classe `--acceso` non arriva mai e il nastro sta fermo. È la stessa scelta
 * del carosello di Icon Boxes: impaginare dentro una cosa che si muove è impossibile, e
 * l'autore deve vedere i suoi loghi, non inseguirli. Vedi la sezione del canvas in fondo.
 *
 * LO SCOPE. Tutto prefissato `.se-gjs-page`, che esiste sia sul frontend sia nel canvas.
 */

/* La radice è la MASCHERA: quello che esce di lato viene tagliato qui. Il taglio è netto,
   come nel riferimento — niente sfumatura ai bordi. */
.se-gjs-page .seLogoRoll {
	display: flex;
	align-items: center;
	width: 100%;
	overflow: hidden;
	padding: 2.5rem 0;

	/* ⚠ SFONDO TRASPARENTE, e non è un'omissione: è il valore di partenza voluto.
	   C'era una striscia chiara (#f7f8f9) presa dal riferimento, ma un fondo dichiarato dal
	   componente è un fondo che si porta dietro ovunque lo si metta — e se sotto c'è già
	   una sezione colorata, si vede una banda più chiara che nessuno ha chiesto.
	   Chi la vuole la sceglie dallo Style Manager, e finisce nella regola per-id di quel
	   singolo blocco: si vede dove è stata decisa e si toglie da lì. */
	background-color: transparent;
}

/* Il nastro. `width: max-content` è quello che gli permette di essere più largo della
   maschera: senza, si fermerebbe alla larghezza del contenitore e i loghi si
   stringerebbero invece di uscire dal bordo. */
.se-gjs-page .seLogoRoll__pista {
	display: flex;
	align-items: center;
	width: max-content;
	flex: 0 0 auto;
}

/* Il gruppo: i loghi che l'autore ha messo, una volta sola. Le copie che il nastro
   contiene oltre a questo sono fatte a pagina montata e non stanno nel contenuto salvato.
   Il `padding-right` è lo stacco fra l'ultimo logo di un gruppo e il primo del successivo:
   senza, il nastro si richiuderebbe con due loghi appiccicati una volta ogni giro. */
.se-gjs-page .seLogoRoll__gruppo {
	display: flex;
	align-items: center;
	gap: 5rem;
	padding-right: 5rem;
	flex: 0 0 auto;
}

/* I loghi arrivano da file di dimensioni qualunque: è l'ALTEZZA a renderli una fila, e la
   larghezza segue. `max-width: none` perché il reset del tema mette `max-width: 100%` su
   ogni immagine, e dentro un contenitore flex quel 100% li schiaccerebbe.
 *
 * ⚠ `height: 56px` E NON `max-height`, e non è una preferenza: è l'unica delle due che
 * funziona. Misurato in Chromium su questo stesso markup, tre loghi da 300×80:
 *
 *     max-height: 56px  →  gruppo largo 240px, loghi resi 160×43
 *     height: 56px      →  gruppo largo 870px, loghi resi 210×56   (giusto)
 *
 * Con `max-height` la larghezza dell'immagine resta `auto` e NON è definita: nel calcolo
 * della larghezza `max-content` del nastro ogni logo conta zero, il gruppo si misura come
 * i soli spazi fra i loghi, e poi le immagini vengono schiacciate in quel poco. Il guaio
 * non è cosmetico — è quella larghezza sbagliata che `js/widgets/logoroll.js` prende per
 * passo dell'animazione, quindi il nastro salterebbe a ogni giro.
 *
 * Con un'altezza definita il rapporto d'immagine trasferisce una larghezza definita, e
 * tutto torna. Il prezzo è che un logo più basso di 56px viene INGRANDITO: chi carica i
 * loghi li dia alti almeno 112px (il doppio, per gli schermi fitti). */
/* Il collegamento attorno al logo. È un elemento del nastro come lo era l'immagine, e
   deve comportarsi allo stesso modo: `flex: 0 0 auto` perché non si stringa, e `display:
   flex` perché non aggiunga la riga di testo che un `<a>` inline si porta dietro — quel
   mezzo pixel sotto l'immagine falserebbe l'altezza del gruppo, che è la misura da cui
   dipende il passo dell'animazione.

   Nessun colore e nessuna sottolineatura: qui dentro non c'è testo, e le regole sui link
   del tema non devono lasciare traccia attorno a un logo. */
.se-gjs-page .seLogoRoll .seLogoRoll__link {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}

/* Un logo che porta da qualche parte lo dice: il cursore cambia e il logo si accende al
   passaggio. Solo con l'indirizzo — `:not([href])` è il tag che c'è sempre ma non è un
   link, vedi la funzione `logo()` nel componente. */
.se-gjs-page .seLogoRoll .seLogoRoll__link[href] {
	cursor: pointer;
}

.se-gjs-page .seLogoRoll .seLogoRoll__link[href] .seLogoRoll__logo {
	transition: opacity .2s ease;
}

.se-gjs-page .seLogoRoll .seLogoRoll__link[href]:hover .seLogoRoll__logo {
	opacity: .65;
}

/* ⚠ IL SELETTORE RIPETE `.seLogoRoll`, e non è ridondanza: serve a vincere.
   se-builder-content.css dichiara `.se-gjs-page .gjs-cell img { max-width:100%; height:auto }`
   per tutte le immagini dentro una colonna — vale (0,2,1), mentre
   `.se-gjs-page .seLogoRoll__logo` vale (0,2,0) e PERDE: nel confronto conta prima il
   numero di classi, e lì la regola generale ne ha una in più.
   Il risultato era che nel canvas i loghi tornavano ad altezza automatica e larghi quanto
   la colonna: enormi, uno per riga. Con il contenitore nella catena si arriva a (0,3,0) e
   la misura giusta vince, senza ricorrere a `!important`. */
.se-gjs-page .seLogoRoll .seLogoRoll__logo {
	flex: 0 0 auto;
	display: block;
	width: auto;
	max-width: none;
	height: 56px;
	object-fit: contain;
}

/* Il movimento. Il punto d'arrivo è una variabile: il fotogramma finale non è «metà del
   nastro» ma «un gruppo esatto più in là», che è l'unica misura che fa ricominciare il
   giro senza che si veda il punto di sutura. */
@keyframes seLogoRollScorri {
	from { transform: translateX(0); }
	to { transform: translateX(var(--se-lr-passo, 0px)); }
}

/* `seLogoRoll--acceso` la mette il JavaScript dopo aver misurato. Finché non c'è — nel
   canvas, o se lo script non gira — i loghi restano in fila, fermi: una fascia che non
   scorre è molto meglio di una fascia vuota. */
.se-gjs-page .seLogoRoll--acceso .seLogoRoll__pista {
	animation: seLogoRollScorri var(--se-lr-durata, 30s) linear infinite;
	will-change: transform;
}

/* Chi ha chiesto al sistema operativo di non far muovere le cose non se le vede muovere.
   Non è un vezzo: un movimento continuo che non si può fermare è esattamente il caso che
   il criterio 2.2.2 delle WCAG chiede di evitare. Restano i primi loghi, fermi e
   leggibili. */
@media (prefers-reduced-motion: reduce) {
	.se-gjs-page .seLogoRoll--acceso .seLogoRoll__pista {
		animation: none;
	}
}

@media screen and (max-width: 767px) {
	.se-gjs-page .seLogoRoll {
		padding: 1.5rem 0;
	}

	.se-gjs-page .seLogoRoll__gruppo {
		gap: 3rem;
		padding-right: 3rem;
	}

	/* Definita anche qui, per la ragione detta sopra: con `max-height` il nastro si
	   rimisurerebbe sbagliato appena si passa sotto i 767px. */
	.se-gjs-page .seLogoRoll .seLogoRoll__logo {
		height: 40px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────────────── *
 * SOLO NELL'EDITOR — `.se-gjs-canvas`
 *
 * `.se-gjs-canvas` è la classe che il builder mette sull'<html> dell'iframe del canvas, ed
 * esiste solo lì: quello che sta qui sotto non arriva mai sul sito.
 *
 * Nel canvas il nastro è fermo e non c'è nessuna copia, quindi la maschera farebbe un
 * danno solo: i loghi oltre la larghezza del blocco sparirebbero, e l'autore non avrebbe
 * modo di vedere — né di selezionare — quelli che ha appena aggiunto. Qui il gruppo va a
 * capo e la maschera si apre.
 * ────────────────────────────────────────────────────────────────────────────────────── */

.se-gjs-canvas .seLogoRoll {
	overflow: visible;
	/* Un po' di respiro ai lati che sul sito non serve: là il primo logo è tagliato dalla
	   maschera perché sta scorrendo, qui sarebbe solo appiccicato al bordo. */
	padding: 2.5rem 1rem;
}

/* ⚠ Le tre larghezze qui sotto vanno insieme, e nessuna delle tre si può togliere.
   Il nastro nasce `width: max-content` e il gruppo `flex: 0 0 auto`: sono le due cose che
   sul sito gli permettono di essere più largo dello schermo, ed è esattamente quello che
   qui impedisce l'andata a capo. Un `flex-wrap: wrap` da solo non fa niente, perché un
   contenitore largo quanto il suo contenuto non ha mai una riga da spezzare. */
.se-gjs-canvas .seLogoRoll__pista {
	width: 100%;
	min-width: 0;
}

.se-gjs-canvas .seLogoRoll__gruppo {
	width: 100%;
	min-width: 0;
	flex: 0 1 auto;
	flex-wrap: wrap;
	row-gap: 2rem;
	padding-right: 0;
}