/*
 * Blocco "SYN – Servizi verticali". Plain CSS, nessuna build.
 *
 * NIENTE `padding-inline: var(--syn-gutter)` qui — a differenza di
 * canvas-section/hero-syn/testimonial (sempre `alignfull`, bleed
 * edge-to-edge, gutter reintrodotto a mano), questo blocco NON ha
 * `align: full` di default: resta nel flusso normale di `#main`, che
 * fornisce già il gutter laterale da solo. Un primo giro aveva copiato
 * il pattern "reintroduci il gutter" da quei blocchi per abitudine,
 * raddoppiandolo (gutter di #main + il nostro) — segnalato da Raul,
 * rimosso.
 *
 * `clip-path: inset(0)` sul blocco (NON `overflow: hidden`): puro
 * contenimento locale per la rosetta spinta a destra (`transform:
 * translateX(15%)` più sotto). **`overflow: hidden` era la causa reale
 * per cui `position: sticky` sulla rosetta non funzionava affatto**
 * (segnalato da Raul: restava fissa in alto per l'intera durata dello
 * scroll di pagina, mai "sganciata") — trappola CSS nota ma non ancora
 * incontrata in questo progetto: `overflow` diverso da `visible` su
 * QUALSIASI antenato di un elemento `position:sticky` lo disattiva
 * (l'antenato diventa il contenitore di riferimento per lo sticky, e se
 * quell'antenato stesso non scorre — come qui, `.syn-svv` è dentro il
 * normale flusso di pagina, non ha un proprio scroll — lo sticky non ha
 * nulla a cui agganciarsi). `clip-path: inset(0)` ottiene lo stesso
 * contenimento visivo (ritaglia tutto ciò che esce dal proprio
 * bordo) SENZA creare un contenitore di scroll: lo sticky nei
 * discendenti resta intatto. (Diverso anche dal fix globale `#main >
 * .alignfull` del tema, vedi hero-syn in CLAUDE.md — quello riguarda
 * solo i blocchi `alignfull`, questo non lo è.)
 *
 * `position: sticky` sulla rosetta, agganciata alla colonna sinistra
 * (card): resta visibile per tutta la durata dello scroll del gruppo,
 * non solo decorativa. Tre cose insieme, non basta nessuna da sola —
 * punto 2 CORRETTO dopo un giro sbagliato, vedi CLAUDE.md:
 * 1. Niente `overflow` diverso da `visible` su un antenato (sopra).
 * 2. `align-items: start` su `.syn-svv__inner` + `align-self: start` su
 *    `.syn-svv__rosetta-wrap` stesso (un giro precedente aveva messo
 *    `stretch`, ragionando "la cella deve allungarsi quanto le card per
 *    dare spazio allo sticky" — ESATTAMENTE AL CONTRARIO: `stretch`
 *    stira il wrapper sticky alla stessa altezza del suo containing
 *    block, che quindi NON ha più nessuno spazio di manovra — un
 *    elemento sticky "viaggia" solo se è più BASSO del proprio
 *    containing block. Confermato via DOM dal vivo: con `stretch`,
 *    `rosettaWrap.offsetHeight` risultava identico a
 *    `inner.offsetHeight` — zero differenza, zero movimento possibile,
 *    la rosetta restava quindi incollata in cima per l'intera altezza
 *    della sezione. Con `start`, il wrapper resta alto solo quanto il
 *    proprio contenuto (l'SVG) mentre `.syn-svv__inner` resta comunque
 *    alto quanto la colonna card (più alta) — lo spazio di manovra per
 *    `sticky` è la DIFFERENZA tra le due altezze, non la somma).
 * 3. `top: 15vh` scelto a occhio, non misurato su Figma (il riferimento
 *    era uno screenshot statico, non un file interattivo con scroll
 *    reale).
 *
 * Reveal all'ingresso in viewport via l'attributo [data-animate] —
 * CSS di base (stato nascosto solo con .js-animations-ready su <html>)
 * già definito globalmente in _base.scss del tema, qui non c'è nessuna
 * regola da aggiungere: bastano gli attributi nel markup (render.php) +
 * il mapper generico in core-animations.js. La rosetta ha IN PIÙ una
 * seconda animazione (bloom→verbo→collasso scroll-scrub, riusa pari
 * pari la coreografia di hub-card/hero-syn — vedi
 * assets/src/blocks/servizi-verticali.js) che scrive direttamente
 * l'attributo `transform` di ogni `<g>` (stessa tecnica di
 * hub-visuals.js) — NON un tween GSAP sulla singola copia, quindi
 * nessun bisogno di `transform-box`/transform-origin CSS qui.
 *
 * `overflow: visible` sull'svg (sotto) — un `<svg>` ha `overflow:hidden`
 * di default da user-agent stylesheet, ritaglia qualunque contenuto
 * fuori dal proprio viewBox. hero-syn ha questa stessa riga già da
 * prima (stessa rosetta, stesso rischio) — qui era stata omessa per
 * svista nel primo giro di questo blocco, non una differenza voluta.
 * Segnalato da Raul con uno screenshot (rosetta visibilmente tagliata
 * ai bordi del proprio riquadro) — il riscatto completo
 * dell'animazione sopra (bloom→verbo→collasso al posto del semplice
 * scale) potrebbe già aver risolto la causa di fondo da sola (il
 * tentativo precedente usava GSAP per animare `scale` sulle singole
 * copie insieme a un `transform` SVG già scritto da PHP — combinazione
 * mai verificata dal vivo, possibile causa di posizioni non corrette),
 * ma `overflow:visible` resta comunque giusto da avere a prescindere,
 * difesa in profondità.
 *
 * Colore titolo/sfondo card legato alla forma scelta (attributo
 * data-shape sul blocco, impostato da render.php dal campo ACF
 * "shape") — token in theme.json, vedi commento in render.php sul
 * perché sono NUOVI token e non quelli hub-technology/ecc. già
 * esistenti (ruolo diverso, valori diversi).
 */

