/*
Homepage di VisitCaprarola — fase F5, ultimo pezzo.

SCOPO
Dare una forma alla homepage senza toccare una riga di markup: titoli di
sezione, testo di apertura, le 24 schede dei luoghi, le 12 schede delle
notizie, la cornice dello slider e la coda social. Il PHP di
partials/loop-homepage.php e definitivo; qui si scavalca solo il CSS.

ORDINE DI CARICAMENTO
library/joints.php accoda questo foglio per ultimo e SOLO sulla homepage
(is_page_template, riga 186), con dipendenza dichiarata da vc-tokens,
style.css, vc-mobile.css e vc-nav.css. A parita di specificita vince l'ultima
regola dichiarata, quindi la tecnica e sempre la stessa di vc-nav.css:
replicare la specificita esatta della regola da battere, o salire di un solo
gradino, e arrivare dopo. In questo file non c'e nessun !important.

I BREAKPOINT sono quelli di Foundation 5 gia in uso: small fino a 40em, medium
da 40.063em, large da 64.063em. Le media query non accettano var(), quindi i
valori sono scritti per esteso come in vc-grid.css, vc-mobile.css e vc-nav.css.

--------------------------------------------------------------------------
LE REGOLE STORICHE CHE QUESTO FOGLIO DEVE BATTERE, con la specificita
misurata su library/css/style.css:

  #homepage h1                (1,0,1)  righe 78-85    — non ha piu bersagli:
                                                        i titoli di sezione
                                                        sono diventati h2.
                                                        Regola morta.
  #homepage h2                (1,0,1)  righe 87-89    — rimpicciolisce a 1em
                                                        OGNI h2 della pagina:
                                                        titoli di sezione,
                                                        titoli delle notizie e
                                                        i due titoli social.
  #homepage #visitare h2      (2,0,1)  righe 91-96    — banda blu piena su
                                                        TUTTE le h2 dentro
                                                        #visitare.
  #homepage .launch_special p (1,1,1)  righe 122-128

--------------------------------------------------------------------------
IL DIFETTO PIU GRAVE TROVATO, ed e il motivo per cui la sezione 3.3 esiste.

style.css dipinge la didascalia delle schede con la coppia
background-color #374A66 / color #FFF, ma il titolo NON e testo nudo: e
h2.page-title che contiene un <a>. Il colore di un link non si eredita, e
nessuna regola del tema colora quel link: vince "a, a:visited { color:#003882 }"
di style.css riga 200. Risultato in produzione: blu #003882 su fondo #374A66,
rapporto di contrasto 1.24:1. Il criterio 1.4.3 ne chiede 4.5. Le didascalie
delle 24 schede sono, di fatto, illeggibili.
Qui il link torna bianco: 9.00:1.
--------------------------------------------------------------------------
*/

/* ===============================================================
   0. Variabili locali

   Stanno qui e non in vc-tokens.css perche F5 tocca un file solo, come ha
   gia fatto vc-nav.css. Ogni valore poggia su un token dove il token esiste,
   e ogni var() porta con se il proprio valore di ripiego, qui e in ogni
   punto d'uso.
   =============================================================== */

