/**
 * ILPA — Values Tabs
 *
 * Default presi dal nodo Figma "Tab gallery" (259:5293, ILPA-Website),
 * variante Topic="Amiamo metterci in gioco" / Breakpoint=Desktop:
 *
 *   container 1328 · Intro h178 (gap 20) · gap Intro→Content 40
 *   Content: immagine 899x491 + gap 92 + tab navigation 337
 *   Testo sull'immagine: 429x144 a filo del bordo sinistro e della base
 *   Maschera: rettangolo sottratto = testo + 40px in alto e a destra,
 *             tutti gli angoli del risultato raccordati a 20px
 *   Tab: riga alta 78, gap linea/etichetta 20, etichetta 20/1.5
 *        (Light 300, Regular 400 se attiva), linea 78px
 *        1px #9AA8B6 a riposo · 3px #276A95 attiva
 *
 * Ogni misura è un custom property sovrascritto dai controlli Elementor.
 * I custom property che cambiano nel layout impilato sono raccolti in fondo:
 * il breakpoint riscrive solo quelli, non duplica le regole.
 */

.ilpa-vt {
	/* --- geometria della sezione --- */
	--ilpa-vt-ratio: 899 / 491;
	--ilpa-vt-radius: 20px;
	--ilpa-vt-row-gap: 40px;
	--ilpa-vt-col-gap: 92px;
	--ilpa-vt-col-img: 899;
	--ilpa-vt-col-nav: 337;
	--ilpa-vt-col-basis: 0;
	--ilpa-vt-wrap: nowrap;
	--ilpa-vt-nav-order: 2;

	/* --- testo appoggiato alla base dell'immagine --- */
	--ilpa-vt-cap-w: 52.1691%; /* 469 / 899: 429 di testo + 40 di maschera */
	--ilpa-vt-cap-pos: absolute;
	--ilpa-vt-cap-pt: 40px; /* spessore maschera sopra il testo */
	--ilpa-vt-cap-px: 40px; /* spessore maschera sul lato interno */
	--ilpa-vt-cap-mt: 0px;
	--ilpa-vt-cap-size: 16px;
	--ilpa-vt-cap-lh: 1.5;
	--ilpa-vt-plate: #ffffff;
	--ilpa-vt-plate-bg: var(--ilpa-vt-plate);

	/* --- tab --- */
	--ilpa-vt-nav-dir: column;
	--ilpa-vt-nav-ox: visible;
	--ilpa-vt-tab-dir: row;
	--ilpa-vt-tab-h: 78px;
	--ilpa-vt-tab-gap: 20px;
	--ilpa-vt-tab-size: 20px;
	--ilpa-vt-tab-lh: 1.5;
	--ilpa-vt-tab-weight: 300;
	--ilpa-vt-tab-weight-active: 400;
	--ilpa-vt-label-wrap: normal;
	--ilpa-vt-linebox-w: 0px;
	--ilpa-vt-linebox-h: var(--ilpa-vt-tab-h);
	--ilpa-vt-bar-w: var(--ilpa-vt-line-thick);
	--ilpa-vt-bar-h: 100%;
	--ilpa-vt-line-thick: 1px;
	--ilpa-vt-line-thick-active: 3px;
	--ilpa-vt-line-idle: #9aa8b6;
	--ilpa-vt-line-color: var(--ilpa-vt-line-idle);

	/* --- intro --- */
	--ilpa-vt-intro-gap: 20px;
	--ilpa-vt-lead-w: 740px;
	--ilpa-vt-title-size: 64px;
	--ilpa-vt-lead-size: 18px;

	/* --- colori --- */
	--ilpa-vt-ink: #1d2833;
	--ilpa-vt-accent: #276a95;

	display: flex;
	flex-direction: column;
	gap: var(--ilpa-vt-row-gap);
	color: var(--ilpa-vt-ink);
}

.ilpa-vt *,
.ilpa-vt *::before,
.ilpa-vt *::after {
	box-sizing: border-box;
}

/* ------------------------------- Intro ---------------------------------- */

.ilpa-vt__intro {
	display: flex;
	flex-direction: column;
	gap: var(--ilpa-vt-intro-gap);
}

.ilpa-vt__title {
	margin: 0;
	font-size: var(--ilpa-vt-title-size);
	font-weight: 400; /* Open Sans Regular: nel mockup il titolo non è bold */
	line-height: 1.2;
	letter-spacing: 0;
	color: inherit;
}

