/**
 * ILPA — Persone e Valori Mobile
 *
 * Default presi dal nodo Figma "ILPA/Mobile/Persone e Valori" (327:1539).
 * Colonna contenuti 353px su viewport 393 (margini 20), hero a tutta larghezza.
 *
 * Token mobile del file: H1 30/1.2 · H2 26/1.2 · testo 16/1.5 · piccolo 14/1.4
 * · minuto 12/1.5 · card vetro rgba(255,255,255,.6) + blur 10 · tinta #276A95 8%
 */

.ilpa-pv {
	--ilpa-pv-blue: #276a95; /* Blue/Blueprint Blue */
	--ilpa-pv-dark-blue: #093c5c; /* Blue/Blueprint Dark blue */
	--ilpa-pv-ink: #1d2833; /* Blue/700 */
	--ilpa-pv-line: #9aa8b6; /* Blue/200 */
	--ilpa-pv-page-bg: #f2f7fd;
	--ilpa-pv-glass: rgba(255, 255, 255, 0.6);
	--ilpa-pv-glass-blur: 10px;
	--ilpa-pv-tint: rgba(39, 106, 149, 0.08);

	--ilpa-pv-radius: 20px;
	--ilpa-pv-pad: 12px;

	--ilpa-pv-h1-size: 30px;
	--ilpa-pv-h2-size: 26px;
	--ilpa-pv-text-size: 16px;
	--ilpa-pv-small-size: 14px;

	/* spessore della maschera intorno al testo che entra nella foto */
	--ilpa-pv-mask-pt: 16px;
	--ilpa-pv-mask-px: 12px;
	--ilpa-pv-note-w: 86.1190%; /* 304 / 353, maschera compresa */
	--ilpa-pv-note-overlap: 100px;

	position: relative;
	color: var(--ilpa-pv-ink);
}

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

/* =========================================================================
 * VISIBILITÀ — nell'editor restano visibili, altrimenti non li selezioni
 * ====================================================================== */

@media (min-width: 1025px) {
	body:not(.elementor-editor-active) .ilpa-pv--hide-lg:not(.ilpa-pv--desktop) {
		display: none !important;
	}
}

@media (min-width: 768px) {
	body:not(.elementor-editor-active) .ilpa-pv--hide-md:not(.ilpa-pv--desktop) {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	body.elementor-editor-active .ilpa-pv:not(.ilpa-pv--desktop) {
		max-width: 393px;
		margin-inline: auto;
	}

	body.elementor-editor-active .ilpa-pv:not(.ilpa-pv--desktop)::before {
		content: 'solo mobile';
		position: absolute;
		top: -18px;
		left: 0;
		z-index: 2;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ilpa-pv-blue);
		opacity: 0.6;
		pointer-events: none;
	}
}

/* ------------------------------ comuni ---------------------------------- */

.ilpa-pv__title {
	margin: 0;
	font-size: var(--ilpa-pv-h2-size);
	font-weight: 400; /* Open Sans Regular: nel mockup i titoli non sono bold */
	line-height: 1.2;
	color: var(--ilpa-pv-ink);
}

.ilpa-pv__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ilpa-pv__intro--center {
	align-items: center;
	text-align: center;
}

.ilpa-pv__text {
	font-size: var(--ilpa-pv-text-size);
	line-height: 1.5;
	color: var(--ilpa-pv-ink);
}

.ilpa-pv__text p {
	margin: 0 0 10px;
}

.ilpa-pv__text p:last-child {
	margin-bottom: 0;
}

.ilpa-pv__text--small {
	font-size: var(--ilpa-pv-small-size);
	line-height: 1.4;
}

.ilpa-pv__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ilpa-pv__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;
}

/*
 * Blocco di testo che entra nella foto: il padding è lo spessore della
 * maschera, quindi il suo box è il rettangolo sottratto. È nel flusso, tirato
 * su sulla foto: l'altezza del ritaglio è questa sovrapposizione e lo spazio
 * sotto la foto si riserva da solo. Usato dalle sezioni 2 e 6.
 */
.ilpa-pv__note {
	position: relative;
	z-index: 1;
	width: var(--ilpa-pv-note-w);
	margin-top: calc(-1 * var(--ilpa-pv-note-overlap));
	margin-right: auto;
	padding: var(--ilpa-pv-mask-pt) var(--ilpa-pv-mask-px) 0 0;
}

