/**
 * Element:     Card contatori
 * Class:       .hi-cva-card-contatori
 * Description: Aspetto dei contatori di una card dentro il grid layout.
 *              Sono i valori che prima stavano nelle Design Options
 *              dell'elemento WPBakery, portati qui dentro.
 *
 * PERCHE' QUESTO FILE ESISTE
 * Impreza compila `us-design-options-css` scansionando il contenuto della
 * PAGINA: per ogni elemento con Design Options crea una classe `us_custom_<hash>`
 * e la sua regola. Un elemento che vive dentro un `us_grid_layout` non passa da
 * quel ciclo, quindi la classe esce nel markup ma la regola no. Peggio: l'hash
 * dipende dai valori di design, quindi bastava cambiare un colore perche' la
 * copia dell'elemento lasciata in pagina — l'unica che generava davvero il CSS —
 * smettesse di combaciare, senza un errore da nessuna parte.
 *
 * Qui il problema non si pone: le classi sono nostre, il foglio e' del plugin,
 * e viene accodato sempre (vedi `element.php`) perche' le griglie ricaricano
 * gli item via AJAX, quando gli hook di enqueue sono gia' passati.
 *
 * DUE FAMIGLIE DI SELETTORI
 * Le classi `hi-cva-card-contatori__*` arrivano dal parametro `el_class` degli
 * shortcode di Impreza; `.w-counter-value` e `.w-counter-title` sono invece
 * markup interno del Counter, su cui non abbiamo una classe nostra. Se un
 * giorno Impreza rinominasse quelle due, e' l'unico punto da aggiornare.
 *
 * PERCHE' OGNI REGOLA PARTE DALLA RADICE
 * `.hi-cva-card-contatori .hi-cva-card-contatori__counter` dice due volte la stessa cosa
 * e non e' una svista: serve il peso. Le regole del tema sui propri elementi
 * sono spesso a due classi (`.w-counter .w-counter-value`), e una regola nostra
 * a classe singola le perderebbe per specificita' anche arrivando dopo. Con la
 * radice davanti il conto torna sempre a nostro favore, senza `!important`.
 *
 * I colori e il font sono variabili del tema, non valori fissi: cambiando la
 * palette in Theme Options i contatori la seguono. Il fallback dopo la virgola
 * serve solo se quel token non esistesse — il tema padre non e' nel progetto,
 * quindi i nomi non sono verificabili da qui.
 */

/* --------------------------------------------------------------------------
 * Impaginato
 *
 * Le due regole qui sotto ripetono quello che `us_hwrapper` e `us_vwrapper`
 * fanno gia' di loro, con gli stessi gap passati agli shortcode. Non e' una
 * duplicazione inutile: e' cio' che tiene in piedi il blocco se il CSS di
 * quegli elementi non venisse caricato nella richiesta AJAX della griglia.
 * -------------------------------------------------------------------------- */

.hi-cva-card-contatori .hi-cva-card-contatori__row {
	display: flex;
	flex-direction: row;

	/* In alto e non in basso: quando un'etichetta va a capo e l'altra no, i
	   due numeri devono restare comunque sulla stessa linea. */
	align-items: flex-start;

	/* nowrap: i due contatori restano affiancati. Se lo spazio manca si agisce
	   sul corpo del numero, non mandando il secondo a capo. */
	flex-wrap: nowrap;
	gap: 2rem;
}

.hi-cva-card-contatori .hi-cva-card-contatori__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;

	/* Senza questo un contenuto lungo impedisce all'item di restringersi e la
	   coppia sborda dalla card invece di mandare a capo l'etichetta. */
	min-width: 0;
}

/* --------------------------------------------------------------------------
 * Numero e unita' di misura
 * -------------------------------------------------------------------------- */

.hi-cva-card-contatori .hi-cva-card-contatori__counter-wrap {
	display: block;
	max-width: 100%;
}

.hi-cva-card-contatori .hi-cva-card-contatori__counter,
.hi-cva-card-contatori .hi-cva-card-contatori__fallback {
	display: flex;
	flex-direction: row;

	/* L'unita' siede sulla linea di base del numero, non sul suo fondo: con
	   due corpi cosi' diversi (22px e 11px) e' l'unico allineamento che regge. */
	align-items: baseline;
	flex-wrap: nowrap;
	gap: .4em;
	margin: 0;
}

/*
 * I due colori sono quelli delle Design Options originali, e sono invertiti
 * rispetto a come verrebbe da leggerli: il NUMERO e' il colore del testo
 * (bianco sulle sezioni scure), l'UNITA' e' il colore dei link (azzurro). Nel
 * blob di partenza il valore aveva `custom_color="_alt_content_text"` e
 * `_alt_content_link` stava sull'elemento, dove finiva per colorare il solo
 * titolo perche' il valore aveva gia' il suo.
 */

.hi-cva-card-contatori .hi-cva-card-contatori__counter .w-counter-value,
.hi-cva-card-contatori .hi-cva-card-contatori__fallback {
	color: var(--color-alt-content-text, #ffffff);
	font-size: 22px;
	line-height: .86;
	letter-spacing: -.04em;
	font-weight: 200;
	white-space: nowrap;
}

.hi-cva-card-contatori .hi-cva-card-contatori__counter .w-counter-title,
.hi-cva-card-contatori .hi-cva-card-contatori__fallback-unit {
	flex: 0 0 auto;
	margin: 0;
	color: var(--color-alt-content-link, var(--hi-cva-color-primary));
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Etichetta
 *
 * Il corpo e' quello del prototipo; la famiglia e' quella che il tema usa per
 * gli h6, cioe' le etichette in maiuscoletto spaziato. Cosi' cambiando i font
 * in Theme Options l'etichetta segue, come fanno le altre del sito.
 *
 * Le proprieta' vanno anche sui discendenti perche' `vc_custom_heading` mette
 * il testo dentro un elemento suo: la classe di `el_class` resta sull'involucro.
 * -------------------------------------------------------------------------- */

.hi-cva-card-contatori .hi-cva-card-contatori__label,
.hi-cva-card-contatori .hi-cva-card-contatori__label * {
	margin: 0;
	color: var(--color-alt-content-faded, var(--hi-cva-color-faded));
	font-family: var(--h6-font-family, inherit);
	font-size: 10px;
	line-height: 1.4;
	font-weight: inherit;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hi-cva-card-contatori .hi-cva-card-contatori__label {
	margin-top: 5px;
}

/* --------------------------------------------------------------------------
 * Ripiego senza JS
 *
 * Sta nel markup con il numero finale gia' scritto dentro. Di norma e' nascosto
 * e a mostrarsi e' il Counter; lo scambio lo fa il <style> dentro <noscript>
 * nel template, che il browser legge solo quando il JS e' disattivato. Quel
 * blocco usa selettori piu' pesanti di questo, altrimenti non riuscirebbe a
 * riaccenderlo.
 * -------------------------------------------------------------------------- */

.hi-cva-card-contatori .hi-cva-card-contatori__fallback {
	display: none;
}

/* --------------------------------------------------------------------------
 * Movimento ridotto
 *
 * base.css azzera gia' transizioni e animazioni CSS di tutte le classi
 * `hi-cva-*`; il conteggio pero' e' JS, e a spegnerlo e' `assets/script.js`.
 * Qui resta solo da assicurarsi che il numero non parta invisibile.
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hi-cva-card-contatori .hi-cva-card-contatori__counter .w-counter-value {
		opacity: 1;
	}
}