/*
 * Blocco "SYN – Case Studies" — coverflow Swiper.js. Stessa base tecnica
 * di Testimonial (card attiva più larga via CSS, il resto lo gestisce
 * case-studies.js), con due differenze di layout volute:
 * - centeredSlides:true (qui la card attiva è sempre al centro, non a
 *   sinistra): il gutter quindi è simmetrico, niente margine negativo
 *   come in Testimonial.
 * - align-items:center sul wrapper, combinato con uno "slot" per il
 *   titolo di ALTEZZA COSTANTE su OGNI card, visibile solo su quella
 *   attiva (visibility, non display — vedi .syn-case-studies__title più
 *   sotto): quando ogni card aggiunge la STESSA costante C alla propria
 *   altezza (immagine_i + C), il centraggio di align-items:center sposta
 *   ogni card di (maxImmagine - immagine_i)/2 dal centro riga — la C si
 *   elide nel calcolo, quindi il centro VERTICALE DELL'IMMAGINE risulta
 *   identico per tutte le card (sempre maxImmagine/2), indipendentemente
 *   da quale sia attiva. Niente position:absolute né overflow-y:visible
 *   (provati entrambi, scartati): lo slot resta sempre in flusso, quindi
 *   non serve mai togliere il clipping orizzontale di Swiper per fargli
 *   spazio, e il titolo non sconfina mai nel contenuto successivo.
 */

.syn-case-studies {
	/* Ancora di posizionamento per le frecce (position:absolute, vedi
	 * sotto) — niente wrapper dedicato apposta: il carosello resta
	 * full-bleed fino ai bordi reali del browser, non solo del gutter. */
	position: relative;
}

.syn-case-studies__header {
	padding-inline: var(--syn-gutter);
	margin-bottom: var(--wp--preset--spacing--xl);
}

/* Bottone "Vedi tutti" allineato verticalmente al centro del blocco
 * titolo, non in cima (default "start" di .syn-intestazione__columns) —
 * override scoperto solo per questa istanza, l'Intestazione condivisa
 * resta invariata altrove. */
.syn-case-studies .syn-intestazione__columns {
	align-items: center;
}

.syn-case-studies__cta-column {
	display: flex;
	justify-content: flex-end;
}

.syn-case-studies__swiper {
	/* Nasconde solo le clonazioni del loop fuori dai bordi orizzontali —
	 * il titolo (vedi .syn-case-studies__title) ora resta sempre in
	 * flusso e dentro l'altezza reale della riga, quindi non serve più
	 * alcuna eccezione verticale qui. */
	overflow: hidden;
	/* Unità cqw per --cs-active-w qui sotto: percentuali della larghezza
	 * del carosello, come le larghezze % delle card. */
	container-type: inline-size;
	--cs-active-w: 27cqw; /* = larghezza di .swiper-slide-active, per breakpoint (vedi sotto) */
	/* Abbassamento delle card laterali (Figma): card vicine e lontane
	 * condividono lo stesso centro verticale, più in basso di quello della
	 * card attiva. Nel mock lo scarto è ~6,8% dell'altezza dell'immagine
	 * attiva, ma lì le card vicine sono più piccole (≈70% dell'attiva, qui
	 * ≈86%): con 6,8% il loro fondo finiva a filo con quello dell'attiva.
	 * 4% lascia il fondo delle vicine un po' più in alto, come nel mock.
	 * Altezza immagine attiva = (larghezza card + bleed di 2×sm) × 5/4,
	 * vedi .syn-case-studies__media/__image. */
	--cs-side-drop: calc(0.04 * (var(--cs-active-w) + 2 * var(--wp--preset--spacing--sm)) * 1.25);
}

/* translate, non transform: transform sull'immagine lo usa già il FLIP di
 * case-studies.js (WAAPI) — le due proprietà si compongono senza
 * sovrascriversi. La transizione accompagna la card che diventa attiva
 * (sale) o smette di esserlo (scende), stessa durata/curva dello
 * scorrimento. */