.ilpa-vt__lead {
	max-width: var(--ilpa-vt-lead-w);
	font-size: var(--ilpa-vt-lead-size);
	line-height: 1.5;
}

.ilpa-vt__lead p {
	margin: 0;
}

.ilpa-vt__lead p + p {
	margin-top: 0.5em;
}

/* ------------------------------ Content --------------------------------- */

.ilpa-vt__content {
	display: flex;
	align-items: flex-start;
	gap: var(--ilpa-vt-col-gap);
	flex-wrap: var(--ilpa-vt-wrap);
}

/*
 * flex-grow con basis 0 distribuisce lo spazio residuo nella proporzione
 * 899:337 del mockup: a 1328px di container le due colonne misurano
 * esattamente 899 e 337, e la proporzione resta a qualsiasi larghezza.
 */
.ilpa-vt__stage {
	display: grid; /* i pannelli si sovrappongono nella stessa cella */
	order: 1;
	flex-grow: var(--ilpa-vt-col-img);
	flex-shrink: 1;
	flex-basis: var(--ilpa-vt-col-basis);
	min-width: 0;
}

.ilpa-vt__nav {
	display: flex;
	flex-direction: var(--ilpa-vt-nav-dir);
	order: var(--ilpa-vt-nav-order);
	flex-grow: var(--ilpa-vt-col-nav);
	flex-shrink: 1;
	flex-basis: var(--ilpa-vt-col-basis);
	min-width: 0;
	overflow-x: var(--ilpa-vt-nav-ox);
}

/* ------------------------------ Pannelli -------------------------------- */

.ilpa-vt__panel {
	position: relative;
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden; /* toglie il pannello dall'albero di accessibilità
	                       ma ne conserva il layout: il JS può misurare il
	                       testo anche dei tab non attivi */
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

.ilpa-vt__panel.is-active {
	opacity: 1;
	visibility: visible;
}

.ilpa-vt__media {
	position: relative;
	margin: 0;
	aspect-ratio: var(--ilpa-vt-ratio);
	border-radius: var(--ilpa-vt-radius);
	overflow: hidden;
	background: rgba(39, 106, 149, 0.08);
}

.ilpa-vt__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ilpa-vt-img-pos, center);
}

/*
 * Il testo appoggia sulla base e sul bordo sinistro dell'immagine; il padding
 * in alto e a destra è lo spessore della maschera intorno al testo, quindi il
 * box della didascalia coincide con il rettangolo sottratto all'immagine.
 * Da qui l'adattamento automatico: il JS legge le dimensioni di questo box.
 */
.ilpa-vt__caption {
	position: var(--ilpa-vt-cap-pos);
	left: 0;
	right: auto;
	bottom: 0;
	width: var(--ilpa-vt-cap-w);
	margin-top: var(--ilpa-vt-cap-mt);
	padding: var(--ilpa-vt-cap-pt) var(--ilpa-vt-cap-px) 0 0;
	font-size: var(--ilpa-vt-cap-size);
	line-height: var(--ilpa-vt-cap-lh);
}

/*
 * Nel mockup il ritaglio sta in basso a sinistra solo per il primo topic:
 * negli altri tre è in basso a destra, appoggiato alla colonna dei tab. Il
 * lato è una scelta per singola scheda, e la maschera si specchia con lui.
 */
.ilpa-vt__panel--right .ilpa-vt__caption {
	left: auto;
	right: 0;
	padding: var(--ilpa-vt-cap-pt) 0 0 var(--ilpa-vt-cap-px);
}

.ilpa-vt__caption p {
	margin: 0;
}

.ilpa-vt__caption p + p {
	margin-top: 0.75em;
}

/*
 * Ripiego quando clip-path: path() non è disponibile (o il JS non parte):
 * il testo resta leggibile su una placca del colore di fondo pagina, che a
 * colpo d'occhio equivale al ritaglio. Nel layout impilato la placca non
 * serve, e --ilpa-vt-plate-bg la disattiva.
 */
.ilpa-vt:not(.is-clipped) .ilpa-vt__caption {
	background: var(--ilpa-vt-plate-bg);
	border-top-right-radius: var(--ilpa-vt-radius);
}

.ilpa-vt:not(.is-clipped) .ilpa-vt__panel--right .ilpa-vt__caption {
	border-top-right-radius: 0;
	border-top-left-radius: var(--ilpa-vt-radius);
}

/* -------------------------------- Tab ----------------------------------- */

