/**
 * Blocchi modulari dei casi studio.
 *
 * Tutto e' annidato sotto .wf-blocco o .wf-blocchi: il kit globale di Elementor
 * dichiara regole a specificita' (0,1,1) sugli elementi base (h1, h2, p) e senza
 * annidamento vincerebbe lui. Stessa lezione imparata sulla pagina Portfolio,
 * dove il titolo finiva bianco su bianco.
 *
 * I colori vengono dai token gia' definiti in style.css del child theme; i
 * fallback servono se il foglio del tema non e' ancora arrivato.
 */

.wf-blocchi {
	--wf-max: 1140px;
	--wf-gap: clamp(1rem, 2.4vw, 2rem);
	--wf-blu: var(--wifor-blu, #1a4455);
	--wf-blu-scuro: var(--wifor-blu-scuro, #0b1e26);
	--wf-giallo: var(--wifor-giallo, #f5c55f);
	--wf-chiaro: var(--wifor-chiaro, #f8fafc);
	--wf-bianco: var(--wifor-bianco, #ffffff);
	--wf-testo: var(--wifor-blu-scuro, #0b1e26);
	--wf-testo-tenue: #55707c;
	--wf-bordo: rgba(26, 68, 85, .14);
	--wf-raggio: 14px;

	font-family: var(--font-primario, system-ui, sans-serif);
}

/* ------------------------------------------------------------------ sezione */

.wf-blocchi .wf-blocco {
	padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 3rem);
	color: var(--wf-testo);
	scroll-margin-top: 100px; /* header fisso alto ~82px */
}

.wf-blocchi .wf-sfondo--chiaro { background: var(--wf-chiaro); }
.wf-blocchi .wf-sfondo--bianco { background: var(--wf-bianco); }

.wf-blocchi .wf-sfondo--scuro {
	background: var(--wf-blu-scuro);
	--wf-testo: var(--wf-bianco);
	--wf-testo-tenue: rgba(255, 255, 255, .72);
	--wf-bordo: rgba(255, 255, 255, .18);
}

/* Il colore del brand del cliente, iniettato da [wifor_variabile_colore]. */
.wf-blocchi .wf-sfondo--brand {
	background: var(--colore-brand, var(--wf-blu));
	--wf-testo: var(--colore-testo-brand, #ffffff);
	--wf-testo-tenue: var(--colore-testo-brand, rgba(255, 255, 255, .78));
	--wf-bordo: rgba(255, 255, 255, .22);
}

/* --------------------------------------------------------------------- intro */

.wf-blocchi .wf-blocco__intro {
	max-width: var(--wf-max);
	margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.wf-blocchi .wf-blocco__occhiello {
	margin: 0 0 .5rem;
	color: var(--wf-testo-tenue);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wf-blocchi .wf-blocco__titolo {
	max-width: 22ch;
	margin: 0;
	color: var(--wf-testo);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.01em;
}

.wf-blocchi .wf-blocco__titolo::after {
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 1.1rem;
	background: var(--wf-giallo);
	border-radius: 2px;
	content: "";
}

.wf-blocchi .wf-blocco__testo {
	max-width: 62ch;
	margin-top: 1.4rem;
	color: var(--wf-testo);
	font-size: clamp(1rem, 1.15vw, 1.0625rem);
	line-height: 1.72;
}

.wf-blocchi .wf-blocco__testo > :first-child { margin-top: 0; }
.wf-blocchi .wf-blocco__testo > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ pulsante */

.wf-blocchi .wf-blocco__azione { max-width: var(--wf-max); margin: 1.75rem auto 0; }

.wf-blocchi .wf-bottone {
	display: inline-block;
	padding: .8rem 1.6rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--wf-testo);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.wf-blocchi .wf-bottone:hover,
.wf-blocchi .wf-bottone:focus-visible {
	background: var(--wf-giallo);
	border-color: var(--wf-giallo);
	color: var(--wf-blu-scuro);
}

/* ----------------------------------------------------------------------- KPI */

.wf-kpi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--wf-gap);
	max-width: var(--wf-max);
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	padding: 0;
	list-style: none;
}

.wf-kpi__voce {
	padding: 1.25rem 1.25rem 1.15rem;
	border: 1px solid var(--wf-bordo);
	border-radius: var(--wf-raggio);
	background: rgba(255, 255, 255, .04);
}

.wf-kpi__valore {
	display: block;
	color: var(--wf-testo);
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.wf-kpi__etichetta {
	display: block;
	margin-top: .35rem;
	color: var(--wf-testo-tenue);
	font-size: .875rem;
	line-height: 1.4;
}

/* ------------------------------------------------------------------- palette */

.wf-palette,
.wf-profili,
.wf-piattaforme {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	max-width: var(--wf-max);
	margin: 0 auto 2rem;
	padding: 0;
	list-style: none;
}

.wf-palette__campione {
	display: flex;
	gap: .55rem;
	align-items: center;
	padding: .4rem .75rem .4rem .4rem;
	border: 1px solid var(--wf-bordo);
	border-radius: 999px;
}

.wf-palette__campione span {
	width: 26px;
	height: 26px;
	border: 1px solid var(--wf-bordo);
	border-radius: 50%;
}

.wf-palette__campione code {
	color: var(--wf-testo-tenue);
	font-size: .8125rem;
	text-transform: uppercase;
}

.wf-profili a,
.wf-piattaforme li {
	display: inline-block;
	padding: .45rem 1rem;
	border: 1px solid var(--wf-bordo);
	border-radius: 999px;
	color: var(--wf-testo);
	font-size: .875rem;
	text-decoration: none;
}

.wf-profili a:hover,
.wf-profili a:focus-visible { border-color: var(--wf-giallo); }

/* --------------------------------------------------------------- prima/dopo */

.wf-prima-dopo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wf-gap);
	max-width: var(--wf-max);
	margin: 0 auto 2.5rem;
}

.wf-prima-dopo__voce {
	margin: 0;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid var(--wf-bordo);
	border-radius: var(--wf-raggio);
	background: var(--wf-bianco);
	text-align: center;
}

.wf-prima-dopo__img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	margin: 0 auto;
}

.wf-prima-dopo figcaption {
	margin-top: 1rem;
	color: var(--wf-testo-tenue);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------- media */

.wf-media { max-width: var(--wf-max); margin: 0 auto; }
.wf-media + .wf-media { margin-top: var(--wf-gap); }

.wf-media__pista {
	display: grid;
	gap: var(--wf-gap);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wf-media__voce { margin: 0; }

.wf-media__img,
.wf-media__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wf-raggio);
	background: rgba(26, 68, 85, .06);
	object-fit: cover;
}

/* ---------------------------------------------------------------- video */

.wf-video {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--wf-raggio);
	background: rgba(26, 68, 85, .06);
}

.wf-video .wf-media__video { border-radius: 0; background: transparent; }

.wf-video__attesa {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: opacity .35s ease, visibility .35s ease;
}

.wf-video__attesa::after {
	width: 34px;
	height: 34px;
	border: 3px solid var(--wf-bordo);
	border-top-color: var(--wf-giallo);
	border-radius: 50%;
	animation: wf-gira .9s linear infinite;
	content: "";
}

.wf-video[data-stato="pronto"] .wf-video__attesa,
.wf-video[data-stato="errore"] .wf-video__attesa {
	opacity: 0;
	visibility: hidden;
}

@keyframes wf-gira { to { transform: rotate(360deg); } }

.wf-media__didascalia {
	margin: .6rem 0 0;
	color: var(--wf-testo-tenue);
	font-size: .8125rem;
	line-height: 1.5;
}

/* Un file per riga */
.wf-media--pieno .wf-media__pista { grid-template-columns: 1fr; }

/* Due per riga, mai di piu': a tre colonne un mockup desktop diventa un
   francobollo. Sotto i 640px si torna comunque a una colonna sola. */
.wf-media--affiancati .wf-media__pista,
.wf-media--griglia .wf-media__pista { grid-template-columns: 1fr; }

@media (min-width: 640px) {
	.wf-media--affiancati .wf-media__pista,
	.wf-media--griglia .wf-media__pista { grid-template-columns: repeat(2, 1fr); }

	/* Numero dispari: il primo apre a tutta larghezza e la coda resta pari. */
	.wf-media--primo-pieno .wf-media__voce:first-child { grid-column: 1 / -1; }
}

/* Verticali 9:16 — reel, viste mobile */
.wf-media--verticale .wf-media__pista {
	display: flex;
	gap: var(--wf-gap);
	overflow-x: auto;
	padding-bottom: .75rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.wf-media--verticale .wf-media__voce {
	flex: 0 0 min(70vw, 300px);
	scroll-snap-align: start;
}

.wf-media--verticale .wf-media__img,
.wf-media--verticale .wf-media__video {
	aspect-ratio: 9 / 16;
	object-fit: cover;
}

/* Carosello orizzontale */
.wf-media--carosello .wf-media__pista {
	display: flex;
	gap: var(--wf-gap);
	overflow-x: auto;
	padding-bottom: .75rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.wf-media--carosello .wf-media__voce {
	flex: 0 0 min(85vw, 620px);
	scroll-snap-align: center;
}

.wf-media__pista:focus-visible {
	outline: 2px solid var(--wf-giallo);
	outline-offset: 6px;
	border-radius: var(--wf-raggio);
}

/* ------------------------------------------------------------------- indice */

.wf-indice ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wf-indice a {
	display: inline-block;
	padding: .5rem 1.1rem;
	border: 1px solid rgba(26, 68, 85, .18);
	border-radius: 999px;
	color: var(--wifor-blu, #1a4455);
	font-size: .875rem;
	text-decoration: none;
}

.wf-indice a:hover,
.wf-indice a:focus-visible {
	background: var(--wifor-blu, #1a4455);
	border-color: var(--wifor-blu, #1a4455);
	color: #fff;
}

.wf-servizi-progetto .wf-servizio-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* ------------------------------------------------- intro del caso studio */

/*
 * Su telefono le due colonne dell'intro si impilano con 6px di gap: l'elenco
 * dei servizi finiva a 10px dal racconto della sfida e i due blocchi si
 * leggevano come uno solo. Lo spazio si aggiunge dentro il widget, cosi' non
 * serve toccare il contenitore in Elementor.
 */
@media (max-width: 767px) {
	.wf-servizi-progetto {
		display: block;
		padding-bottom: 2.25rem;
	}
}

/*
 * Logo del cliente: normalizzato per ALTEZZA, non per larghezza.
 *
 * Il widget lo dichiara a width:200px fissi. Su un logo quadrato diventa un
 * blocco 200x200 che su un telefono da 390px occupa mezza schermata, mentre un
 * logo lungo e sottile (595x85) resta alto una ventina di pixel: due loghi
 * della stessa pagina con due pesi visivi diversissimi. Vincolando l'altezza e
 * lasciando libera la larghezza, loghi di proporzioni diverse pesano uguale.
 *
 * Specificita' 0,2,0 per stare sopra allo <style> del widget, che e' nel body
 * e a parita' di specificita' vincerebbe per ordine.
 */
.wifor-single-caso-studio-wrapper .wifor-logo-cliente {
	width: auto;
	height: auto;
	max-width: min(240px, 62vw);
	max-height: 64px;
	object-fit: contain;
}

@media (max-width: 767px) {
	.wifor-single-caso-studio-wrapper .wifor-logo-cliente {
		max-width: min(180px, 52vw);
		max-height: 46px;
	}
}

/* ------------------------------------------------------------- accessibilita' */

@media (prefers-reduced-motion: reduce) {
	.wf-blocchi *,
	.wf-blocchi *::before,
	.wf-blocchi *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.wf-media--verticale .wf-media__pista,
	.wf-media--carosello .wf-media__pista { scroll-behavior: auto; }

	/* L'indicatore di caricamento resta l'unica animazione ammessa: senza,
	   diventerebbe un cerchio fermo che non comunica nulla. Rallentato. */
	.wf-blocchi .wf-video__attesa::after {
		animation-duration: 2.4s !important;
	}
}

.wf-blocchi .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}