/* Governance — pagina di consultazione, non di persuasione.
   Chi arriva qui cerca un nome o un documento: deve trovarlo subito.
   Niente carte colorate, niente numeroni: tipografia e filetti. */

body { --c: var(--blue); }

.gov {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 32px clamp(60px, 8vw, 100px);
}


/* ── intestazione: nessun fondo. Era una fascia blu a tutta pagina, ma questa
   e' una pagina di consultazione: il titolo sta sulla carta come tutti gli
   altri, incolonnato col resto invece di stare al centro. ── */

.gov__top {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 84px) 32px 0;
}

.gov__k {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c);
}

.gov__h {
  margin: 0 0 16px;
  max-width: 24ch;
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--ink);
}

.gov__d { margin: 0; max-width: 58ch; font-size: 17.5px; line-height: 1.6; color: var(--muted); }

/* ── sezioni ── */


/* Tre schede affiancate: una aperta per volta, il resto sparisce.
   Chi arriva cerca un nome o un documento, non deve scorrere gli altri due. */
/* Pastiglie invece di titoli sottolineati: la scheda aperta e' piena di
   colore, le altre restano grigie. Il segnale sta nel fondo, non in un
   tratto sottile, e non serve nessuna riga a tenerle insieme. */
.gov__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* le pastiglie sono piu' basse dei titoli sottolineati di prima: senza
     questo margine finiscono attaccate al paragrafo d'apertura */
  margin-top: clamp(20px, 2.2vw, 30px);
}