.ilpa-vt__tab {
	display: flex;
	flex-direction: var(--ilpa-vt-tab-dir);
	align-items: center;
	gap: var(--ilpa-vt-tab-gap);
	width: 100%;
	min-height: var(--ilpa-vt-tab-h);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ilpa-vt__tab.is-active {
	--ilpa-vt-line-thick: var(--ilpa-vt-line-thick-active);
	--ilpa-vt-line-color: var(--ilpa-vt-accent);
}

/*
 * La linea non occupa spazio orizzontale (nel mockup è un tratto centrato su
 * un box largo 0), così passando da 1px a 3px l'etichetta non si sposta.
 */
.ilpa-vt__line {
	position: relative;
	flex: 0 0 auto;
	width: var(--ilpa-vt-linebox-w);
	height: var(--ilpa-vt-linebox-h);
}

.ilpa-vt__line::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--ilpa-vt-bar-w);
	height: var(--ilpa-vt-bar-h);
	background: var(--ilpa-vt-line-color);
	transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease;
}

.ilpa-vt__label {
	font-size: var(--ilpa-vt-tab-size);
	line-height: var(--ilpa-vt-tab-lh);
	font-weight: var(--ilpa-vt-tab-weight);
	white-space: var(--ilpa-vt-label-wrap);
	transition: font-weight 0.25s ease;
}

.ilpa-vt__tab.is-active .ilpa-vt__label {
	font-weight: var(--ilpa-vt-tab-weight-active);
}

.ilpa-vt__tab:focus-visible {
	outline: 2px solid var(--ilpa-vt-accent);
	outline-offset: 4px;
}

.ilpa-vt__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ============================ LAYOUT IMPILATO ===========================
 * Nel file Figma non esiste la variante Breakpoint=Mobile di questo nodo:
 * sotto la soglia i tab diventano una riga scorrevole con la barra sotto
 * l'etichetta, l'immagine va a piena larghezza e il testo scende sotto
 * l'immagine (senza maschera, che a quelle larghezze mangerebbe la foto).
 *
 * La classe --is-stacked la mette il JS confrontando la soglia scelta nei
 * controlli con la larghezza REALE del widget, non con quella della finestra:
 * dentro una colonna Elementor stretta il layout impila anche su desktop.
 * Così il blocco di custom property qui sotto vale per tutte le soglie e non
 * va duplicato in due media query.
 * ======================================================================== */

.ilpa-vt--is-stacked {
	--ilpa-vt-col-gap: 32px;
	--ilpa-vt-row-gap: 32px;
	--ilpa-vt-col-basis: 100%;
	--ilpa-vt-wrap: wrap;
	--ilpa-vt-nav-order: 0;

	--ilpa-vt-cap-pos: static;
	--ilpa-vt-cap-w: 100%;
	--ilpa-vt-cap-pt: 0px;
	--ilpa-vt-cap-px: 0px;
	--ilpa-vt-cap-mt: 20px;
	--ilpa-vt-plate-bg: transparent;

	--ilpa-vt-nav-dir: row;
	--ilpa-vt-nav-ox: auto;
	--ilpa-vt-tab-dir: column-reverse; /* etichetta sopra, barra sotto */
	--ilpa-vt-tab-h: auto;
	--ilpa-vt-tab-gap: 10px;
	--ilpa-vt-tab-size: 17px;
	--ilpa-vt-label-wrap: nowrap;
	--ilpa-vt-linebox-w: 100%;
	--ilpa-vt-linebox-h: 0px;
	--ilpa-vt-bar-w: 100%;
	--ilpa-vt-bar-h: var(--ilpa-vt-line-thick);

	--ilpa-vt-title-size: 34px;
	--ilpa-vt-lead-size: 16px;
	--ilpa-vt-intro-gap: 16px;
}

.ilpa-vt--is-stacked .ilpa-vt__nav {
	gap: 28px;
	padding-bottom: 4px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.ilpa-vt--is-stacked .ilpa-vt__tab {
	width: auto;
	flex: 0 0 auto;
	padding-bottom: 10px;
}

@media (min-width: 1025px) and (max-width: 1320px) {
	.ilpa-vt {
		--ilpa-vt-col-gap: 56px;
		--ilpa-vt-title-size: 52px;
		--ilpa-vt-tab-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ilpa-vt__panel,
	.ilpa-vt__line::before,
	.ilpa-vt__label {
		transition: none;
	}
}