:root {
	/*
	   Rapporto d'immagine delle schede.

	   NON e 4/3 e non e 3/2: e 500/385, cioe esattamente la dimensione
	   registrata da library/joints.php riga 280, add_image_size con nome
	   homepage-thumb, 500 per 385, e il ritaglio forzato (terzo argomento a
	   true). Le miniature corrette arrivano quindi gia a 1.2987:1 e con
	   questo rapporto NON vengono ritagliate una seconda volta: object-fit
	   non ha niente da tagliare e la foto resta quella che il redattore ha
	   scelto. Con 4/3 (1.3333) avremmo perso circa il 2,6% dell'altezza di
	   ogni foto senza alcun guadagno.

	   Il rapporto serve lo stesso, e serve davvero, per i due casi in cui
	   l'immagine NON e 500x385:
	     - i contenuti caricati prima che quella misura fosse registrata, per
	       i quali WordPress ripiega sull'originale, di proporzioni qualsiasi;
	     - il placeholder di library/images/placeholder.png, usato dai post
	       senza immagine in evidenza.
	   In entrambi i casi aspect-ratio piu object-fit cover riportano la
	   scheda in riga con le altre.
	*/
	--vc-home-rapporto: 500 / 385;

	/* Ritmo verticale fra le schede: 1.875rem = 30px, cioe esattamente il
	   gutter orizzontale che la griglia gia produce (0.9375rem di padding
	   per ciascuna delle due colonne adiacenti). Griglia quadrata. */
	--vc-home-ritmo: var(--vc-spazio-4, 1.875rem);

	--vc-home-raggio: var(--vc-raggio-2, 6px);

	/* Colori. Tutti misurati; i rapporti sono annotati dove contano. */
	--vc-home-tessera-fondo: var(--vc-colore-blu, #374a66);
	--vc-home-tessera-fondo-2: var(--vc-colore-blu-scuro, #11273d);
	--vc-home-testo-forte: var(--vc-colore-blu-scuro, #11273d);
	--vc-home-fuoco: var(--vc-colore-blu-acceso, #007095);

	/*
	   Il segno di sezione. Ambra del brand, la stessa che vc-nav.css usa come
	   accento sul pannello scuro. Su bianco da 2.35:1, sotto il 3:1 del
	   criterio 1.4.11: e ammesso perche la barretta e puramente decorativa e
	   non porta alcuna informazione che non sia gia nel titolo accanto. Se un
	   domani la si volesse rendere portatrice di significato (per esempio
	   colorandola in modo diverso per sezione) va sostituita con
	   --vc-colore-blu, che su bianco da 9.00:1.
	*/
	--vc-home-segno: var(--vc-colore-ambra, #f39207);

	/*
	   Ombra al passaggio. Lo stato di riposo NON e "none" ma un'ombra
	   trasparente con le stesse lunghezze: box-shadow non sa interpolare da
	   none, e senza questo accorgimento la transizione sarebbe un salto.
	*/
	--vc-home-ombra-0: 0 0 0 0 rgba(17, 39, 61, 0);
	--vc-home-ombra: 0 8px 20px 0 rgba(17, 39, 61, 0.22);

	/* Movimento breve, come chiede il brief. Stessa curva di vc-nav.css, per
	   non avere due grammatiche del movimento nello stesso sito. */
	--vc-home-durata: 200ms;
	--vc-home-curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===============================================================
   1. Titoli di sezione — .vc-sezione-titolo

   Cosa devo battere: "#homepage h2 { font-size:1em }" (1,0,1), che li
   ridurrebbe a 16px. Il mio "#homepage .vc-sezione-titolo" e (1,1,0): stesso
   numero di id, una classe in piu, vince a prescindere dall'ordine.

   PERCHE UNA CLAMP E NON UNA MISURA FISSA, e perche proprio questa.
   vc-mobile.css da a h2 la scala fluida --vc-h2-fluido, che pero qui perde
   contro #homepage h2. Invece di riusare quel token alla cieca ho ricalcolato
   la rampa con la STESSA regola di costruzione che vc-mobile.css documenta
   nella sua sezione 0: la rampa parte a 320px di viewport e FINISCE a 641px,
   cioe sul breakpoint medium, cosi sotto il breakpoint la crescita e continua
   e sopra il valore e stabile. Il coefficiente 3.115vw non e scelto a mano: e
   lo stesso di --vc-h1-fluido e --vc-h2-fluido, perche anche qui la corsa e
   di 10px su 321px di viewport.

   Misura: 24px sui telefoni piccoli, 34px da 641px in su. Il brief chiedeva
   "generoso ma non 48px": i 3em dell'attributo style di ieri valevano proprio
   48px, questo e circa il 70% di quelli.
   =============================================================== */

#homepage .vc-sezione-titolo {
	font-size: clamp(1.5rem, 0.877rem + 3.115vw, 2.125rem); /* 24 -> 34px */
	line-height: var(--vc-interlinea-stretta, 1.25);
	font-weight: var(--vc-peso-grassetto, 700);
	color: var(--vc-home-testo-forte, #11273d); /* 15.20:1 su bianco */

	/*
	   Spazio sopra abbondante e sotto minore: un titolo appartiene a cio che
	   segue, non a cio che lo precede. 60px sopra e 22.5px sotto, cioe due
	   gradini della scala dei token e non due numeri inventati.
	*/
	margin: var(--vc-spazio-8, 3.75rem) 0 var(--vc-spazio-3, 1.40625rem);
}

/*
   Il segno di sezione: una barretta corta SOPRA il titolo.

   Perche sopra, e non una linea sotto a tutta larghezza. La riga nera piena
   di "#homepage h1" separava il titolo da cio che introduce, cioe faceva
   esattamente il contrario di quello che un titolo di sezione deve fare. Una
   barretta corta sopra apre il blocco invece di chiuderlo, e non ha bisogno
   di sapere quanto e larga la colonna.
*/
#homepage .vc-sezione-titolo::before {
	content: "";
	display: block;
	width: 3rem;
	height: 4px;
	margin-bottom: 0.75rem;
	background-color: var(--vc-home-segno, #f39207);
	border-radius: var(--vc-raggio-1, 3px);
}

/*
   Nota su cio che NON faccio, per non lasciarlo come dubbio. Verrebbe voglia
   di togliere i 60px di stacco al primo dei due titoli. Non si puo esprimere
   senza :has(), perche i due titoli stanno ciascuno dentro una .row propria e
   non sono fratelli di cio che li precede. E comunque non serve: sopra il
   primo titolo c'e un paragrafo di testo, non il bordo della pagina, e 60px
   di stacco sono corretti anche li.
*/

/* ===============================================================
   2. Testo di apertura — .launch_special

   Da battere: "#homepage .launch_special p" (1,1,1) di style.css, che oggi
   impone font-size 1.2em e allineamento a sinistra su tutta la larghezza
   della pagina. Replico la stessa specificita e arrivo dopo.
   =============================================================== */

#homepage .launch_special {
	margin: var(--vc-spazio-4, 1.875rem) 0 var(--vc-spazio-2, 0.9375rem);
}

#homepage .launch_special p {
	/*
	   Oggi: 1.2em di 16px = 19.2px fissi su ogni larghezza. La clamp parte
	   ESATTAMENTE da 19.2px (1.2rem) e arriva a 22px: come in vc-mobile.css,
	   su nessuna larghezza il testo diventa piu piccolo di quello di oggi.
	   La rampa si esaurisce a 640px perche oltre non serve: da li in poi a
	   governare la lettura e il max-width, non il corpo.
	*/
	font-size: clamp(1.2rem, 1.025rem + 0.875vw, 1.375rem); /* 19.2 -> 22px */
	line-height: var(--vc-interlinea-ampia, 1.7);

	/*
	   Larghezza di riga. 70ch e la stessa scelta, con la stessa motivazione,
	   che vc-mobile.css fa nella sua sezione 3.2 per articoli e pagine: 70 e
	   non 65 per lasciare il margine piu largo possibile, restando dentro
	   l'intervallo consigliato di 45-75 caratteri.

	   Il limite sta sull'ELEMENTO DI TESTO e non su .row, .columns o sulle
	   classi di griglia: la griglia non viene sfiorata.

	   Su schermo grande la colonna misura circa 1250px, cioe oltre 100
	   caratteri per riga; qui scende a circa 770px.
	*/
	max-width: 70ch;
	margin-bottom: var(--vc-spazio-3, 1.40625rem);
}

/*
   Il grassetto resta a peso 600 come lo vuole style.css riga 130; gli do solo
   il blu profondo, cosi l'enfasi si vede anche in bianco e nero e non conta
   soltanto sul peso. 15.20:1 su bianco.
*/
#homepage .launch_special strong {
	color: var(--vc-home-testo-forte, #11273d);
}

/* ===============================================================
   3. Schede dei luoghi — .vc-luogo-scheda (24, quattro per riga)

   VINCOLO DI STRUTTURA, ed e il motivo di quasi tutte le scelte che seguono.
   L'article E la colonna della griglia: porta large-3 medium-6 small-12
   columns end, quindi ha float left e 0.9375rem di padding su ciascun lato,
   che sono il gutter. Non posso disegnarci sopra la "scatola" della scheda
   (fondo, bordo, ombra): il fondo arriverebbe fino al bordo della colonna e
   il gutter sparirebbe alla vista. Non posso nemmeno togliere quel padding,
   perche sarebbe cambiare la griglia.

   Quindi la scheda e fatta di DUE pezzi visivi impilati, .vc-luogo-immagine e
   h2.page-title, che si comportano come un oggetto solo: raggi
   complementari, nessuno spazio in mezzo, la stessa ombra su entrambi.
   E per la stessa ragione NON converto niente in flex o grid dove regge la
   griglia: il modello a float di vc-grid.css resta intatto.
   =============================================================== */

/* ---------------------------------------------------------------
   3.1 La scheda
   --------------------------------------------------------------- */
.vc-luogo-scheda {
	/*
	   Il ritmo verticale che l'attributo style con margin-bottom 5px dava nel
	   markup vecchio. 5px erano troppo pochi: le righe si toccavano.
	*/
	margin-bottom: var(--vc-home-ritmo, 1.875rem);

	/*
	   Il sollevamento. transform non partecipa al layout, quindi non muove di
	   un pixel il modello a float; crea pero un contesto di impilamento, ed e
	   proprio cio che serve perche la scheda sollevata passi SOPRA quelle
	   accanto invece che sotto.
	*/
	transition: transform var(--vc-home-durata, 200ms) var(--vc-home-curva, ease);
}

.vc-luogo-scheda:hover,
.vc-luogo-scheda:focus-within {
	transform: translateY(-3px);
}

/*
   MESSA A FUOCO DA TASTIERA.

   Nel markup il link dell'immagine ha tabindex a -1 e aria-hidden a true:
   l'unico elemento raggiungibile con il tabulatore e il link dentro il
   titolo, che occupa solo le due righe della didascalia. Un contorno soltanto
   li direbbe "sei su un testo", non "sei su questa scheda". Con :focus-within
   il contorno sale sull'article, cioe sull'intera scheda.

   outline-offset NEGATIVO di 3px, cioe pari allo spessore: il contorno cade
   esattamente sul bordo della colonna e non sborda mai nel gutter della
   scheda accanto, ne fuori dalla riga sul margine destro della pagina.

   :focus-within e non :has(:focus-visible) perche il brief esclude :has() per
   le cose essenziali, e questa lo e.
*/
.vc-luogo-scheda:focus-within,
.vc-home-news:focus-within {
	outline: 3px solid var(--vc-home-fuoco, #007095); /* 5.60:1 su bianco */
	outline-offset: -3px;
}

/* ---------------------------------------------------------------
   3.2 L'immagine
   --------------------------------------------------------------- */
.vc-luogo-scheda .article-header,
.vc-home-news .article-header {
	margin: 0;
}

.vc-luogo-scheda .vc-luogo-immagine {
	display: block;

	/*
	   overflow hidden e la meta indispensabile dello zoom al passaggio: senza,
	   l'immagine ingrandita sborderebbe sulle schede vicine.
	*/
	overflow: hidden;
	border-radius: var(--vc-home-raggio, 6px) var(--vc-home-raggio, 6px) 0 0;

	/*
	   Fondo tenue sotto l'immagine: si vede solo nella frazione di secondo
	   prima che il file differito arrivi, ed evita il lampo bianco su bianco
	   che fa sembrare la griglia vuota mentre si scorre.
	*/
	background-color: var(--vc-colore-bordo-tenue, #eeeeee);

	box-shadow: var(--vc-home-ombra-0, 0 0 0 0 rgba(17, 39, 61, 0));
	transition: box-shadow var(--vc-home-durata, 200ms) var(--vc-home-curva, ease);
}

.vc-luogo-scheda .vc-luogo-immagine img,
.vc-home-news .vc-luogo-immagine img {
	/*
	   display block toglie lo spazio di riga sotto l'immagine, che con
	   l'inline-block di vc-foundation-core.css riga 59 lascerebbe una fessura
	   chiara fra la foto e la banda blu.
	   Specificita (0,2,1) contro (0,0,1): vinta a prescindere dall'ordine.
	*/
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--vc-home-rapporto, 500 / 385);
	object-fit: cover;
	object-position: center;

	transition: transform var(--vc-home-durata, 200ms) var(--vc-home-curva, ease);
}

/*
   Zoom molto contenuto: 1.04, dentro l'intervallo 1.03-1.05 chiesto dal
   brief. Sopra 1.05, su una foto larga circa 280px, si vede la perdita di
   nitidezza.
*/
.vc-luogo-scheda:hover .vc-luogo-immagine img,
.vc-luogo-scheda:focus-within .vc-luogo-immagine img,
.vc-home-news:hover .vc-luogo-immagine img,
.vc-home-news:focus-within .vc-luogo-immagine img {
	transform: scale(1.04);
}

/* ---------------------------------------------------------------
   3.3 La didascalia

   Da battere: "#homepage #visitare h2" (2,0,1). Salgo di una sola classe,
   "#homepage #visitare h2.page-title" (2,1,1), che e il minimo necessario:
   piu specificita del necessario rende soltanto piu difficile la prossima
   modifica.
   --------------------------------------------------------------- */
#homepage #visitare h2.page-title {
	margin: 0;
	background-color: var(--vc-home-tessera-fondo, #374a66);

	/*
	   Respiro. Il padding di style.css era 0.5em uniforme e la didascalia
	   sembrava un mattone perche il testo toccava i lati. 0.7rem sopra e
	   sotto, 0.85rem ai lati.
	*/
	padding: 0.7rem 0.85rem;
	border-radius: 0 0 var(--vc-home-raggio, 6px) var(--vc-home-raggio, 6px);

	/*
	   17px fissi, non fluidi, ed e una scelta. Qui la fluidita farebbe danno:
	   il corpo determina l'altezza della banda (vedi il min-height del link,
	   sotto) e un corpo che cambia con il viewport farebbe cambiare l'altezza
	   delle schede a meta di una rampa, con le righe della griglia a float
	   che si riallineano di continuo durante il ridimensionamento.
	*/
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: var(--vc-peso-medio, 600);

	box-shadow: var(--vc-home-ombra-0, 0 0 0 0 rgba(17, 39, 61, 0));
	transition:
		background-color var(--vc-home-durata, 200ms) var(--vc-home-curva, ease),
		box-shadow var(--vc-home-durata, 200ms) var(--vc-home-curva, ease);
}

/*
   IL COLORE DEL LINK. E la correzione descritta in testa al file: oggi e
   #003882 su #374A66, cioe 1.24:1. Bianco su quel blu da 9.00:1.

   Serve una regola dedicata perche il color di style.css sta sull'h2 e i link
   non ereditano il colore: lo prendono da "a, a:visited" (0,0,1). Questo
   selettore e (2,1,2) e vince largamente.
*/
#homepage #visitare h2.page-title > a {
	color: #ffffff;

	/*
	   ALTEZZA COSTANTE, che e la ragione per cui le schede stavano in riga
	   grazie a un height di 4.2em scritto nel markup e ora non lo sono piu.

	   Due righe esatte, troncate se il titolo e piu lungo. E la stessa
	   tecnica gia usata da .vc-news-title in style.css riga 1193, con la
	   stessa coppia di proprieta: quella con prefisso, che e l'unica che i
	   browser implementano davvero, e quella standard per il futuro.

	   min-height 2.6em sono due righe a interlinea 1.3, cioe 44.2px con il
	   corpo qui sopra: un titolo di una riga sola occupa comunque lo spazio
	   di due e la banda ha sempre la stessa altezza. 44.2px sono anche, e non
	   per caso, sopra i 44px che vc-mobile.css sezione 1.8 impone a questo
	   stesso link come bersaglio tattile: quella regola resta soddisfatta e
	   fra i due fogli non c'e nessuna contraddizione.

	   display -webkit-box sostituisce il display block di vc-mobile.css. E
	   necessario, perche line-clamp funziona solo dentro una -webkit-box, e
	   non toglie niente: resta un blocco a tutti gli effetti, quindi il
	   bersaglio tattile non si restringe.
	*/
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.6em;
}

/*
   Il contorno di messa a fuoco del singolo link viene tolto PERCHE E
   SOSTITUITO, non perche da fastidio: quando questo link ha il fuoco,
   l'article che lo contiene soddisfa :focus-within e disegna il contorno da
   3px attorno all'intera scheda (sezione 3.1). I due stati coincidono
   sempre, non esiste un istante in cui il fuoco sia invisibile. Lasciarli
   entrambi darebbe due contorni concentrici a 15px l'uno dall'altro.
*/
#homepage #visitare h2.page-title > a:focus,
#homepage .vc-home-news h2.page-title > a:focus {
	outline: none;
}

/*
   Stato al passaggio. La banda si scurisce (il bianco del testo ci sta sopra
   a 15.20:1) e le due meta della scheda prendono la stessa ombra.

   Perche funziona senza un contenitore, che nel markup non c'e: l'ombra
   dell'immagine e coperta in basso dal fondo opaco della banda, che nel
   flusso viene dopo; quella della banda esce ai lati e sotto. Insieme fanno
   un'unica ombra continua attorno alla tessera.
*/
.vc-luogo-scheda:hover .vc-luogo-immagine,
.vc-luogo-scheda:focus-within .vc-luogo-immagine {
	box-shadow: var(--vc-home-ombra, 0 8px 20px 0 rgba(17, 39, 61, 0.22));
}

#homepage #visitare .vc-luogo-scheda:hover h2.page-title,
#homepage #visitare .vc-luogo-scheda:focus-within h2.page-title {
	background-color: var(--vc-home-tessera-fondo-2, #11273d);
	box-shadow: var(--vc-home-ombra, 0 8px 20px 0 rgba(17, 39, 61, 0.22));
}

/*
   La entry-content della scheda non deve aggiungere spazio fra l'immagine e
   la banda: qualsiasi margine qui spezzerebbe la tessera in due pezzi.
*/
.vc-luogo-scheda .entry-content,
.vc-home-news .entry-content {
	margin: 0;
}

/* ===============================================================
   4. Schede delle notizie — .vc-home-news (12, tre per riga)

   Stessa struttura di markup, trattamento deliberatamente diverso: sono
   notizie, non luoghi. Nessuna banda piena; l'immagine sta su una tessera
   chiara con tutti e quattro gli angoli raccordati, e il titolo e testo scuro
   su bianco sotto un filetto ambra che richiama in scala ridotta la barretta
   dei titoli di sezione. Cosi le due griglie si riconoscono come parte dello
   stesso sistema pur restando distinguibili a colpo d'occhio.

   Il titolo qui NON eredita la banda blu, perche "#homepage #visitare h2" e
   legato a quell'id e #home-news e un altro. Cade pero sotto
   "#homepage h2 { font-size:1em }": senza questa sezione i titoli delle
   notizie resterebbero a 16px neri, che e quello che si vede oggi.
   =============================================================== */

.vc-home-news {
	margin-bottom: var(--vc-home-ritmo, 1.875rem);

	/*
	   Il display flex, flex-direction column e min-height 380px che stavano
	   nell'attributo style del markup vecchio.

	   Cosa fanno davvero, misurato. Con l'aspect-ratio costante della sezione
	   3.2 e il titolo troncato a due righe le schede hanno gia altezza
	   identica dentro la stessa riga, perche dentro una riga tutte le colonne
	   sono larghe uguale. Il min-height NON e quindi cio che allinea la
	   griglia: e una rete di sicurezza per il caso in cui un'immagine non
	   carichi affatto. Lo rimetto perche era li e perche costa zero, non
	   perche regga il layout.

	   Il flex in colonna serve invece a una cosa concreta: con flex 1 sulla
	   entry-content il titolo si appoggia allo spazio disponibile invece di
	   lasciare un vuoto in fondo alla scheda.

	   Nota: flex qui e sull'article, cioe DENTRO la colonna, e non tocca il
	   modello a float della griglia. Un elemento flottante resta un
	   contenitore flex senza smettere di flottare.
	*/
	display: flex;
	flex-direction: column;
	min-height: 380px;

	transition: transform var(--vc-home-durata, 200ms) var(--vc-home-curva, ease);
}

.vc-home-news:hover,
.vc-home-news:focus-within {
	transform: translateY(-3px);
}

.vc-home-news .vc-luogo-immagine {
	display: block;
	overflow: hidden;
	border-radius: var(--vc-home-raggio, 6px);
	background-color: var(--vc-colore-bordo-tenue, #eeeeee);
	box-shadow: var(--vc-home-ombra-0, 0 0 0 0 rgba(17, 39, 61, 0));
	transition: box-shadow var(--vc-home-durata, 200ms) var(--vc-home-curva, ease);
}

.vc-home-news:hover .vc-luogo-immagine,
.vc-home-news:focus-within .vc-luogo-immagine {
	box-shadow: var(--vc-home-ombra, 0 8px 20px 0 rgba(17, 39, 61, 0.22));
}

/* La entry-content occupa lo spazio che avanza: e la meta utile del flex. */
.vc-home-news .entry-content {
	flex: 1 1 auto;
	padding-top: 0.7rem;
}

/* (1,2,1) contro (1,0,1) di "#homepage h2": vinta. */
#homepage .vc-home-news h2.page-title {
	margin: 0;
	padding-top: 0.55rem;
	border-top: 3px solid var(--vc-home-segno, #f39207);
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: var(--vc-peso-medio, 600);
}

#homepage .vc-home-news h2.page-title > a {
	color: var(--vc-home-testo-forte, #11273d); /* 15.20:1 su bianco */

	/* Stessa tecnica e stessa altezza costante delle didascalie dei luoghi:
	   due righe, troncate, minimo 2.6em che e anche il bersaglio tattile. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.6em;

	transition: color var(--vc-home-durata, 200ms) var(--vc-home-curva, ease);
}

#homepage .vc-home-news:hover h2.page-title > a,
#homepage .vc-home-news:focus-within h2.page-title > a {
	color: var(--vc-home-fuoco, #007095); /* 5.60:1 su bianco */
}

/* ===============================================================
   5. Slider

   COSA HO POTUTO MISURARE E COSA NO, perche la differenza conta.
   Il markup e generato da MetaSlider, che e un plugin: il suo CSS non sta in
   questo repository e non l'ho potuto leggere. Cio che e certo, perche il
   tema lo usa gia, e che l'elemento porta id metaslider_8 e che si tratta di
   flexslider (style.css riga 969 nasconde .flex-direction-nav, che e una
   classe di flexslider). Le uniche due regole del tema sullo slider sono
   quella e, a riga 560 dentro la media query medium-up, un max-width al 100%
   e un height al 100% sui li.

   Di conseguenza qui c'e il minimo indispensabile, e nulla che tocchi il
   telefono: F4 ha gia accertato che sotto i 641px lo slider e a posto.
   =============================================================== */

/*
   Nessuno spazio bianco sotto. L'immagine di uno slide e inline-block per
   vc-foundation-core.css riga 59, e un elemento inline-block si porta dietro
   lo spazio del discendente della riga di testo. Portandola a block la
   fessura sparisce. Specificita (1,0,1), quindi vince sull'img generico
   qualunque sia l'ordine di caricamento fra tema e plugin.
   E anche cio che flexslider fa gia per conto suo: se il CSS del plugin
   arriva, questa regola e un doppione innocuo; se non arriva, e la
   correzione.
*/
#metaslider_8 img {
	display: block;
}

/*
   Altezza massima, SOLO da 1025px in su.

   Perche serve: la riga dello slider e .fullWidth, cioe senza il max-width di
   80.8rem, quindi su un monitor da 2560px l'immagine si distende per tutta la
   larghezza e con essa cresce l'altezza. Il risultato e una fascia che si
   mangia lo schermo intero e spinge sotto la piega tutto il resto della
   homepage.

   30rem sono 480px: su un portatile da 1440x900 restano circa 300px di pagina
   visibile sotto lo slider, cioe si vede che il sito continua. object-fit
   cover fa il ritaglio al centro invece di deformare.

   E IL SINGOLO NUMERO DA GUARDARE A OCCHIO di questo foglio: se le
   diapositive hanno il soggetto molto in alto o molto in basso, il ritaglio
   centrale puo tagliarlo. In quel caso si cambia object-position, oppure si
   toglie questo blocco e non succede nient'altro.
*/
@media only screen and (min-width: 64.063em) {

	#metaslider_8 img {
		max-height: 30rem;
		object-fit: cover;
		object-position: center;
	}
}

/* ===============================================================
   6. Coda social

   IL MINIMO INDISPENSABILE, come chiede il brief, ma un minimo che serve.
   style.css riga 1256 da a .vc-social-simple-title un font-size di 1.7rem, e
   quella regola su questa pagina NON HA MAI AVUTO EFFETTO:
   .vc-social-simple-title e (0,1,0), "#homepage h2" e (1,0,1), e un id batte
   qualsiasi numero di classi. I due titoli Facebook e Instagram sono a 16px.
   Vale anche per la riduzione a 1.4rem dentro la media query small, altrimenti
   inutile.

   L'allineamento fra i due riquadri e gia risolto in style.css, che da 760px
   all'iframe di Facebook e min-height 760px al contenitore di Instagram: non
   lo tocco.
   =============================================================== */

#homepage .vc-social-simple-title {
	/* Stessa famiglia dei titoli di sezione, un gradino sotto: sono due
	   sottotitoli affiancati, non due nuove sezioni. 20 -> 27px, con la
	   stessa rampa 320-641px del resto del foglio. */
	font-size: clamp(1.25rem, 0.8139rem + 2.1807vw, 1.6875rem); /* 20 -> 27px */
	line-height: var(--vc-interlinea-stretta, 1.25);
	font-weight: var(--vc-peso-grassetto, 700);
	color: var(--vc-home-testo-forte, #11273d);
	margin: 0 0 0.65rem;
}

/* Stacco dalla griglia delle notizie, coerente con il ritmo del resto della
   pagina invece degli 1.6rem di style.css. */
#homepage .vc-social-simple {
	margin-top: var(--vc-spazio-6, 2.8125rem);
}

#homepage .vc-social-simple-link a {
	color: var(--vc-home-fuoco, #007095); /* 5.60:1 su bianco */
}

/* ===============================================================
   7. Movimento ridotto

   Obbligatorio, e va per ultimo: le media query non aggiungono specificita,
   quindi queste regole vincono sulle precedenti solo perche arrivano dopo.

   Si azzerano le DURATE, non i comportamenti: il sollevamento, lo zoom, il
   cambio di colore e l'ombra continuano ad accadere, semplicemente accadono
   subito. Nessuno stato diventa irraggiungibile o invisibile, e in
   particolare il contorno di messa a fuoco non ha mai avuto una transizione.
   =============================================================== */

@media (prefers-reduced-motion: reduce) {

	.vc-luogo-scheda,
	.vc-home-news,
	.vc-luogo-scheda .vc-luogo-immagine,
	.vc-home-news .vc-luogo-immagine,
	.vc-luogo-scheda .vc-luogo-immagine img,
	.vc-home-news .vc-luogo-immagine img,
	#homepage #visitare h2.page-title,
	#homepage .vc-home-news h2.page-title > a {
		transition-duration: 0.01ms;
		transition-delay: 0s;
		animation-duration: 0.01ms;
		animation-delay: 0s;
		animation-iteration-count: 1;
	}
}