/*
 * Awards e Rankings della pagina Recognition ([lgv_awards], [lgv_rankings]).
 * Markup in inc/riconoscimenti-front.php, comportamento in riconoscimenti.js.
 *
 * Tutto sta sotto .lgv-ric e i selettori sono un po' più specifici del solito:
 * il tema e il kit Elementor danno stili propri a button, h3, h4, ul, img e li
 * scavalcherebbero.
 */

.lgv-ric {
	--lgv-blu: #062E92;
	--lgv-ambra: #FFB700;
	--lgv-crema: #FBF4E8;
	--lgv-scuro: #1F2635;
	--lgv-grigio: #7A8192;
	--lgv-filo: #EEE6D6;
	--lgv-serif: var(--e-global-typography-primary-font-family, "Libre Bodoni"), Georgia, serif;
	--lgv-sans: var(--e-global-typography-text-font-family, "Archivo"), system-ui, sans-serif;
	font-family: var(--lgv-sans);
	color: var(--lgv-scuro);
	text-align: left;
}
.lgv-ric *,
.lgv-ric *::before,
.lgv-ric *::after { box-sizing: border-box; }
.lgv-ric [hidden] { display: none !important; }

/* ---------- Avatar ---------- */

.lgv-ric .lgv-av {
	display: inline-block;
	flex: none;
	width: 28px;
	height: 28px;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	background: #E9E2D3;
}
/* Ritratto intero (foto senza ritaglio «lgv-avatar»): allineato in alto, la testa resta intera. */
.lgv-ric img.lgv-av--busto { object-position: 50% 0; }
.lgv-ric .lgv-av--sigla {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--lgv-blu);
	color: #fff;
	font-family: var(--lgv-serif);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1;
}

/* ---------- Pillole: filtro degli awards e schede dei rankings ---------- */

.lgv-ric .lgv-barra {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 30px;
}
/* Senza JavaScript non servono: si vede già tutto. */
.lgv-ric:not(.is-js) .lgv-barra,
.lgv-ric:not(.is-js) .lgv-aw__piede { display: none; }

.lgv-ric .lgv-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 5px 16px 5px 5px;
	min-height: 0;
	border: 1.5px solid #D9C9AB;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--lgv-scuro);
	font: 500 15px/1.2 var(--lgv-sans);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .2s, background-color .2s, color .2s;
}
.lgv-ric .lgv-pill--testo { padding: 9px 12px 9px 18px; }
.lgv-ric .lgv-pill .lgv-av { width: 32px; height: 32px; }
.lgv-ric .lgv-pill:hover {
	border-color: var(--lgv-blu);
	background: transparent;
	color: var(--lgv-blu);
}
.lgv-ric .lgv-pill:focus-visible {
	outline: 2px solid var(--lgv-ambra);
	outline-offset: 2px;
}
.lgv-ric .lgv-pill[aria-pressed="true"],
.lgv-ric .lgv-pill[aria-selected="true"] {
	border-color: var(--lgv-blu);
	background: var(--lgv-blu);
	color: #fff;
}
.lgv-ric .lgv-pill[aria-selected="true"] .lgv-av { box-shadow: 0 0 0 2px var(--lgv-ambra); }
.lgv-ric .lgv-pill__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: rgba(6, 46, 146, .08);
	color: var(--lgv-blu);
	font-size: 12px;
	font-weight: 600;
}
.lgv-ric .lgv-pill[aria-pressed="true"] .lgv-pill__n {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

.lgv-ric .lgv-btn {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 12px 26px;
	min-height: 0;
	border: 1.5px solid var(--lgv-blu);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--lgv-blu);
	font: 500 15px/1.2 var(--lgv-sans);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: color 520ms ease;
}
/* Al passaggio il blu scende dall'alto come nei bottoni del tema: è l'effetto
   unico dei bottoni del sito (vedi «BOTTONI» in fondo a style.css). */
.lgv-ric .lgv-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.lgv-ric .lgv-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--lgv-blu);
	transform: translate3d(0, calc(-100% - 2px), 0); /* oltre il bordo, vedi «BOTTONI» in style.css */
	transition: transform 520ms ease;
}
.lgv-ric .lgv-btn:hover,
.lgv-ric .lgv-btn:focus-visible {
	color: #fff;
}
.lgv-ric .lgv-btn:hover::after,
.lgv-ric .lgv-btn:focus-visible::after {
	transform: translate3d(0, 0, 0);
	transition: transform .5s cubic-bezier(.52, 1.64, .37, .66);
}
.lgv-ric .lgv-btn:focus-visible { outline: 2px solid var(--lgv-ambra); outline-offset: 2px; }

/* ---------- Awards ---------- */

.lgv-aw__griglia {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.lgv-ric .lgv-aw__carta {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px 28px 22px;
	border-radius: 22px;
	background: #fff;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s;
}
.lgv-ric .lgv-aw__carta:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 44px -28px rgba(6, 46, 146, .5);
}
/* Al passaggio la scheda si alza e il medaglione si riempie d'oro. */
.lgv-ric .lgv-aw__carta:hover .lgv-aw__lauro {
	background: var(--lgv-ambra);
	color: #fff;
}
.lgv-ric .lgv-aw__carta:hover .lgv-aw__lauro svg { transform: scale(1.08); }