.ilpa-pv:not(.is-clipped) .ilpa-pv__note {
	background: var(--ilpa-pv-page-bg);
	border-top-right-radius: var(--ilpa-pv-radius);
}

/* =========================================================================
 * 0. HERO
 * ====================================================================== */

.ilpa-pv--hero {
	--ilpa-pv-hero-ratio: 393 / 657;
	--ilpa-pv-hero-pt: 104px;
	--ilpa-pv-hero-color: #ffffff;
	--ilpa-pv-hero-fade-from: 39.27%;

	display: grid;
}

.ilpa-pv--hero.is-fullbleed .ilpa-pv__hero-media {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.ilpa-pv__hero-media,
.ilpa-pv__hero-body {
	grid-area: 1 / 1;
}

.ilpa-pv__hero-media {
	position: relative;
	aspect-ratio: var(--ilpa-pv-hero-ratio);
	overflow: hidden;
	background: var(--ilpa-pv-tint);
}

/* il gradiente del mockup: la foto si dissolve nel fondo pagina */
.ilpa-pv__hero-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(242, 247, 253, 0) var(--ilpa-pv-hero-fade-from),
		var(--ilpa-pv-page-bg) 100%
	);
	pointer-events: none;
}

.ilpa-pv__hero-body {
	position: relative;
	z-index: 1;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: var(--ilpa-pv-hero-pt);
	color: var(--ilpa-pv-hero-color);
}

.ilpa-pv__hero-title {
	margin: 0;
	font-size: var(--ilpa-pv-h1-size);
	font-weight: 400;
	line-height: 1.2;
	color: inherit;
}

.ilpa-pv__hero-sub {
	margin: 0;
	font-size: var(--ilpa-pv-text-size);
	font-weight: 600;
	line-height: 1.5;
	color: inherit;
}

/* =========================================================================
 * 1. INSIEME — card vetro, foto sotto che sporge. Niente maschera: il testo
 *    finisce prima che cominci la foto.
 * ====================================================================== */

.ilpa-pv--together {
	--ilpa-pv-tog-ratio: 301 / 346;
	--ilpa-pv-tog-img-w: 85.2691%; /* 301 / 353 */
	--ilpa-pv-tog-img-h: 98.0170%; /* 346 / 353, in percentuale della larghezza */
	--ilpa-pv-tog-overhang: 70px;
	--ilpa-pv-tog-gap: 40px; /* stacco fra la fine del testo e la foto */

	padding-bottom: var(--ilpa-pv-tog-overhang);
}

.ilpa-pv__tog-card {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px var(--ilpa-pv-pad);
	/* spazio per la parte di foto che sta dentro la card, più lo stacco */
	padding-bottom: calc(var(--ilpa-pv-tog-img-h) + var(--ilpa-pv-tog-gap) - var(--ilpa-pv-tog-overhang));
	border-radius: var(--ilpa-pv-radius);
	background: var(--ilpa-pv-glass);
	-webkit-backdrop-filter: blur(var(--ilpa-pv-glass-blur));
	backdrop-filter: blur(var(--ilpa-pv-glass-blur));
}

.ilpa-pv__tog-media {
	position: absolute;
	bottom: 0;
	left: var(--ilpa-pv-pad);
	width: var(--ilpa-pv-tog-img-w);
	aspect-ratio: var(--ilpa-pv-tog-ratio);
	border-radius: var(--ilpa-pv-radius);
	overflow: hidden;
	background: var(--ilpa-pv-tint);
	z-index: 1;
}

/* =========================================================================
 * 2. I VALORI — tab scorrevoli, foto ritagliata e testo dentro il ritaglio
 * ====================================================================== */

.ilpa-pv--values {
	--ilpa-pv-val-ratio: 353 / 255;
}

