/* ==========================================================================
   HOME — MOBILE (solo le specificita' della home)
   Le regole generiche — copertina 4:3, proporzioni foto, ordine e respiro
   dei titoli — stanno in pagine-mobile.css, caricato dal layout su tutte le
   pagine. Qui resta cio' che esiste solo nella home: il poster dell'hero
   video, la gallery a scorrimento, il tasto audio.

   Caricato da pages/home.htm (dopo tutti i <link> del layout, quindi vince
   la cascata per ordine). Scope: .pagina-home / .hero-video, per non
   toccare le copertine di page-cover.htm che condividono le stesse classi.
   ========================================================================== */


/* ==========================================================================
   POSTER DELL'HERO — vale a ogni larghezza, non solo su mobile.
   Prima: l'attributo poster="" del <video>, opaco (niente fetchpriority,
   niente srcset) e il video con classe .lazy, che con LazyLoad threshold:0
   (main.js:170) faceva partire i 22 MB insieme al poster.
   Ora: il poster e' un <img> vero, dipinto al primo paint, ed e' l'elemento
   LCP della pagina; il video parte solo dopo (script in pages/home.htm).
   ========================================================================== */

.pagina-home .hero-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	transition: opacity .6s ease;
}

/* la classe la mette lo script all'evento `playing`, cioe' solo quando il
   video sta davvero mostrando fotogrammi: evita il lampo nero fra i due */
.pagina-home .hero-poster.hero-poster-nascosto {
	opacity: 0;
}

/* Il poster sta sopra il video senza bisogno di z-index: e' posizionato, il
   video no, e gli elementi posizionati dipingono sopra quelli in flusso.
   I due gradienti (z-index:1, style.css:119-120) restano sopra entrambi. */


/* ==========================================================================
   GALLERY A SCORRIMENTO — rapporto fisso anche su desktop
   Prima: .home-gallery-item aveva height:230px (pages/home.htm) e il
   .mask-obj interno solo height:100%, senza aspect-ratio: era l'unico
   contenitore foto del tema il cui rapporto dipendeva dalla larghezza dello
   schermo (1,14:1 a 1400px, 1,71:1 su un iPhone).
   ========================================================================== */

.pagina-home .home-gallery-item {
	height: auto;
	aspect-ratio: var(--pg-foto-ratio);
}

.pagina-home .home-gallery-item .mask-obj {
	height: 100%;
}


@media all and (max-width: 812px) {

/* Il tasto audio era position:fixed (style.css:151) con bottom:40px
   (hero-cartolina.css:191-193): con l'hero alto ~378px sarebbe rimasto
   incollato in fondo allo schermo per tutta la pagina (body.scroll-page,
   che doveva nasconderlo, non viene mai aggiunta da nessuno). Riposizionato
   dentro l'area video — e comunque nascosto dalla regola successiva finche'
   il video mobile non avra' una traccia audio. */
.pagina-home .cover-pagina.hero-cartolina.hero-video .cover-content-wrapper .wrapper-content-button {
	position: absolute;
	top: auto;
	left: auto;
	right: 10px;
	bottom: 10px;
	transform: none;
	z-index: 2;
}

/* Su telefono il tasto audio non ha nulla da fare: oggi il video non c'e'
   proprio (si vede il poster: la sorgente mobile e' servita solo ai phone e
   il file non esiste ancora), e quando arrivera' sara' codificato senza
   traccia audio (-an). Torna visibile ricodificando con -c:a aac. */
.pagina-home .cover-pagina.hero-cartolina.hero-video .video-button-wrapper {
	display: none;
}

/* .cp-caption e' vuota (pages/home.htm: tre div senza contenuto). Nascosta
   finche' non arrivano i testi, cosi' non intercetta i tap sul video. */
.pagina-home .cover-pagina.hero-cartolina.hero-video .cp-caption {
	display: none;
}

}