.lgv-aw__testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.lgv-aw__lauro {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--lgv-crema);
	color: var(--lgv-ambra);
	transition: background-color .35s, color .35s;
}
.lgv-aw__lauro svg { display: block; width: 34px; height: 34px; transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
/* Logo dell'organizzatore: forme diverse (scritte larghe, stemmi quadrati), stesso ingombro massimo. */
.lgv-aw__logo {
	display: flex;
	align-items: center;
	height: 52px; /* come il medaglione dell'alloro: i titoli restano allineati fra le schede */
	max-width: 150px;
}
.lgv-ric .lgv-aw__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 52px;
	object-fit: contain;
}
.lgv-ric .is-evidenza .lgv-aw__logo {
	padding: 6px 10px;
	border-radius: 10px;
	background: #fff;
}
.lgv-aw__anno {
	font-family: var(--lgv-serif);
	font-size: 28px;
	line-height: 1;
	color: var(--lgv-blu);
}

.lgv-ric h3.lgv-aw__titolo {
	margin: 0;
	font-family: var(--lgv-serif);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lgv-blu);
}
.lgv-ric .lgv-aw__titolo a {
	color: inherit;
	text-decoration: none;
	transition: none;
}
/* Tutta la scheda porta al link. */
.lgv-ric .lgv-aw__titolo a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.lgv-ric .lgv-aw__titolo a:focus-visible { outline: none; }
.lgv-ric .lgv-aw__carta:focus-within { outline: 2px solid var(--lgv-ambra); outline-offset: 3px; }

.lgv-ric p.lgv-aw__org {
	margin: 10px 0 22px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lgv-grigio);
}

.lgv-aw__chi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--lgv-filo);
}
.lgv-ric .lgv-chi {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 500;
	color: var(--lgv-blu);
}
.lgv-aw__freccia {
	display: inline-flex;
	margin-left: auto;
	width: 20px;
	height: 20px;
	color: var(--lgv-ambra);
	transition: transform .3s;
}
.lgv-aw__freccia svg { width: 100%; height: 100%; }
.lgv-ric .lgv-aw__carta:hover .lgv-aw__freccia { transform: translate(2px, -2px); }

/* In evidenza: fondo blu. */
.lgv-ric .lgv-aw__carta.is-evidenza {
	background: var(--lgv-blu) radial-gradient(circle at 100% 0, rgba(255, 183, 0, .22), transparent 55%);
}
.lgv-ric .is-evidenza h3.lgv-aw__titolo { color: #fff; }
.lgv-ric .is-evidenza .lgv-aw__anno { color: var(--lgv-ambra); }
.lgv-ric .is-evidenza p.lgv-aw__org { color: rgba(255, 255, 255, .62); }
.lgv-ric .is-evidenza .lgv-aw__lauro { background: rgba(255, 255, 255, .1); }
.lgv-ric .lgv-aw__carta.is-evidenza:hover .lgv-aw__lauro { background: var(--lgv-ambra); color: var(--lgv-blu); }
.lgv-ric .is-evidenza .lgv-aw__chi { border-color: rgba(255, 255, 255, .18); }
.lgv-ric .is-evidenza .lgv-chi { color: #fff; }
.lgv-ric .is-evidenza .lgv-av--sigla { background: #fff; color: var(--lgv-blu); }

.lgv-aw__piede {
	margin-top: 34px;
	text-align: center;
}

/* ---------- Rankings ---------- */

.lgv-ric .lgv-rk__pannello {
	padding: 40px 44px 30px;
	border-radius: 26px;
	background: #fff;
}
/* Senza JavaScript le schede stanno una sotto l'altra. */
.lgv-ric .lgv-rk__pannello + .lgv-rk__pannello { margin-top: 24px; }
.lgv-ric .lgv-rk__pannello:focus-visible { outline: 2px solid var(--lgv-ambra); outline-offset: 3px; }

.lgv-rk__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin-bottom: 30px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--lgv-filo);
}
.lgv-ric .lgv-av--grande {
	width: 84px;
	height: 84px;
	font-size: 19px;
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--lgv-ambra);
}
.lgv-rk__chi { min-width: 0; }
.lgv-ric h3.lgv-rk__nome {
	margin: 0;
	font-family: var(--lgv-serif);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lgv-blu);
}
.lgv-ric p.lgv-rk__meta {
	margin: 7px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--lgv-grigio);
}
.lgv-ric a.lgv-rk__profilo {
	margin-left: auto;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--lgv-ambra);
	color: var(--lgv-blu);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: color .2s, border-color .2s;
}
.lgv-ric a.lgv-rk__profilo:hover { border-color: var(--lgv-blu); color: var(--lgv-blu); }

