/**
 * Home "sportello". Solo la home usa queste classi; tutto il resto del sito
 * resta su base.css. Nessuna animazione, nessun webfont: i token sono gli
 * stessi di tokens.css.
 */

/* ---- Apertura: due ingressi ----------------------------------------- */
.sportello {
	background: var(--pc-color-header-bg);
	color: #fff;
	padding-block: clamp(2.75rem, 2rem + 3vw, 4.75rem) clamp(2.5rem, 2rem + 2.5vw, 4rem);
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.sportello__titolo {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -.025em;
	font-weight: var(--pc-weight-bold);
	text-wrap: balance;
	color: #fff;
}
.sportello__titolo-ambito {
	display: block;
	margin-bottom: .9rem;
	font-size: 1.05rem;
	font-weight: var(--pc-weight-medium);
	letter-spacing: 0;
	color: rgba(255, 255, 255, .78);
}
.sportello__titolo-grande { display: block; }
.sportello__testo {
	margin: 1.25rem 0 0;
	max-width: 62ch;
	font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, .86);
}
.sportello__ingressi {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 2.75rem;
}
.ingresso {
	display: grid;
	align-content: start;
	gap: .7rem;
	padding: 2rem 2.25rem 2.25rem;
	border-radius: var(--pc-radius-lg);
}
.ingresso h2 { margin: 0; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.015em; }
.ingresso p { margin: 0; line-height: 1.55; }
.ingresso .bottone { justify-self: start; margin-top: .6rem; }
.ingresso--nuova {
	background: #fff;
	color: var(--pc-color-ink);
	box-shadow: 0 12px 32px -20px rgb(0 20 50 / .55);
}
.ingresso--nuova p { color: var(--pc-color-ink-muted); }
.ingresso--avviata {
	background: rgba(0, 24, 58, .42);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
}
.ingresso--avviata p { color: rgba(255, 255, 255, .8); }
.ingresso__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: .6rem; }
.ingresso--avviata .bottone--contorno { border-color: rgba(255, 255, 255, .6); color: #fff; }
.ingresso--avviata .bottone--contorno:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }
.ingresso__link { color: #fff; font-size: var(--pc-text-small); font-weight: var(--pc-weight-medium); text-underline-offset: 3px; }
.sportello__nota {
	margin: 2rem 0 0;
	max-width: 80ch;
	font-size: var(--pc-text-small);
	line-height: 1.5;
	color: rgba(255, 255, 255, .68);
}

/* ---- Intestazioni di sezione (titolo a sinistra, contenuto a destra) --- */
.scheda-servizio, .iter, .domande, .libretto-sezione { padding-block: clamp(3rem, 2.25rem + 2.5vw, 5rem); }
.scheda-servizio__griglia, .domande__griglia {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}
.scheda-servizio__testa h2, .iter__testa h2, .domande__testa h2, .libretto-sezione__testo h2 {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--pc-color-ink);
	text-wrap: balance;
}
.scheda-servizio__testa h2, .domande__testa h2 { max-width: 16ch; }
.scheda-servizio__testa p, .iter__testa p, .domande__testa p { margin: .9rem 0 0; color: var(--pc-color-ink-muted); line-height: 1.55; }
.scheda-servizio__testa p, .domande__testa p { max-width: 36ch; }
.scheda-servizio__testa .azione-secondaria, .domande__testa .azione-secondaria { display: inline-block; margin-top: 1.25rem; font-size: var(--pc-text-base); }