.syn-case-studies__media {
	transition: translate 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.syn-case-studies__card:not(.swiper-slide-active) .syn-case-studies__media {
	translate: 0 var(--cs-side-drop);
}

@media (prefers-reduced-motion: reduce) {
	.syn-case-studies__media {
		transition: none;
	}
}

.syn-case-studies__swiper .swiper-wrapper {
	align-items: center;
	/* Swiper imposta solo transition-duration inline (vedi speed in
	 * case-studies.js); la curva resta libera da qui, mai sovrascritta.
	 * ease-out pronunciata: parte veloce, rallenta in arrivo — più
	 * "morbida" del default "ease" di swiper/css sulla distanza più lunga
	 * che la card centrale percorre con centeredSlides:true. */
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.syn-case-studies__card {
	/* !important necessario: il CSS di Swiper (bundle Vite separato) si
	 * carica DOPO questo file — stessa nota già verificata su Testimonial. */
	width: 20% !important;
	box-sizing: border-box;
	position: relative; /* ancora per lo z-index qui sotto */
	z-index: 1;
	/* NIENTE padding-inline qui (era var(--spacing--xs), creava il gap
	 * visibile tra le card): la sovrapposizione richiesta nel mock la crea
	 * .syn-case-studies__media "sanguinando" oltre i propri bordi (vedi
	 * sotto), non un margine su QUESTO elemento — Swiper misura proprio
	 * questa box per calcolare slideTo(), un margine negativo qui
	 * confonderebbe le sue tabelle interne (slidesSizesGrid). Il bleed
	 * sul figlio è invece invisibile a Swiper: stesso principio già
	 * sfruttato per il titolo (solo l'ALTEZZA cambia, qui è la larghezza
	 * VISIVA a sporgere senza toccare la larghezza MISURATA).
	 *
	 * NIENTE transition sulla larghezza: Swiper misura le card
	 * nell'istante della chiamata a updateSlides() (vedi case-studies.js),
	 * una transizione CSS le farebbe leggere a metà cammino — stesso bug
	 * reale già risolto una volta su Testimonial. */
}

.syn-case-studies__card.swiper-slide-active {
	/* 34% → 30% → 27%: ogni volta serviva perché l'altezza segue la
	 * larghezza (aspect-ratio fisso) e doveva restare tutto visibile senza
	 * scroll su un MacBook 14". Le altre due fasce qui sotto scalano dello
	 * stesso fattore (×0.9 rispetto ai valori precedenti 22%/26%), non un
	 * numero scelto a sé: tenerle in proporzione evita di dover
	 * ribilanciare a mano il "salto" fra le tre fasce ad ogni ritocco. */
	width: 27% !important;
	z-index: 3; /* sempre sopra a entrambe le vicine, non solo a quella successiva nel DOM */
}

@media (min-width: 1024px) { /* bp: desktop — vedi _breakpoints.scss del tema */
	/* Le due card immediatamente adiacenti alla centrale, leggermente più
	 * grandi delle altre: addolcisce il salto di dimensione (20% → 34%
	 * diretto sembrava brusco) e lo spezza in due passi. Scoperto
	 * esplicitamente SOLO per il desktop — sotto i 1024px le card sono
	 * uniformi per un altro motivo (vedi il blocco @media più sotto), e
	 * una specificità più alta qui le romperebbe a prescindere
	 * dall'ordine nel file.
	 *
	 * :has() per la vicina a sinistra (CSS non ha un combinatore "fratello
	 * precedente" diretto) — supportato da tutti i browser moderni
	 * (Safari 16.4+, Chrome/Edge 105+, Firefox 121+). loop:true di Swiper
	 * riordina fisicamente le slide nel DOM (loopFix in case-studies.js),
	 * quindi i fratelli diretti nel markup sono sempre le card
	 * visivamente adiacenti. */
	.syn-case-studies__card.swiper-slide-active + .syn-case-studies__card,
	.syn-case-studies__card:has(+ .syn-case-studies__card.swiper-slide-active) {
		width: 23% !important; /* scala insieme a 20%/27%, stesso fattore ×0.9 */
		z-index: 2; /* sopra alle card lontane, sotto alla centrale */
	}

	/* Card lontane ancora un po' più in basso delle vicine (circa 3%
	 * dell'altezza dell'immagine attiva in più). Solo desktop: è l'unica
	 * fascia con tre taglie di card. Prima tutte le non attive, poi le due
	 * vicine riportate allo scarto base (selettore più specifico). */
	.syn-case-studies__card:not(.swiper-slide-active) .syn-case-studies__media {
		translate: 0 calc(var(--cs-side-drop) * 1.75);
	}

	.syn-case-studies__card.swiper-slide-active + .syn-case-studies__card .syn-case-studies__media,
	.syn-case-studies__card:has(+ .syn-case-studies__card.swiper-slide-active) .syn-case-studies__media {
		translate: 0 var(--cs-side-drop);
	}
}

.syn-case-studies__media {
	display: block;
	/* Sporge oltre i bordi della card (10px per lato = 20px di
	 * sovrapposizione totale fra due card adiacenti) — un margine
	 * negativo su un box block ad ampiezza automatica ne AUMENTA la
	 * larghezza resa oltre il contenitore, è lo standard CSS per il
	 * "bleed". La card (.syn-case-studies__card, sopra) resta della sua
	 * larghezza reale: Swiper non vede mai questo sconfinamento. */
	margin-inline: calc(-1 * var(--wp--preset--spacing--sm));
	border-radius: var(--syn-radius-sm);
	overflow: hidden; /* clippa l'immagine durante il cambio di larghezza della card */
}

.syn-case-studies__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.syn-case-studies__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--grey-light);
	color: var(--wp--preset--color--grey-taupe);
	font-size: 32px;
}