/*
 * Una riga per guida: nome a sinistra, livelli e aree a destra. Le colonne
 * hanno larghezza fissa, così livelli e aree stanno allineati anche fra una
 * guida e l'altra.
 */
.lgv-ric .lgv-rk__guida {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 10px 40px;
	padding: 24px 0;
	border-top: 1px solid var(--lgv-filo);
}
.lgv-ric .lgv-rk__guida:first-child {
	padding-top: 2px;
	border-top: 0;
}
.lgv-rk__gtesta {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
/* Logo della guida al posto del nome: misura data in linea da lgv_ric_misura_logo(). */
.lgv-ric .lgv-rk__logo {
	display: block;
	max-width: 100%;
	object-fit: contain;
	margin: 2px 0 2px;
}
/* Il nome resta per i lettori di schermo anche se il tema non ha la classe. */
.lgv-ric .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.lgv-ric h4.lgv-rk__gnome {
	margin: 0;
	font-family: var(--lgv-serif);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lgv-blu);
}
.lgv-rk__ed {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lgv-grigio);
}

/* Livello | aree | nota */
.lgv-ric ul.lgv-rk__livelli {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) auto;
	gap: 12px 24px;
	align-items: baseline;
	margin: 0;
	padding: 3px 0 0;
	list-style: none;
}
.lgv-ric ul.lgv-rk__livelli > li {
	display: contents;
	list-style: none;
}
.lgv-ric ul.lgv-rk__livelli > li::before { content: none; }

/*
 * Il livello è testo semplice; solo i livelli più alti hanno la capsula oro.
 * Il padding è lo stesso per tutti, così il testo parte sempre dallo stesso punto.
 */
.lgv-ric .lgv-liv {
	justify-self: start;
	padding: 2px 12px;
	margin-left: -12px;
	border-radius: 999px;
	color: var(--lgv-blu);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}
.lgv-ric .lgv-liv.is-top {
	background: var(--lgv-ambra);
	color: var(--lgv-scuro);
}
.lgv-rk__aree {
	font-size: 15px;
	line-height: 1.6;
	color: var(--lgv-scuro);
}
.lgv-rk__nota {
	font-size: 13px;
	line-height: 1.6;
	color: var(--lgv-grigio);
	white-space: nowrap;
	text-align: right;
}

/* ---------- Entrate (al filtro e al cambio scheda) ---------- */

.lgv-ric .is-entrata { animation: lgv-ric-entra .45s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes lgv-ric-entra {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lgv-ric .is-entrata { animation: none; }
	.lgv-ric .lgv-aw__carta,
	.lgv-ric .lgv-aw__lauro,
	.lgv-ric .lgv-aw__lauro svg { transition: none; }
	.lgv-ric .lgv-aw__carta:hover { transform: none; }
}

/* ---------- Tablet e telefono ---------- */

@media (max-width: 1024px) {
	.lgv-aw__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lgv-ric .lgv-rk__guida { grid-template-columns: 190px minmax(0, 1fr); gap: 10px 28px; }
	.lgv-ric ul.lgv-rk__livelli { grid-template-columns: 170px minmax(0, 1fr) auto; gap: 12px 18px; }
}

@media (max-width: 640px) {
	/* Filtri e schede su una riga che scorre di lato. */
	.lgv-ric .lgv-barra {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-bottom: 22px;
		padding-bottom: 6px;
		scrollbar-width: none;
	}
	.lgv-ric .lgv-barra::-webkit-scrollbar { display: none; }
	.lgv-ric .lgv-pill { flex: none; }

	.lgv-aw__griglia { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.lgv-ric .lgv-aw__carta { padding: 24px 22px 20px; }

	.lgv-ric .lgv-rk__pannello { padding: 26px 20px 16px; border-radius: 22px; }
	.lgv-rk__testa { gap: 16px; margin-bottom: 22px; padding-bottom: 20px; }
	.lgv-ric .lgv-av--grande { width: 64px; height: 64px; font-size: 15px; }
	.lgv-ric h3.lgv-rk__nome { font-size: 26px; }
	.lgv-ric a.lgv-rk__profilo { margin-left: 0; }
	/* Telefono: la guida sopra; per ogni livello, livello e nota su una riga e le aree sotto. */
	.lgv-ric .lgv-rk__guida { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 0; }
	.lgv-ric ul.lgv-rk__livelli { display: block; padding: 0; }
	.lgv-ric ul.lgv-rk__livelli > li {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "liv nota" "aree aree";
		column-gap: 12px;
		padding: 8px 0;
	}
	.lgv-ric ul.lgv-rk__livelli > li + li { border-top: 1px dashed var(--lgv-filo); }
	/* Qui la capsula non sporge a sinistra: il pannello è troppo stretto. */
	.lgv-ric .lgv-liv { grid-area: liv; margin-left: 0; padding: 2px 0; }
	.lgv-ric .lgv-liv.is-top { padding: 2px 10px; }
	.lgv-rk__nota { grid-area: nota; }
	.lgv-rk__aree { grid-area: aree; margin-top: 2px; }
	.lgv-rk__aree:empty { display: none; }
}