.ilpa-pv__tabs {
	display: flex;
	margin: 40px 0 20px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ilpa-pv__tabs::-webkit-scrollbar {
	display: none;
}

.ilpa-pv__tab {
	flex: 0 0 auto;
	padding: 0 12px 8px;
	border: 0;
	border-bottom: 1px solid var(--ilpa-pv-line);
	background: none;
	color: var(--ilpa-pv-ink);
	font-size: var(--ilpa-pv-text-size);
	font-weight: 300; /* Text/Regular/Light */
	line-height: 1.5;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.2s ease, font-weight 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Reset esplicito su tutti gli stati: senza, il tema ridipinge il bottone. */
.ilpa-pv__tab:hover,
.ilpa-pv__tab:focus,
.ilpa-pv__tab:active,
.ilpa-pv__tab:visited {
	background: none;
	color: var(--ilpa-pv-ink);
	text-decoration: none;
	box-shadow: none;
}

.ilpa-pv__tab.is-active {
	border-bottom: 4px solid var(--ilpa-pv-blue);
	font-weight: 600;
}

.ilpa-pv__tab:focus {
	outline: none;
}

.ilpa-pv__tab:focus-visible {
	outline: 2px solid var(--ilpa-pv-blue);
	outline-offset: 2px;
}

.ilpa-pv__val-media {
	position: relative;
	aspect-ratio: var(--ilpa-pv-val-ratio);
	border-radius: var(--ilpa-pv-radius);
	overflow: hidden;
	background: var(--ilpa-pv-tint);
}

.ilpa-pv__val-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.ilpa-pv__val-slide.is-active {
	opacity: 1;
}

.ilpa-pv__panel {
	display: none;
}

.ilpa-pv__panel.is-active {
	display: block;
}

/* =========================================================================
 * 3. ACADEMY — intro, foto piena e due card
 * ====================================================================== */

.ilpa-pv--academy {
	--ilpa-pv-acad-ratio: 353 / 188;
}

.ilpa-pv__acad-media {
	margin: 40px 0 20px;
	aspect-ratio: var(--ilpa-pv-acad-ratio);
	border-radius: var(--ilpa-pv-radius);
	overflow: hidden;
	background: var(--ilpa-pv-tint);
}

.ilpa-pv__cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ilpa-pv__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	min-height: 180px;
	padding: 16px var(--ilpa-pv-pad);
	border-radius: var(--ilpa-pv-radius);
	background: var(--ilpa-pv-tint);
	-webkit-backdrop-filter: blur(18px); /* effetto Glass del mockup */
	backdrop-filter: blur(18px);
	color: inherit;
	text-decoration: none;
}

.ilpa-pv__card:hover,
.ilpa-pv__card:focus,
.ilpa-pv__card:active,
.ilpa-pv__card:visited {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

a.ilpa-pv__card:hover {
	background: rgba(39, 106, 149, 0.14);
}

.ilpa-pv__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/*
 * La classe del widget è ripetuta di proposito: il titolo della card è un h3 e
 * il kit di Elementor lo veste con `.elementor-kit-N h3` (0,1,1), che sul
 * mobile non ha un override e resta alla misura desktop di 40px. Con una sola
 * classe (0,1,0) questa regola perdeva, e il titolo usciva a 40px su tre
 * righe: da solo più alto dell'intera card del mockup.
 */
.ilpa-pv .ilpa-pv__card-title {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ilpa-pv-dark-blue);
}

.ilpa-pv__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--ilpa-pv-blue);
}

.ilpa-pv__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ilpa-pv__card-text {
	font-size: 12px;
	line-height: 1.5;
	color: var(--ilpa-pv-ink);
}

.ilpa-pv__card-text p {
	margin: 0 0 10px;
}

.ilpa-pv__card-text p:last-child {
	margin-bottom: 0;
}

/* =========================================================================
 * 4. CONOSCI IL TEAM — carosello: la persona a fuoco grande con i dati, le
 *    altre in miniatura tinte di blu
 * ====================================================================== */

.ilpa-pv--team {
	--ilpa-pv-team-ratio: 292 / 260;
	--ilpa-pv-team-w: 82.7195%; /* 292 / 353 */
	--ilpa-pv-thumb-w: 45.3258%; /* 160 / 353 */
	--ilpa-pv-thumb-ratio: 160 / 220;
	--ilpa-pv-team-gap: 12px;
}

.ilpa-pv__team-viewport {
	margin-top: 40px;
	overflow: hidden;
}

.ilpa-pv__team-track {
	display: flex;
	align-items: flex-start;
	gap: var(--ilpa-pv-team-gap);
	transition: transform 0.45s ease;
	will-change: transform;
}

.ilpa-pv__member {
	flex: 0 0 var(--ilpa-pv-thumb-w);
	transition: flex-basis 0.45s ease;
}