.gov__tab {
  position: relative;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-family: var(--display);
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: -.02em;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.gov__tab:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.gov__tab.is-attiva { background: var(--c); color: #fff; }
.gov__tab.is-attiva:hover { background: var(--c); color: #fff; }
.gov__tab:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }

.gov__pan { padding-top: clamp(28px, 3.4vw, 40px); animation: gov-apri .28s ease both; }

@keyframes gov-apri {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* sottotitolo dentro una voce che ne raccoglie due */
.gov__sub {
  margin: 44px 0 18px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.gov__note {
  margin: 26px 0 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── elenco a definizione: organi e dati legali ── */

.org { margin: 0; }

.org > div {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.org > div:first-child { border-top: 0; padding-top: 0; }

.org dt { font-size: 16px; font-weight: 750; color: var(--ink); }
.org dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.org dd b { color: var(--ink); font-weight: 700; }

/* la variante fitta, per i dati legali: righe più basse */
.org--fitta > div { padding: 11px 0; }
.org--fitta dt, .org--fitta dd { font-size: 15.5px; }

/* ── persone ──
   Al passaggio la riga si apre e mostra percorso, progetti seguiti e link;
   il riquadro della foto resta a sinistra e cresce dalla base, col testo
   a destra e la figura che sbuca oltre il bordo del riquadro.
   L'altezza si anima con grid-template-rows: 0fr → 1fr, l'unico modo di
   passare da "niente" all'altezza reale del contenuto senza fissarla a mano. */

.ppl { list-style: none; margin: 0; padding: 0; }

/* La riga sta nella colonna del testo: linea di separazione, foto e "+"
   partono dagli stessi assi del titolo e delle schede. La lastra bianca
   della riga aperta deve invece sporgere, per non stringere il contenuto:
   sta su ::before, che esce di 18px per lato senza spostare la griglia. */
.ppl li {
  position: relative;
  display: block;
  min-height: 92px;
  padding: 18px 30px 18px 76px;
  border-top: 1px solid var(--border);
  transition: opacity .3s ease,
              padding .42s cubic-bezier(.22, 1, .36, 1),
              min-height .42s cubic-bezier(.22, 1, .36, 1);
}

.ppl li::before {
  content: "";
  position: absolute;
  inset: 0 -18px;
  z-index: -1;
  border-radius: 16px;
  transition: background-color .3s ease, box-shadow .3s ease;
}

.ppl li:not(.ppl--todo)::after {
  content: "+";
  position: absolute;
  top: 17px;
  right: 0;
  font-family: var(--display);
  font-size: 27px;
  line-height: 1;
  color: var(--c);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}

/* aperta, il segno sparisce: niente × sopra la foto */
.ppl li:not(.ppl--todo):hover::after,
.ppl li:not(.ppl--todo):focus-within::after {
  transform: rotate(45deg) scale(1.15);
  opacity: 0;
}

.ppl li:first-child { border-top: 0; }

/* la riga aperta: fondo, ombra e sopra le vicine */
.ppl li:hover,
.ppl li:focus-within {
  z-index: 1;
  border-top-color: transparent;
}

.ppl li:hover::before,
.ppl li:focus-within::before {
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(14, 27, 44, .1);
}

.ppl li:hover + li,
.ppl li:focus-within + li { border-top-color: transparent; }

/* aperta: il riquadro della foto resta a sinistra e cresce sul posto,
   il testo si sposta a destra. Meno strada da fare = movimento più
   fluido: anima solo il padding sinistro e le misure del riquadro. */
.ppl li:not(.ppl--todo):hover,
.ppl li:not(.ppl--todo):focus-within {
  padding-left: 170px;
  min-height: 226px;
}

/* le altre si smorzano, così l'occhio va su quella aperta */
.ppl:hover li:not(:hover):not(:focus-within) { opacity: .45; }

/* il posto della foto: tondo, con le iniziali finché non c'è.
   È in assoluto così left/width/height interpolano e il passaggio
   da cerchietto a riquadro grande è un unico movimento fluido. */
/* Il riquadro sta al centro della scheda, non incollato in alto: su una
   scheda aperta e alta la figura restava in cima con il vuoto sotto. */
.ppl__ph {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--display);
  font-size: 17px;
  color: var(--c);
  transition: background-color .3s ease,
              width .42s cubic-bezier(.22, 1, .36, 1),
              height .42s cubic-bezier(.22, 1, .36, 1),
              border-radius .42s cubic-bezier(.22, 1, .36, 1),
              font-size .42s cubic-bezier(.22, 1, .36, 1);
}

/* la foto è un ritaglio senza sfondo: intera, ancorata alla base del
   riquadro. Cresce dalla base e, aperta, sbuca un po' oltre il bordo
   superiore del riquadro (il riquadro non la ritaglia). */
.ppl__ph img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  transition: height .42s cubic-bezier(.22, 1, .36, 1);
}

/* quando la foto c'è, le iniziali non servono — e nemmeno lo sfondo:
   il ritaglio poggia direttamente sulla pagina */
.ppl__ph:has(img) > span { display: none; }
.ppl__ph:has(img) { background: transparent; }

.ppl li:not(.ppl--todo):hover .ppl__ph,
.ppl li:not(.ppl--todo):focus-within .ppl__ph {
  width: 150px;
  height: 190px;
  border-radius: 20px;
  font-size: 34px;
  /* niente lastra bianca dietro la figura: resta immersa nella pagina */
  background: transparent;
}

/* la figura esce dal riquadro: più alta del suo contenitore, base ferma */
.ppl li:not(.ppl--todo):hover .ppl__ph img,
.ppl li:not(.ppl--todo):focus-within .ppl__ph img {
  height: 112%;
}

.ppl b { display: block; font-size: 17.5px; font-weight: 750; letter-spacing: -.01em; }

.ppl__r {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c);
}

/* la riga che si vede sempre */
.ppl__s { margin: 9px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.58; color: var(--muted); }

/* ── la parte che si apre ── */

.ppl__x {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .38s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}

.ppl__x > div { overflow: hidden; min-height: 0; }

.ppl li:hover .ppl__x,
.ppl li:focus-within .ppl__x {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows .42s cubic-bezier(.22, 1, .36, 1), opacity .34s ease .08s;
}

/* i browser senza supporto a 0fr aprono di scatto, ma aprono */
@supports not (grid-template-rows: 0fr) {
  .ppl__x { display: none; }
  .ppl li:hover .ppl__x, .ppl li:focus-within .ppl__x { display: block; opacity: 1; }
}

.ppl__x p {
  margin: 13px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
}

/* Stessa pastiglia tonda del footer, ma su fondo chiaro: il cerchio prende
   il colore del marchio invece del bianco.
   Sta in alto a destra, dove prima c'era il "+": la scheda aperta perde quel
   segno e l'icona ne prende il posto, invece di galleggiare sotto al testo. */
.ppl__l {
  position: absolute;
  top: 14px;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 13%, transparent);
  color: var(--c);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: background-color .16s ease, opacity .28s ease;
}

/* compare solo a scheda aperta: nell'elenco chiuso cinque pastiglie
   farebbero rumore e ruberebbero il posto al "+" */
.ppl li:hover .ppl__l,
.ppl li:focus-within .ppl__l {
  opacity: 1;
  pointer-events: auto;
  transition: background-color .16s ease, opacity .3s ease .1s;
}

.ppl__l svg { width: 17px; height: 17px; }
.ppl__l:hover { background: color-mix(in srgb, var(--c) 26%, transparent); }
.ppl__l:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; opacity: 1; pointer-events: auto; }

/* i posti ancora da confermare: smorzati e senza apertura */
.ppl--todo .ppl__ph { background: var(--grigio-vuoto); color: #b3bdc8; }
.ppl--todo b { color: #b3bdc8; }
.ppl--todo .ppl__r { color: #9aa8b6; }

/* i posti vuoti non si aprono e non reagiscono: non c'è nulla da mostrare.
   Serve la doppia classe per battere .ppl li:hover, che viene prima. */
.ppl li.ppl--todo:hover,
.ppl li.ppl--todo:focus-within {
  background: none;
  box-shadow: none;
  border-top-color: var(--border);
}

.ppl li.ppl--todo:first-child:hover { border-top-color: transparent; }

.ppl li.ppl--todo:hover .ppl__ph,
.ppl li.ppl--todo:focus-within .ppl__ph { transform: none; background: var(--grigio-vuoto); }

/* e non devono nemmeno smorzare le vicine */
.ppl:hover li.ppl--todo:not(:hover) { opacity: .45; }

/* ── documenti ── */

.docs { list-style: none; margin: 0; padding: 0; }
.docs li { position: relative; }
.docs li:hover { z-index: 1; }

.docs a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px;
  margin: 0 -16px;
  border-top: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              opacity .3s ease,
              background-color .3s ease,
              color .18s ease;
}

.docs li:first-child a { border-top: 0; }

.docs:hover a:not(:hover) { transform: scale(.97); opacity: .5; }

.docs:hover a:hover {
  transform: scale(1.03);
  background: var(--paper);
  border-top-color: transparent;
}

.docs li:hover + li a { border-top-color: transparent; }

/* la freccia compare al passaggio, come su un elenco di file */
.docs a::after {
  content: "↓";
  margin-left: auto;
  font-size: 16px;
  color: var(--c);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.docs a:hover { color: var(--c); }
.docs a:hover::after { opacity: 1; transform: translateY(2px); }
.docs a:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }

.docs b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.docs span { font-size: 14.5px; color: var(--muted); }

.lnk { color: var(--c); text-decoration: none; border-bottom: 1px solid currentColor; }
.lnk:hover { opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .gov__tab { transition: none; }
  .gov__pan { animation: none; }
  .ppl li, .ppl__ph, .ppl__ph img, .ppl__x, .docs a, .docs a::after { transition: none; }
  .ppl:hover li:not(:hover) { opacity: 1; }
  .ppl li:hover .ppl__ph { transform: none; }
  /* niente apertura animata: il testo esteso è sempre visibile */
  .ppl__x { grid-template-rows: 1fr; opacity: 1; }
  .docs:hover a:not(:hover), .docs:hover a:hover { transform: none; opacity: 1; }
}

@media (max-width: 640px) {
  /* l'intestazione stringe come il resto: se resta a 32px il titolo
     sporge a sinistra rispetto alle schede e alle righe sotto */
  .gov, .gov__top { padding-left: 22px; padding-right: 22px; }
  .org > div { grid-template-columns: 1fr; gap: 6px; }
  /* sugli schermi stretti il riquadro aperto resta più contenuto */
  .ppl li:not(.ppl--todo):hover,
  .ppl li:not(.ppl--todo):focus-within { padding-left: 124px; min-height: 168px; }
  .ppl li:not(.ppl--todo):hover .ppl__ph,
  .ppl li:not(.ppl--todo):focus-within .ppl__ph { width: 104px; height: 132px; font-size: 26px; border-radius: 16px; }
  .docs a { flex-direction: column; gap: 4px; }
  .docs a::after { display: none; }
}