.syn-svv {
	clip-path: inset(0);
}

.syn-svv[data-shape="h1"] {
	--svv-card-title: var(--wp--preset--color--hub-technology-title);
	--svv-card-bg: var(--wp--preset--color--hub-technology-bg);
}

.syn-svv[data-shape="h2"] {
	--svv-card-title: var(--wp--preset--color--hub-marketing-title);
	--svv-card-bg: var(--wp--preset--color--hub-marketing-bg);
}

.syn-svv[data-shape="h3"] {
	--svv-card-title: var(--wp--preset--color--hub-crm-title);
	--svv-card-bg: var(--wp--preset--color--hub-crm-bg);
}

.syn-svv[data-shape="h4"] {
	--svv-card-title: var(--wp--preset--color--hub-commerce-title);
	--svv-card-bg: var(--wp--preset--color--hub-commerce-bg);
}

.syn-svv__header {
	margin-bottom: var(--wp--preset--spacing--xl);
}

.syn-svv__inner {
	display: grid;
	grid-template-columns: 55fr 45fr;
	align-items: start;
	gap: var(--wp--preset--spacing--lg);
}

.syn-svv__cards {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	position: relative;
	z-index: 1; /* sopra la rosetta */
}

.syn-svv__card {
	box-sizing: border-box;
	background-color: var(--svv-card-bg, var(--wp--preset--color--grey-light));
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--syn-radius-sm);
}

.syn-svv__card-title {
	margin: 0 0 var(--wp--preset--spacing--sm) 0;
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 500;
	color: var(--svv-card-title, var(--wp--preset--color--accent-blue));
}

.syn-svv__card-description {
	margin: 0 0 var(--wp--preset--spacing--md) 0;
	color: var(--wp--preset--color--grey-taupe);
	line-height: 1.6;
}

.syn-svv__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 500;
	color: var(--wp--preset--color--black-primary);
	text-decoration: none;
}

.syn-svv__card-cta:hover {
	text-decoration: underline;
}

.syn-svv__empty-notice {
	opacity: .6;
	font-style: italic;
}

/* Rosetta: sticky, spinta oltre il bordo destro (clip-path:inset(0) su
 * .syn-svv la clippa — vedi nota in cima al file sul perché non
 * overflow:hidden), dietro le card. Stroke neutro via currentColor
 * (vedi render.php) invece del colore acceso che quella forma ha
 * nativamente nel suo Hub — a differenza del titolo/sfondo delle card
 * (sopra), che invece SONO legati alla forma scelta. */
.syn-svv__rosetta-wrap {
	position: sticky;
	align-self: start;
	top: 15vh;
	z-index: 0;
	color: var(--wp--preset--color--grey-taupe);
	transform: translateX(15%);
	display: flex;
	align-items: flex-start;
	justify-content: flex-end; /* verso il bordo della finestra, non appoggiata alle card — richiesto da Raul */
}

.syn-svv__rosetta-wrap svg {
	display: block;
	width: 100%;
	max-width: min(650px, 90vw);
	height: auto;
	opacity: 0.7;
	overflow: visible;
}

/* Sotto desktop: una colonna, rosetta NON nascosta (il Figma mobile la
 * mostra chiaramente, sopra le card) — niente sticky/offset, solo
 * centrata sopra l'elenco. Tablet eredita lo stesso trattamento del
 * mobile: il Figma forniva solo i due riferimenti desktop/mobile,
 * nessuna verifica fatta per la fascia intermedia 768-1023px. */
@media (max-width: 1023px) { /* bp: fino a tablet (< desktop 1024) — vedi _breakpoints.scss del tema */
	.syn-svv__inner {
		grid-template-columns: 1fr;
	}

	.syn-svv__rosetta-wrap {
		position: static;
		transform: none;
		order: -1;
		justify-content: center;
		margin-bottom: var(--wp--preset--spacing--lg);
	}

	.syn-svv__rosetta-wrap svg {
		max-width: min(400px, 80vw);
	}
}