/* ---- Scheda "cosa comprende": tabella a righe -------------------------- */
.scheda-servizio__tabella { width: 100%; border-collapse: collapse; border-top: 2px solid var(--pc-color-ink); font-size: var(--pc-text-base); }
.scheda-servizio__tabella th, .scheda-servizio__tabella td { padding: 1.05rem 0; border-bottom: 1px solid var(--pc-color-rule); vertical-align: top; text-align: left; line-height: 1.55; }
.scheda-servizio__tabella th { width: 34%; padding-right: 2rem; font-weight: var(--pc-weight-bold); color: var(--pc-color-ink); }
.scheda-servizio__tabella td { color: #2b4760; }
.scheda-servizio__tabella td a { color: var(--pc-color-accent); font-weight: var(--pc-weight-medium); }

/* ---- Iter: tre colonne separate da righe ------------------------------- */
.iter { background: var(--pc-color-paper-alt); border-block: 1px solid var(--pc-color-rule); }
.iter__testa { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end; }
.iter__testa p { margin: 0; max-width: 60ch; }
.iter__colonne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.5rem; border-top: 1px solid var(--pc-color-rule-strong); }
.iter__colonne > div { padding: 1.75rem 2.25rem 0 0; }
.iter__colonne > div + div { padding-left: 2.25rem; border-left: 1px solid var(--pc-color-rule-strong); }
.iter__colonne h3 { margin: 0 0 .6rem; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.015em; color: var(--pc-color-ink); }
.iter__colonne p { margin: 0; color: #2b4760; line-height: 1.55; max-width: 36ch; }
.iter__colonne .azione-secondaria { display: inline-block; margin-top: 1rem; font-size: var(--pc-text-base); }

/* ---- Domande frequenti: elenco a righe --------------------------------- */
.domande__elenco { margin: 0; border-top: 2px solid var(--pc-color-ink); }
.domande__voce { padding: 1.2rem 0; border-bottom: 1px solid var(--pc-color-rule); }
.domande__voce dt { font-weight: var(--pc-weight-bold); font-size: 1.1rem; line-height: 1.3; color: var(--pc-color-ink); }
.domande__voce dd { margin: .45rem 0 0; color: #2b4760; line-height: 1.55; max-width: 62ch; }

/* ---- Libretto -------------------------------------------------------- */
.libretto-sezione { background: var(--pc-color-paper-alt); border-top: 1px solid var(--pc-color-rule); }
.libretto-sezione__griglia { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.libretto-sezione__media { margin: 0; display: grid; place-items: center; }
.libretto-sezione__media img { width: min(100%, 24rem); height: auto; border-radius: var(--pc-radius-lg); box-shadow: 0 18px 40px -20px rgb(0 20 50 / .45); }
.libretto {
	width: min(100%, 22rem);
	aspect-ratio: 88 / 118;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	padding: 2.25rem 1.5rem;
	background: linear-gradient(160deg, #1c4b8f, #0d3570 70%);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 7px;
	box-shadow: 0 22px 44px -22px rgb(0 20 50 / .6), 0 2px 4px rgb(0 20 50 / .2);
	color: #fff;
	text-align: center;
	transform: rotate(-2.5deg);
}
.libretto .timbro--libretto { width: 11rem; height: 8rem; filter: none; overflow: visible; }
.libretto .timbro--libretto .marchio-passaporto__fondo { display: none; }
.libretto .timbro--libretto .marchio-passaporto__zampa { transform-box: fill-box; transform-origin: center; transform: scale(2); }
.libretto .timbro--libretto .marchio-passaporto__zampa { fill: #f3c84d; }
.libretto__riga { font-size: .9rem; letter-spacing: .14em; font-weight: var(--pc-weight-bold); line-height: 1.35; }
.libretto__riga--unione { font-size: .75rem; color: rgba(255, 255, 255, .78); letter-spacing: .18em; }
.libretto-sezione__testo p { margin: 1rem 0 0; color: #2b4760; line-height: 1.6; max-width: 56ch; }
.libretto-sezione__link { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.libretto-sezione__link .azione-secondaria { font-size: var(--pc-text-base); }

/* ---- Mobile ---------------------------------------------------------- */
@media (max-width: 56rem) {
	.sportello__ingressi { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
	.ingresso { padding: 1.5rem 1.35rem 1.6rem; }
	.scheda-servizio__griglia, .domande__griglia, .iter__testa, .libretto-sezione__griglia { grid-template-columns: 1fr; gap: 1.75rem; }
	.scheda-servizio__testa h2, .domande__testa h2 { max-width: none; }
	.scheda-servizio__tabella th { width: 38%; padding-right: 1rem; }
	.iter__colonne { grid-template-columns: 1fr; margin-top: 2rem; }
	.iter__colonne > div { padding: 1.4rem 0 1.5rem; border-bottom: 1px solid var(--pc-color-rule); }
	.iter__colonne > div + div { padding-left: 0; border-left: 0; }
	.iter__colonne > div:last-child { border-bottom: 0; padding-bottom: 0; }
	.libretto-sezione__media { order: 2; padding-top: .5rem; }
	.libretto { width: min(100%, 16rem); transform: none; }
}
@media (max-width: 36rem) {
	.scheda-servizio__tabella th, .scheda-servizio__tabella td { display: block; width: auto; padding: 0; }
	.scheda-servizio__tabella th { padding-top: 1rem; }
	.scheda-servizio__tabella td { padding: .3rem 0 1rem; }
	.scheda-servizio__tabella tr:last-child td { border-bottom: 0; }
}

/* Il titolo grande inizia sempre con la maiuscola, ma nel codice resta la
   frase intera così come la legge Google. */
.sportello__titolo-grande::first-letter { text-transform: uppercase; }
.ingresso__link { display: inline-block; padding-block: .6rem; }

/* ---- Ultime news (compatte) ------------------------------------------ */
.ultime-news { padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); border-top: 1px solid var(--pc-color-rule); }
.ultime-news__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.ultime-news__testa h2 { margin: 0; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); letter-spacing: -.015em; color: var(--pc-color-ink); }
.ultime-news__testa .azione-secondaria { font-size: var(--pc-text-small); white-space: nowrap; }
.ultime-news__elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ultime-news__voce a { display: grid; grid-template-columns: 5.5rem 1fr; gap: .9rem; align-items: center; text-decoration: none; color: inherit; }
.ultime-news__foto img { display: block; width: 5.5rem; height: 4rem; object-fit: cover; border-radius: .5rem; }
.ultime-news__testo { display: grid; gap: .2rem; min-width: 0; }
.ultime-news__testo time { font-size: .75rem; color: var(--pc-color-ink-faint); }
.ultime-news__testo strong { font-size: .95rem; line-height: 1.3; color: var(--pc-color-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ultime-news__voce a:hover strong { text-decoration: underline; }
@media (max-width: 56rem) {
	.ultime-news__elenco { grid-template-columns: 1fr; gap: .75rem; }
	.ultime-news__voce a { grid-template-columns: 4.25rem 1fr; gap: .75rem; }
	.ultime-news__foto img { width: 4.25rem; height: 3.25rem; }
	.ultime-news__testo strong { font-size: .9rem; }
}

/* ---- Rifinitura: stessi contenuti, spazi e dettagli più curati -------- */
.sportello { border-top: 0; padding-block: clamp(3rem, 2rem + 3.5vw, 5.25rem) clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.sportello__titolo { line-height: 1.05; letter-spacing: -.03em; }
.sportello__titolo-ambito { margin-bottom: 1rem; font-size: 1rem; color: rgba(255, 255, 255, .72); }
.sportello__testo { margin-top: 1.5rem; max-width: 58ch; color: rgba(255, 255, 255, .84); }
.sportello__ingressi { gap: 1.25rem; margin-top: 3rem; }
.ingresso { display: flex; flex-direction: column; gap: .75rem; padding: 2rem 2.25rem; }
.ingresso h2 { font-size: 1.35rem; letter-spacing: -.02em; }
.ingresso p { max-width: 54ch; margin-bottom: .75rem; }
.ingresso > .bottone, .ingresso__azioni { margin-top: auto; }
.ingresso > .bottone { align-self: flex-start; }
.ingresso .bottone { min-height: 3rem; padding-inline: 1.4rem; }
.ingresso__azioni .bottone { margin-top: 0; }
.ingresso--nuova { box-shadow: 0 1px 2px rgb(4 18 46 / .2), 0 24px 48px -28px rgb(4 18 46 / .7); }
.ingresso--avviata { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.ingresso--avviata .bottone--contorno { border-color: rgba(255, 255, 255, .5); }
.ingresso__link { text-decoration-color: rgba(255, 255, 255, .45); }
.ingresso__link:hover { text-decoration-color: #fff; }
.sportello__nota { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); max-width: none; font-size: .8rem; color: rgba(255, 255, 255, .62); }

.scheda-servizio__testa h2, .iter__testa h2, .domande__testa h2, .libretto-sezione__testo h2 { letter-spacing: -.024em; line-height: 1.12; }
.scheda-servizio__tabella, .domande__elenco { border-top-width: 1px; }
.scheda-servizio__tabella th, .scheda-servizio__tabella td { padding-block: 1.15rem; }
.scheda-servizio__tabella th { font-weight: 600; }
.iter__testa { align-items: start; }
.iter__colonne { counter-reset: passo; margin-top: 3rem; border-top-color: var(--pc-color-rule); }
.iter__colonne > div { counter-increment: passo; padding-top: 1.5rem; }
.iter__colonne > div + div { border-left-color: var(--pc-color-rule); }
.iter__colonne > div::before { content: "0" counter(passo); display: block; margin-bottom: .85rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--pc-color-accent); }
.iter__colonne h3 { font-size: 1.2rem; letter-spacing: -.018em; }
.domande__voce { padding-block: 1.35rem; }
.domande__voce dt { font-size: 1.05rem; font-weight: 600; }
.domande__voce dd { margin-top: .5rem; }
.ultime-news__foto img { border-radius: var(--pc-radius); }
.ultime-news__testo strong { font-weight: 600; }
.libretto { border-radius: 10px; transform: rotate(-2deg); }
@media (max-width: 56rem) {
	.sportello__ingressi { gap: 1rem; margin-top: 2.25rem; }
	.ingresso { padding: 1.5rem 1.35rem; }
	.libretto { transform: none; }
}
@media (max-width: 36rem) {
	.scheda-servizio__tabella th { padding: 1rem 0 0; border-bottom: 0; }
	.scheda-servizio__tabella td { padding: .3rem 0 1rem; }
}