/**
 * Hero — aspetto. BLOCCO NUOVO, non un porting.
 *
 * ⚠ QUI NON C'È NIENTE DA COPIARE, ed è una differenza importante rispetto ad Accordion,
 * TextImage, Tabs e Icon Boxes.
 *
 * In elewidget un widget `Hero` esiste (355 righe di PHP, 205 di CSS), ma sul sito non lo
 * usa NESSUNA pagina viva: una pagina cestinata e 101 revisioni della stessa. È un
 * esperimento che non è mai andato in produzione, e ricalcarne il markup vorrebbe dire
 * ereditare le scelte di qualcosa che non è stato messo alla prova.
 *
 * L'hero che si vede oggi sul sito è assemblato con i widget NATIVI di Elementor —
 * heading, text-editor, button, image dentro dei container: non c'è nessun contratto di
 * markup da rispettare, e nessuna pagina da far migrare verso questo blocco.
 *
 * Quindi la forma è quella che serve, e i valori vengono dalla scala tipografica del tema
 * (`--title--big`, `--text--normal`…), non da misure prese a occhio: è quella scala a
 * tenere l'hero coerente col resto del sito.
 *
 * LO SCOPE. Tutto prefissato `.se-gjs-page`, che esiste sia sul frontend sia nel canvas.
 */

.se-gjs-page .seHero {
	display: flex;
	align-items: center;
	gap: 3rem;
	flex-wrap: wrap;
	width: 100%;
}

/* Le due colonne. `flex-basis` in percentuale e non in pixel: è la misura che regge il
   ridimensionamento con la maniglia, che scrive proprio una quota. */
.se-gjs-page .seHero__testo {
	flex: 1 1 45%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.se-gjs-page .seHero__media {
	flex: 1 1 45%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* L'immagine si adatta alla colonna e non viene mai ritagliata: stessa regola del
   TextImage, e per la stessa ragione — la colonna la misura il contenuto, non un numero
   scritto da qualche parte. */
/* Il video si comporta come l'immagine: stessa misura, stessi angoli. Le due regole
   stanno insieme perché sono la stessa scelta — quale dei due si vede lo decide il
   pannello, ma quando si vede deve occupare lo stesso posto, o passare da immagine a
   video sposterebbe tutta la colonna.
   `display: block` sul video toglie la riga di testo che un elemento inline si porta
   dietro: quel mezzo pixel sotto si vedrebbe come un filo di sfondo. */
.se-gjs-page .seHero__media video {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

.se-gjs-page .seHero__media img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

.se-gjs-page .seHero__occhiello {
	font-size: var(--text--normal, 18px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #4a5568;
	margin: 0 0 1rem;
}

.se-gjs-page .seHero__titolo {
	font-size: var(--title--big, 60px);
	font-weight: 600;
	line-height: 1.06;
	margin: 0 0 1.5rem;
}

.se-gjs-page .seHero__testo-corpo {
	width: 100%;
}

.se-gjs-page .seHero__testo-corpo p {
	font-size: var(--text--normal, 18px);
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 1rem;
}

.se-gjs-page .seHero__testo-corpo p:last-child {
	margin-bottom: 0;
}

.se-gjs-page .seHero__azione {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	margin-top: 1.5rem;
}

/* ⚠ L'ASPETTO DEL PULSANTE sta in css/se-builder-bottoni.css, insieme a quello del
   TextImage e del blocco Button di base: un proprietario solo per il pulsante del sito.
   Qui non resta niente da dichiarare — la classe `seHero__bottone` è elencata là. */
/* Testo a destra e immagine a sinistra. Come nel TextImage è `row-reverse`: si inverte
   l'ordine visivo senza toccare il markup, quindi senza spostare contenuto. */
.se-gjs-page .seHero.media-testo {
	flex-direction: row-reverse;
}

/* Sotto i 991px le due colonne si impilano. `align-items: stretch` e non il `center`
   della regola di base: in colonna quell'asse diventa l'orizzontale, e con `center` il
   testo si stringerebbe sulla propria misura invece di prendere la larghezza. */
@media screen and (max-width: 991px) {
	.se-gjs-page .seHero {
		flex-direction: column;
		align-items: stretch;
		gap: 2rem;
		flex-wrap: nowrap;
	}

	.se-gjs-page .seHero.media-testo {
		flex-direction: column;
	}

	/* ⚠ `width: 100%` OLTRE a `flex`, e non è ridondante.
	   In colonna l'asse trasversale è quello orizzontale: se qualcosa impedisce lo
	   `stretch` — per esempio un `align-items: center` rimasto in una regola per-id di un
	   blocco salvato prima — la colonna si stringe sul contenuto. E la colonna del media
	   contiene un video con `max-width: 100%`: si misurerebbero a vicenda, il conto si
	   chiude a zero o sulla misura intrinseca del file, e il video esce dallo schermo.
	   Una larghezza dichiarata rompe il cerchio a prescindere da chi vince sull'allineamento. */
	.se-gjs-page .seHero__testo,
	.se-gjs-page .seHero__media {
		flex: 1 1 100%;
		width: 100%;
	}

	.se-gjs-page .seHero__titolo {
		font-size: var(--title--normal, 40px);
	}
}