/**
 * CSS necessario al carosello a scorrimento gestito da slider-prodotti.js.
 * L'elemento scrollato (quello con overflow-x + scrollbar nascosta) deve
 * contenere gli "item" come figli diretti:
 *   .slider-prodotti > item
 *   .slider-optional > wrapper > item  (qui è "wrapper", figlio diretto
 *   di .slider-optional, l'elemento scrollato — non .slider-optional stesso)
 *
 * !important: Breakdance genera classi per-istanza più specifiche
 * (es. .bde-div-1527-173) che altrimenti sovrascrivono flex/gap.
 */
.slider-prodotti,
.slider-optional > * {
	/* Fallback prima che slider-prodotti.js calcoli il valore reale in base
	   al numero di item (min 2 colonne, max 5; su mobile una sola colonna
	   abbondante, vedi colonneMassime() nel JS). */
	--tqg-slider-cols: 2;
	--tqg-slider-gap: 30px;
	display: flex !important;
	align-items: stretch !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: var( --tqg-slider-gap ) !important;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.slider-prodotti::-webkit-scrollbar,
.slider-optional > *::-webkit-scrollbar {
	display: none;
}

/*
 * Ogni item occupa 1/N della larghezza del contenitore (N = --tqg-slider-cols,
 * impostata via JS in base al numero reale di item), al netto degli N-1 gap
 * da 30px. Da 5 item in su N resta fissa a 5 (max item visibili, col resto
 * raggiungibile scorrendo).
 */
.slider-prodotti > *,
.slider-optional > * > * {
	flex: 0 0 calc( ( 100% - ( var(--tqg-slider-cols) - 1 ) * var(--tqg-slider-gap) ) / var(--tqg-slider-cols) ) !important;
	width: calc( ( 100% - ( var(--tqg-slider-cols) - 1 ) * var(--tqg-slider-gap) ) / var(--tqg-slider-cols) ) !important;
	max-width: calc( ( 100% - ( var(--tqg-slider-cols) - 1 ) * var(--tqg-slider-gap) ) / var(--tqg-slider-cols) ) !important;
	box-sizing: border-box !important;
}

/* Solo a slider attivo (classe .tqg-slider-attivo messa da
   slider-prodotti.js sul contenitore scrollato): tutti e quattro gli angoli
   della card a 24px. A slider disattivo resta il default Breakdance, che ne
   arrotonda solo due.
   !important: Breakdance genera per la singola istanza una regola più
   specifica (es. ".breakdance .bde-div-1763-102") che altrimenti vince. */
.tqg-slider-attivo .tqg-optional-card-front {
	border-radius: 24px !important;
}

/* ── Retro della card in hover (solo desktop, solo a slider attivo) ──────
 *
 * A slider disattivo la card è divisa in due metà affiancate: fronte bianco
 * e descrizione su sfondo brand. A slider attivo le card sono strette e
 * quella divisione non ci sta più: la descrizione (.tqg-card-back, classe
 * messa da slider-prodotti.js) esce dal flusso e diventa un overlay che
 * copre tutta la card, invisibile finché non ci si passa sopra col mouse.
 * Uscendo dal flusso lascia il fronte da solo a riempire il wrapper, che
 * essendo `flex: 1 1 0` si prende da sé tutta la larghezza.
 *
 * Tutto qui dentro sta in una media query min-width, non nel blocco
 * generale, perché sotto i 1024px il JS non attiva più lo slider e la
 * descrizione deve restare in chiaro nel flusso (col dito l'hover non
 * esiste): così le regole mobile più sotto non devono disfare nulla.
 *
 * !important: le regole per-istanza di Breakdance (.breakdance
 * .bde-div-1763-106) hanno specificità 0,2,0 come queste ma vengono
 * caricate dopo, quindi a parità vincerebbero loro.
 */
@media ( min-width: 1025px ) {
	.tqg-card-flip {
		position: relative !important;
	}

	.tqg-card-back {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: auto !important;
		height: auto !important;
		z-index: 2;
		border-radius: 24px !important;
		padding: 24px !important;
		/* Il retro non scorre: un contenuto troppo lungo viene tagliato, non
		   reso scrollabile (una scrollbar dentro una card di un carosello
		   che si muove da solo è ingestibile). "safe" serve proprio a questo:
		   Breakdance centra il contenuto (justify-content: center) e col
		   centraggio normale un contenuto più alto della card sborda da
		   entrambi i lati, perdendo anche le prime righe; con "safe"
		   l'allineamento ripiega su flex-start appena il contenuto non ci
		   sta, così si taglia solo in fondo. Sui browser che non conoscono
		   la parola chiave la dichiarazione è invalida e viene scartata,
		   tornando al center di Breakdance. */
		overflow: hidden;
		justify-content: safe center !important;
		opacity: 0;
		/* Da nascosto non deve rubare il mouse a link e pulsanti del
		   fronte; da visibile torna cliccabile. */
		pointer-events: none;
		transition: opacity 0.35s ease;
	}

	.tqg-card-flip:hover > .tqg-card-back {
		opacity: 1;
		pointer-events: auto;
	}

	/* Spaziature del fronte. Breakdance gli dà 28px/40px, misura pensata per
	   quando la card era larga e divisa a metà: a slider attivo le card sono
	   circa un quinto della larghezza schermo (~250px su un 1440), e 40px per
	   lato si mangerebbero un terzo dello spazio utile. 24px pari sui quattro
	   lati, gli stessi del retro qui sopra, così i due lati della card hanno
	   il testo allineato allo stesso punto e l'overlay non "salta" al
	   passaggio del mouse. Il gap tra label, icone, titolo e intro scende in
	   proporzione. */
	.tqg-slider-attivo .tqg-optional-card-front {
		padding: 24px !important;
		gap: 14px !important;
	}
}

/* Copia del titolo dentro .tqg-optional-description, generata da
   slider-prodotti.js: sullo sfondo colorato serve bianco, non il colore
   brand del titolo originale. !important perché il titolo originale può
   avere .tqg-brand-color, che forza il colore con la stessa priorità. */
.tqg-optional-title-clone {
	color: #fff !important;
	margin-bottom: 5px !important;
}

/*
 * Stato transitorio applicato da slider-prodotti.js
 * (pareggiaSezioniOptional) solo per il tempo della misurazione: le due
 * sezioni della card tornano alla loro altezza di contenuto, altrimenti si
 * leggerebbe quella già stirata dal flex (`flex: 1 1 0` di Breakdance +
 * min-height:100% del wrapper).
 */
.tqg-optional-misura .tqg-optional-wrapper {
	min-height: 0 !important;
}

.tqg-optional-misura .tqg-optional-card-front,
.tqg-optional-misura .tqg-optional-description {
	flex: 0 0 auto !important;
	min-height: 0 !important;
}

/* ── Mobile / tablet (≤ 1024px) ──────────────────────────────────────────
 *
 * Qui lo scorrimento automatico è disattivato (vedi slider-prodotti.js): si
 * scorre col dito, quindi servono card larghe con lo snap e un gap più
 * stretto. Il numero di colonne lo decide il JS (1.2 sotto i 600px, 2.2
 * fino a 1024px): la frazione fa spuntare la card successiva, così si
 * capisce che c'è altro da vedere.
 */
@media ( max-width: 1024px ) {
	.slider-prodotti,
	.slider-optional > * {
		--tqg-slider-gap: 16px;
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;
	}

	.slider-prodotti > *,
	.slider-optional > * > * {
		scroll-snap-align: start;
	}

	/*
	 * Nessun ripristino da fare per .tqg-card-back: l'overlay in hover vive
	 * tutto nella media query min-width: 1025px qui sopra, quindi una card
	 * che si porta dietro la classe (finestra rimpicciolita dopo il
	 * caricamento) torna da sola nel flusso, in chiaro sotto al fronte.
	 */

	/*
	 * Icone dell'optional. La gallery Breakdance è una griglia di --columns
	 * colonne (4, ma sotto i 479px una sola) con le figure rese quadrate da
	 * un padding-bottom pari al ratio: su telefono ogni icona finiva larga
	 * quanto la card, impilata sulle altre. Qui diventano quadrati fissi da
	 * 50px affiancati, che vanno a capo solo se non ci stanno.
	 */
	.tqg-optional-card-front .ee-gallery--grid {
		display: flex !important;
		flex-wrap: wrap;
		gap: 10px;
	}

	.tqg-optional-card-front .ee-gallery--grid .ee-gallery-item {
		flex: 0 0 50px;
		width: 50px;
	}

	.tqg-optional-card-front .ee-gallery--grid .ee-gallery-item-figure {
		width: 50px;
		height: 50px;
		padding-bottom: 0 !important;
	}

	/* L'immagine riempie la figure in absolute: contain per non tagliarla. */
	.tqg-optional-card-front .ee-gallery--grid .ee-gallery-item-figure img {
		object-fit: contain;
	}

	/*
	 * Spaziature della card più compatte: Breakdance mette 28px/40px di
	 * padding sul fronte (con 20px di gap tra label, icone, titolo e intro) e
	 * 30px sul retro, misure pensate per il desktop. !important perché le
	 * regole per-istanza (.breakdance .bde-div-1763-102) hanno la stessa
	 * specificità e l'ordine di caricamento non è garantito.
	 */
	.breakdance .tqg-optional-card-front {
		padding: 18px 20px !important;
		gap: 12px !important;
	}

	.breakdance .tqg-optional-description {
		padding: 18px 20px !important;
	}

	/*
	 * Paragrafi: l'intro (annidata nel div con margin-top:auto in fondo al
	 * fronte) e la descrizione sul retro. Label "OPTIONAL" e titolo sono
	 * figli diretti del fronte e restano con la loro tipografia.
	 */
	.tqg-optional-card-front > .bde-div .bde-text,
	.tqg-optional-description .bde-text:not( .tqg-optional-title-clone ) {
		font-size: 17px !important;
		line-height: 1.35 !important;
	}

	/*
	 * Testi in alto. Breakdance centra verticalmente il contenuto del retro
	 * (justify-content: center) e spinge l'intro in fondo al fronte con un
	 * margin-top: auto.
	 */
	.breakdance .tqg-optional-description {
		justify-content: flex-start !important;
	}

	.tqg-optional-card-front > .bde-div {
		margin-top: 0 !important;
	}
}