.syn-case-studies__title {
	/* visibility, non display — su TUTTE le card, non solo quella attiva:
	 * deve restare in flusso e riservare la stessa altezza ovunque (vedi
	 * nota in cima al file sul perché una costante uguale per tutte le
	 * card non rompe l'allineamento). display:none la toglierebbe dal
	 * flusso esattamente come l'averla messa position:absolute — stesso
	 * problema, solo spostato. */
	visibility: hidden;
	margin: var(--wp--preset--spacing--md) 0 0 0;
	text-align: center;
	/* Altezza FISSA di 2 righe, anche quando il titolo ne occupa una: se
	 * l'altezza dipendesse dal testo, cambierebbe a seconda di quale card è
	 * attiva — la riga si ridimensionerebbe in verticale ad ogni scorrimento
	 * e salterebbe la costante su cui si regge il centraggio (vedi nota in
	 * cima al file). Oltre le 2 righe il testo si tronca con "…".
	 * Unità lh = altezza di una riga del font corrente: segue da sé
	 * eventuali cambi di dimensione/interlinea del titolo. */
	height: 2lh;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Unico link della card: avvolge immagine e titolo. */
.syn-case-studies__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Il colore :hover globale dei link (theme.json → grigio taupe) ha la
 * stessa specificità e arriva dopo: senza, il titolo diventerebbe grigio. */
.syn-case-studies__link:hover {
	color: inherit;
}

.syn-case-studies__link:focus-visible {
	/* Contorno nativo tagliato dall'overflow:hidden dello swiper: il focus
	 * si vede come contorno interno all'immagine (outline-offset negativo,
	 * resta dentro al box e non viene ritagliato). */
	outline: none;
}

.syn-case-studies__link:focus-visible .syn-case-studies__media {
	outline: 3px solid var(--wp--preset--color--accent-blue);
	outline-offset: -3px;
}

.syn-case-studies__card.swiper-slide-active .syn-case-studies__title {
	visibility: visible;
}

.syn-case-studies__prev,
.syn-case-studies__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.syn-case-studies__prev {
	left: calc(var(--syn-gutter) - 24px); /* metà della larghezza del bottone (48px) — resta ancorato al bordo del gutter */
	margin-left: var(--syn-gutter); /* senza, risultava attaccato al bordo sinistro del browser (carosello full-bleed, niente padding sul contenitore) */
}

.syn-case-studies__next {
	right: calc(var(--syn-gutter) - 24px);
}

.syn-case-studies__empty-notice {
	opacity: .6;
	font-style: italic;
	padding-inline: var(--syn-gutter);
}

/* --- CTA chat, sotto il carosello --- */
/* Nessun equivalente nativo (pillola bianca + avatar circolare + testo):
 * componente custom, non .syn-button — vedi README per la convenzione
 * "solo i campi/markup senza equivalente comodo escono dal pattern
 * nativo". href="#" volutamente: si aggancia a un widget di chat non
 * ancora integrato. */
.syn-case-studies__chat {
	display: flex;
	justify-content: center;
	padding-inline: var(--syn-gutter);
	margin-top: var(--wp--preset--spacing--xl);
}

.syn-case-studies__chat-link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	height: 52px;
	/* 8px top/bottom = (52px - 36px avatar) / 2, per restare centrato
	 * invece di stirare l'avatar — prima, con height:44px, l'avatar
	 * (36px) + 4px+4px tornava esatto per lo stesso motivo. */
	padding: 8px var(--wp--preset--spacing--md) 8px 8px;
	border-radius: var(--syn-radius-pill);
	border: 1px solid #E8E8E8; /* valori esatti da design, non in scala theme.json */
	background-color: #F6F6F6;
	color: var(--wp--preset--color--black-primary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--body);
	transition: border-color .2s ease;
}

