/*
 * Blocchi home fuori dal template di pagina — Egomedia 2026
 *
 * In style.css queste regole erano scopate su .page-template-page-template-home,
 * body class che esiste solo sul vecchio template PHP. Qui sono ri-scopate su
 * .ego-home-blocks, aggiunta automaticamente alle pagine che usano gli shortcode.
 *
 * Le altre regole scopate sul template (#main-content, .container, #left-area)
 * servivano a neutralizzare il wrapper di Divi e NON vanno portate qui: su una
 * pagina costruita col Builder le sezioni Divi gestiscono gia' la larghezza piena.
 */

.ego-home-blocks .immagine {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ego-home-blocks #egoslider .immagine {
	width: 100%;
	height: 90vh;
	overflow: hidden;
	z-index: 1111;
}

/* Hamburger bianco: serve solo se l'header sta sopra l'hero a tutta altezza. */
.ego-home-blocks .mobile_menu_bar::before {
	color: #fff !important;
}

/*
 * ONDE — da PNG a SVG
 *
 * I PNG erano 1920px fissi con background-repeat:no-repeat e nessun
 * background-size: oltre i 1920px di viewport restava un vuoto netto a
 * destra, sotto venivano tagliati. Il bianco era cotto dentro l'immagine,
 * quindi cambiare lo sfondo della sezione lasciava l'onda del colore sbagliato.
 *
 * Ora l'SVG fa da maschera (preserveAspectRatio="none", si adatta a qualsiasi
 * larghezza) e il colore e' un background, cioe' una variabile sovrascrivibile
 * dal campo CSS personalizzato della sezione in Divi:
 *     --ego-onda-colore: #f4f4f4;
 *
 * Tutto scopato su .ego-home-blocks per non toccare la home di produzione,
 * che continua a usare i PNG finche' non facciamo lo switch.
 */

/*
 * Nella sezione cartina le onde sono pseudo-elementi della sezione stessa.
 * Come <div> dentro un modulo Code finivano ancorate alla colonna Divi, che e'
 * position:relative, invece che alla sezione: uscivano nel punto sbagliato.
 * Nel blocco "Scopri anche" restano div veri, perche' li' il contenitore
 * .bloccoonde e' gia' position:relative e li ancora correttamente.
 */
.ego-home-blocks .cartinahome-sez {
	position: relative;
}

.ego-home-blocks .cartinahome-sez::before,
.ego-home-blocks .cartinahome-sez::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 10;
	pointer-events: none;
}

.ego-home-blocks .bloccoondetop,
.ego-home-blocks .cartinahome-sez::before {
	top: 0;
	height: 90px;
	background: var(--ego-onda-colore, #fff);
	-webkit-mask: url(../images/onde-cartina-top.svg) no-repeat 0 0 / 100% 100%;
	        mask: url(../images/onde-cartina-top.svg) no-repeat 0 0 / 100% 100%;
}

/*
 * L'altezza dichiarata in style.css era 160px per un'immagine alta 104: il PNG
 * stava in cima al box e i 56px sotto erano vuoti. Con la maschera il box va
 * portato all'altezza reale dell'arte, compensando l'offset per non spostare
 * l'onda: prima andava da (fondo sezione - 100px) a (fondo + 4px), e ci resta.
 */
.ego-home-blocks .bloccoondebottom,
.ego-home-blocks .cartinahome-sez::after {
	height: 104px;
	bottom: -4px;
	background: var(--ego-onda-colore, #fff);
	-webkit-mask: url(../images/onde-cartina-bottom.svg) no-repeat 0 0 / 100% 100%;
	        mask: url(../images/onde-cartina-bottom.svg) no-repeat 0 0 / 100% 100%;
}

/*
 * Aggancio dell'hero al bordo alto della finestra.
 *
 * style.css contiene due regole in conflitto per lo stesso elemento:
 *     .page-template-default #et-main-area { position:absolute; top:110px }  (riga 50)
 *     #et-main-area                        { position:absolute; top:0     }  (riga 70)
 *
 * La prima serve alle pagine interne, che devono scansare l'header fisso; la
 * seconda e' quella che prende la vecchia home, il cui template genera una
 * body class propria. Una pagina Divi normale e' page-template-default, quindi
 * ereditava i 110px e l'hero partiva staccato dall'alto.
 *
 * Stessa specificita' della regola di riga 50, ma questo file viene caricato
 * dopo style.css, quindi vince. Nelle media query per mobile #et-main-area
 * torna position:relative e questa regola diventa inerte, come deve.
 */
.ego-home-blocks #et-main-area {
	top: 0;
}