/*
 * Blocco "SYN – Hero Hub". Plain CSS, nessuna build — il motore che
 * disegna canvas/rosetta è in assets/src/blocks/hub-visuals.js (stesso
 * file condiviso con hub-card/canvas-section), quello sì passa da Vite.
 *
 * Valori verificati dal vivo su synesthesia-lab.vercel.app/preview/hero
 * (DOM/CSS calcolato) — non dedotti dallo screenshot Figma, vedi
 * render.php.
 *
 * overflow:hidden sul blocco (CORRETTO — un giro precedente diceva
 * esplicitamente "NIENTE overflow:hidden", ragionando che il clipping
 * orizzontale a livello di pagina del fix globale .alignfull in
 * _base.scss del tema bastasse): Raul ha verificato dal vivo che la
 * rosetta usciva visibilmente dal suo contenitore — quel fix globale è
 * `#main > .alignfull`, funziona solo se l'elemento è figlio DIRETTO di
 * #main, non in ogni possibile punto in cui il blocco può finire
 * annidato. overflow:hidden qui rende il contenimento indipendente da
 * quel meccanismo esterno. Il bordo di clip ora è quello della hero
 * stessa, non più il viewport: visivamente quasi identico quando
 * l'allineamento "a tutta larghezza" funziona come previsto (la hero È
 * larga quanto il viewport in quel caso), diverso solo nel caso limite
 * che ha causato il problema.
 */

.hero-syn {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	display: flex;
	align-items: center;
	min-height: 100svh;
}

/* Bug segnalato da Raul (screenshot dell'inserter alla mano): al passaggio
 * del mouse su "SYN – Hero Hub" nella libreria blocchi, l'anteprima si
 * espandeva fino all'altezza della finestra del browser invece di restare
 * un riquadro piccolo. PRIMO TENTATIVO SBAGLIATO (verificato dal vivo da
 * Raul, non funzionava): selettore `.block-editor-block-preview__content
 * .hero-syn` — nome di classe indovinato, mai verificato contro il DOM
 * reale.
 *
 * Causa reale, trovata ispezionando dal vivo con la console del browser
 * (l'anteprima dell'inserter è una porzione di canvas renderizzata dentro
 * un <iframe>, invisibile al normale ispeziona-elemento perché è un
 * documento separato — bisogna cercare dentro `iframe.contentDocument`):
 * l'anteprima vive in un iframe dedicato il cui `<html>` porta la classe
 * `block-editor-block-preview__content-iframe` (non una div contenitore
 * come ipotizzato, e con `-iframe` nel nome — selettore diverso da quello
 * del primo tentativo). Dentro quell'iframe Gutenberg renderizza il
 * blocco a un'altezza fissa enorme (2000px, misurato live con
 * `getComputedStyle` — tecnica nota: renderizza a piena taglia, poi scala
 * l'anteprima in proporzione al contenuto misurato) PRIMA di scalare
 * visivamente il risultato: `min-height:100svh` lì dentro non vale "la
 * finestra del browser" né "il riquadro piccolo dell'anteprima", vale
 * SEMPRE 2000px — il blocco si gonfia a quell'altezza, Gutenberg scala
 * l'anteprima mantenendo quella proporzione abnorme.
 *
 * Fix verificato: selettore sul vero `<html>` dell'iframe di anteprima.
 * Editing reale nel canvas e frontend restano a 100svh invariato, qui
 * serve solo un'anteprima leggibile e contenuta. */
.block-editor-block-preview__content-iframe .hero-syn {
	min-height: 300px;
}

.hero-syn__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: -2;
	/* NIENTE image-rendering:pixelated (rimosso, fix qualità sfumature dopo
	 * il fix performance) — il default del browser (bilineare) ammorbidisce
	 * l'ingrandimento del buffer senza costo CPU. width/height
	 * dell'attributo <canvas> in render.php sono solo il valore iniziale
	 * per il primo paint — hub-visuals.js lo riadatta subito alle
	 * proporzioni reali dell'elemento (fitBuffer()). */
}

/* Offset verificato: top:50% + translateY(-42%) (non -50%) sposta la
 * rosetta leggermente SOTTO il centro verticale esatto — valore confermato
 * contro il riferimento, non un arrotondamento. right:-6cqw la fa partire
 * da fuori del bordo destro della hero (il centro della rosetta resta
 * oltre quel bordo) — voluto, ora clippato da overflow:hidden su
 * .hero-syn (vedi nota in cima al file) invece di lasciarla uscire fino
 * al bordo del viewport. Era -10cqw, ridotto da Raul su verifica diretta.
 * Unità cqw (non vw): si ridimensiona in base alla larghezza della HERO
 * stessa (container-type:inline-size su .hero-syn), non del viewport —
 * resta coerente indipendentemente da dove il blocco finisce annidato.
 * Tetto del clamp 1000px (era 1240px, ridotto da Raul) — floor 620px e
 * 64cqw invariati. */
.hero-syn__rosetta {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -6cqw;
	width: clamp(620px, 64cqw, 1000px);
	transform: translateY(-42%);
	opacity: var(--hub-rosetta-opacity);
	pointer-events: none;
}

.hero-syn__rosetta svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* position:static (non relative/z-index positivo come canvas-section):
 * canvas e rosetta hanno già z-index NEGATIVO, quindi il contenuto si
 * dipinge sopra restando nel flusso normale, senza bisogno di crearsi un
 * proprio stacking context — a differenza di canvas-section, dove il
 * canvas di sfondo non ha z-index negativo e serve position:relative +
 * z-index:1 sul contenuto per restare sopra. */
.hero-syn__content {
	position: static;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--lg);
	max-width: 57%;
	padding-inline: var(--syn-gutter);
}

@media (max-width: 767px) { /* bp: solo mobile (< tablet 768) — vedi _breakpoints.scss del tema */
	/* L'altezza della hero resta 100svh come su desktop, nessun override
	 * (vedi nota in alto al file — primo giro sbagliato su questo punto,
	 * corretto dopo verifica di Raul su screenshot reale).
	 *
	 * La rosetta invece SERVE un override qui: la formula desktop
	 * (right:-10cqw, translateY(-42%)) è tarata su un contenitore molto
	 * largo — su un hero stretto (container-type:inline-size) la spinge
	 * troppo fuori a destra e troppo in basso rispetto al riferimento
	 * Figma. Valori verificati da Raul in dev tools direttamente su un
	 * device mobile reale: right:-42cqw, translateY(-5%) (quasi centrata
	 * verticalmente, non più spostata sotto il centro). width resta
	 * invariato (clamp(620px, 64cqw, 1240px) già dava un risultato
	 * accettabile, non toccato). Essendo cqw/percentuale (non px fissi),
	 * questi valori si ridimensionano già da soli con la larghezza del
	 * contenitore in tutta la fascia mobile (320-767px) — nessuna
	 * interpolazione aggiuntiva per singola larghezza, verificato però
	 * SOLO su un device (~390-430px), non sull'intero intervallo: da
	 * ricontrollare se emergono problemi ai due estremi (telefoni molto
	 * piccoli o vicini ai 767px). Tablet (768-1023px) non toccato, eredita
	 * ancora la formula desktop — nessuna verifica fatta in quella fascia. */
	.hero-syn__rosetta {
		right: -42cqw;
		transform: translateY(-5%);
	}

	.hero-syn__content {
		max-width: 100%;
	}
}