.syn-case-studies__chat-link:hover {
	border-color: var(--wp--preset--color--accent-blue);
}

.syn-case-studies__chat-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.syn-case-studies__chat-avatar--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--grey-light);
	color: var(--wp--preset--color--grey-taupe);
}

@media (max-width: 1023px) { /* bp: fino a tablet (< desktop 1024) — vedi _breakpoints.scss del tema */
	.syn-case-studies__card,
	.syn-case-studies__card.swiper-slide-active {
		/* Larghezze uniformi sotto i 1024px — stessa scelta di Testimonial
		 * e per lo stesso motivo: elimina alla radice il riassestamento a
		 * fine swipe che nasce dalla differenza di larghezza tra card. */
		width: 45% !important;
	}

	/* Card tutte uguali: niente da abbassare. */
	.syn-case-studies__swiper {
		--cs-side-drop: 0px;
	}
}

@media (max-width: 767px) { /* bp: solo mobile (< tablet 768) — vedi _breakpoints.scss del tema */
	.syn-case-studies__swiper {
		--cs-active-w: 82vw;
		--cs-side-drop: calc(0.04 * (var(--cs-active-w) + 2 * var(--wp--preset--spacing--sm)) * 1.25);
	}

	/* La centrale resta più grande anche qui (come su desktop) — a
	 * differenza di Testimonial, qui la rete di sicurezza su
	 * slideChangeTransitionEnd + il FLIP sulla navigazione da bottone
	 * (case-studies.js) coprono già QUALSIASI cambio di larghezza,
	 * desktop o mobile: nessun motivo per tornare a card uniformi qui
	 * solo per evitare il riassestamento a fine swipe, quel problema è
	 * già risolto a monte. */
	.syn-case-studies__card {
		width: 58vw !important;
	}

	.syn-case-studies__card.swiper-slide-active {
		width: 82vw !important;
	}

	.syn-case-studies__prev,
	.syn-case-studies__next {
		display: none; /* sotto i 1024px lo swipe touch resta comunque attivo (vedi case-studies.js) */
	}
}

/* --- Prima dell'init di Swiper (avvio lazy, vedi case-studies.js) ---
 * Swiper parte solo a 300px dal viewport. Fino ad allora la riga deve già
 * occupare la sua altezza finale, altrimenti all'init il contenuto sotto
 * si sposta (CLS). L'altezza la decide la card attiva (più larga = immagine
 * più alta): la prima card prende la larghezza della card attiva, per
 * ogni breakpoint. La disposizione orizzontale (centratura, loop) non si
 * può replicare in CSS, quindi le card restano invisibili finché Swiper
 * non le posiziona: visibility, non opacity, perché gli elementi con
 * visibility:hidden non contano nel calcolo del CLS. */
.syn-case-studies__swiper:not(.swiper-initialized) .swiper-wrapper {
	visibility: hidden;
}

/* Nell'editor le card restano visibili anche prima dell'avvio di Swiper:
 * lì lo spostamento di layout non conta, e l'anteprima del blocco (che ACF
 * ri-renderizza a ogni modifica) non deve mai restare vuota. */
.editor-styles-wrapper .syn-case-studies__swiper:not(.swiper-initialized) .swiper-wrapper {
	visibility: visible;
}

.syn-case-studies__swiper:not(.swiper-initialized) .syn-case-studies__card:first-child {
	width: 27% !important; /* = .swiper-slide-active su desktop */
}

@media (max-width: 1023px) { /* bp: fino a tablet */
	.syn-case-studies__swiper:not(.swiper-initialized) .syn-case-studies__card:first-child {
		width: 45% !important; /* card uniformi su tablet */
	}
}

@media (max-width: 767px) { /* bp: solo mobile */
	.syn-case-studies__swiper:not(.swiper-initialized) .syn-case-studies__card:first-child {
		width: 82vw !important; /* = .swiper-slide-active su mobile */
	}
}