.ilpa-pv__member.is-active {
	flex-basis: var(--ilpa-pv-team-w);
}

.ilpa-pv__member-photo {
	position: relative;
	aspect-ratio: var(--ilpa-pv-thumb-ratio);
	border-radius: var(--ilpa-pv-radius);
	overflow: hidden;
	background: var(--ilpa-pv-blue);
	cursor: pointer;
}

/* le miniature sono tinte di blu: foto al 70% sopra il colore pieno */
.ilpa-pv__member-photo img {
	opacity: 0.7;
	transition: opacity 0.45s ease;
}

.ilpa-pv__member.is-active .ilpa-pv__member-photo {
	aspect-ratio: var(--ilpa-pv-team-ratio);
	border: 5px solid #fff;
	box-shadow: 0 20px 64px rgba(0, 0, 0, 0.18); /* Shadow/xxl */
	cursor: default;
}

.ilpa-pv__member.is-active .ilpa-pv__member-photo img {
	opacity: 1;
}

.ilpa-pv__member-body {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	text-align: center;
}

.ilpa-pv__member.is-active .ilpa-pv__member-body {
	display: flex;
}

.ilpa-pv__member-name {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ilpa-pv-ink);
}

.ilpa-pv__member-role {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: var(--ilpa-pv-text-size);
	line-height: 1.5;
	color: var(--ilpa-pv-ink);
	text-decoration: none;
}

.ilpa-pv__member-role:hover,
.ilpa-pv__member-role:focus,
.ilpa-pv__member-role:active,
.ilpa-pv__member-role:visited {
	color: var(--ilpa-pv-ink);
	text-decoration: none;
}

.ilpa-pv__member-role svg {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.ilpa-pv__member-desc {
	margin: 0;
	font-size: var(--ilpa-pv-small-size);
	font-style: italic; /* nel mockup la descrizione è in corsivo */
	line-height: 1.4;
	color: var(--ilpa-pv-ink);
}

/* =========================================================================
 * 5. IMPRESA LUOGO DI CULTURA — slider a due foto, la dietro sbuca a destra
 * ====================================================================== */

.ilpa-pv--culture {
	--ilpa-pv-front-ratio: 333 / 236;
	--ilpa-pv-front-w: 94.3343%; /* 333 / 353 */
	--ilpa-pv-back-w: 93.2011%; /* 329 / 353 */
	--ilpa-pv-back-h: 78.8136%; /* 186 / 236 */
	--ilpa-pv-front-border: 5px;
}

.ilpa-pv__stage {
	position: relative;
	margin-top: 40px;
	cursor: pointer;
}

.ilpa-pv__front {
	position: relative;
	width: var(--ilpa-pv-front-w);
	aspect-ratio: var(--ilpa-pv-front-ratio);
	border: var(--ilpa-pv-front-border) solid #fff;
	border-radius: var(--ilpa-pv-radius);
	overflow: hidden;
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.03), 0 12px 16px 0 rgba(0, 0, 0, 0.1); /* Shadow/m */
	z-index: 1;
}

.ilpa-pv__back {
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--ilpa-pv-back-w);
	height: var(--ilpa-pv-back-h);
	transform: translateY(-50%);
	border-radius: var(--ilpa-pv-radius);
	overflow: hidden;
	background-position: center;
	background-size: cover;
	box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.03), 0 20px 24px -4px rgba(0, 0, 0, 0.08); /* Shadow/l */
	z-index: 0;
}

.ilpa-pv__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.ilpa-pv__slide.is-active {
	opacity: 1;
}

/* =========================================================================
 * 6. CRESCERE — titolo centrato, foto ritagliata, testo dentro il ritaglio
 * ====================================================================== */

.ilpa-pv--growth {
	--ilpa-pv-growth-ratio: 353 / 312;
}

.ilpa-pv__growth-media {
	margin-top: 20px;
	aspect-ratio: var(--ilpa-pv-growth-ratio);
	border-radius: var(--ilpa-pv-radius);
	overflow: hidden;
	background: var(--ilpa-pv-tint);
}

@media (prefers-reduced-motion: reduce) {
	.ilpa-pv__team-track,
	.ilpa-pv__member,
	.ilpa-pv__member-photo img,
	.ilpa-pv__slide,
	.ilpa-pv__val-slide,
	.ilpa-pv__tab {
		transition: none;
	}
}