/* Esempi · What. Apertura «Un infinito di possibilità»: schermate vere che si aprono, collassano al centro e lasciano la scritta.
   Sotto, sette casi. Menu fisso a sinistra, una schermata per caso, testo a sinistra e viste a destra. */

/* apertura scura a tutta pagina */
.infinito { position: relative; z-index: 1; height: 100svh; min-height: 620px; overflow: hidden;
  display: grid; place-items: center; perspective: 1400px; }
/* Sfuma solo il fondo, lasciando le dashboard definite fino al bordo.
   2/11 · trasparente, non più un fondo chiaro piatto: dove la notte di ::before sfuma del tutto
   deve vedersi l'aura fissa dietro, non una striscia piatta senza colore. */
.infinito { background: none; }
.infinito::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 52%,rgba(29,47,122,.55),transparent 72%),
    radial-gradient(40% 40% at 18% 86%,rgba(244,54,76,.14),transparent 70%),#071c27;
  -webkit-mask-image:linear-gradient(to bottom,#000 71%,rgba(0,0,0,.99) 75%,rgba(0,0,0,.96) 78%,rgba(0,0,0,.88) 81%,rgba(0,0,0,.72) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.28) 92%,rgba(0,0,0,.12) 95%,rgba(0,0,0,.03) 98%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 71%,rgba(0,0,0,.99) 75%,rgba(0,0,0,.96) 78%,rgba(0,0,0,.88) 81%,rgba(0,0,0,.72) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.28) 92%,rgba(0,0,0,.12) 95%,rgba(0,0,0,.03) 98%,transparent 100%);
}
.infinito-campo { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.tessera { position: absolute; left: 50%; top: 50%; width: clamp(150px, 15vw, 280px); aspect-ratio: 16 / 10; margin: 0; border-radius: 16px; overflow: hidden;
  background: #0b2533; box-shadow: 0 0 0 1px rgba(214, 229, 238, .22), 0 24px 48px -18px rgba(0, 0, 0, .65); will-change: transform, opacity; opacity: 0;
  transform: translate(-50%, -50%) scale(.1); }
.tessera img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.infinito-centro { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px; width: min(880px, 60%); text-align: center; container-type: inline-size; }
.infinito-sopra { color: var(--sky); }
.infinito-titolo { font: 500 min(8.6cqi, clamp(2.35rem, 4.8vw, 5.6rem))/1.02 var(--voce); letter-spacing: -.02em; color: var(--mint); white-space: nowrap; }
.infinito-titolo .lettera { display: inline-block; }
.infinito-lead { font-size: clamp(1.05rem, .95rem + .25vw, 1.2rem); line-height: 1.5; color: var(--sky-chiaro); max-width: 40rem; }
.infinito-azioni { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-top: 6px; }
.infinito-ancora { background: none; border: 0; padding: 10px 4px; color: var(--nebbia); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.infinito-ancora:hover { color: var(--mint); }
.infinito-punto { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--fucsia);
  box-shadow: 0 0 60px 20px rgba(244, 54, 76, .45); opacity: 0; z-index: 1; pointer-events: none; }
/* finché l'animazione non parte il testo resta nascosto, così non si vede due volte */
.js-infinito .infinito-centro > * { visibility: hidden; }

/* casi */
.casi { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); padding-top: clamp(48px, 8vh, 96px); }
.casi-menu { position: sticky; top: 96px; align-self: start; display: grid; gap: 14px; padding-bottom: 40px; }
.casi-menu-capo { color: var(--nebbia); }
.casi-menu ol { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linea); }
.casi-menu a { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--sky-chiaro);
  font: 500 .98rem/1.25 var(--display); transition: color .25s, transform .4s var(--esce); }
.casi-menu a:hover { color: var(--imperial); transform: translateX(4px); }
.casi-menu a[aria-current="true"] { color: var(--imperial); }
.casi-menu kbd { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; font: 500 .75rem/1 var(--mono);
  color: var(--sky-chiaro); box-shadow: 0 0 0 1px var(--linea-forte) inset; transition: background-color .25s, color .25s; }
.casi-menu a[aria-current="true"] kbd { background: var(--imperial); color: #fff; box-shadow: none; }
.casi-menu-nota { font-size: .8125rem; line-height: 1.45; color: var(--nebbia); }

.caso { min-height: calc(100svh - 96px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 3.4vw, 60px); align-items: center;
  padding-block: clamp(40px, 7vh, 80px); border-top: 1px solid var(--linea); scroll-margin-top: 72px; }
.caso:first-child { border-top: 0; }
.caso-testo { display: grid; gap: 20px; justify-items: start; }
.caso-nome { color: var(--sky); }
.caso-righe { display: grid; margin: 4px 0 0; width: 100%; }
.caso-righe > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-top: 1px solid var(--linea); }
.caso-righe > div:last-child { border-bottom: 1px solid var(--linea); }
.caso-righe dt { font: 500 .8125rem/1.5 var(--mono); color: var(--nebbia); padding-top: 2px; }
.caso-righe dd { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--mint); }
.caso-testo .cta { margin-top: 6px; height: 56px; }

/* viste del caso: una schermata grande, sotto le linguette per cambiarla */
.schermi { margin: 0; display: grid; gap: 14px; }
.schermi-palco { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #fff; cursor: zoom-in;
  box-shadow: 0 24px 56px -32px rgba(14, 46, 62, .35); }
.schermi-palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center;
  opacity: 0; visibility: hidden; }
.schermi-palco img.su { opacity: 1; visibility: visible; }
.schermi-linguette { display: flex; flex-wrap: wrap; gap: 8px; }
.schermi-linguette button { border: 0; border-radius: 999px; padding: 8px 14px; font: 500 .875rem/1 var(--display); color: var(--sky-chiaro); background: transparent;
  box-shadow: 0 0 0 1px var(--linea-forte) inset; cursor: pointer; transition: background-color .25s, color .25s; }
.schermi-linguette button:hover { color: var(--imperial); }
.schermi-linguette button[aria-pressed="true"] { background: var(--imperial); color: #fff; box-shadow: none; }
.schermi-vuoto { aspect-ratio: 16 / 10; border-radius: 14px; display: grid; place-items: center; color: var(--nebbia); box-shadow: 0 0 0 1px var(--linea) inset; }

/* schermata a tutto schermo */
.lente { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(7, 28, 39, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: zoom-out; }
.lente img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .8); }

@media (max-width: 1100px) {
  .casi { grid-template-columns: minmax(0, 1fr); }
  .casi-menu { position: sticky; top: 64px; z-index: 5; padding: 10px 0; background: var(--notte); overflow-x: auto; }
  .casi-menu-capo, .casi-menu-nota { display: none; }
  .casi-menu ol { display: flex; gap: 6px; border: 0; }
  .casi-menu a { white-space: nowrap; border: 0; padding: 6px 10px 6px 6px; border-radius: 999px; box-shadow: 0 0 0 1px var(--linea) inset; font-size: .875rem; }
  .caso { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}
@media (max-width: 600px) {
  .infinito { min-height: 960px; }
  .infinito-centro { width: calc(100% - 104px); gap: 16px; }
  .caso-righe > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tessera { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .schermi-palco img { transition: none; }
}

/* testata sopra l'apertura scura: logo e voci chiari finché l'apertura è in vista */
.su-scuro:not(.nav-aperto) .testa:not(.staccata) .nav-voce, .su-scuro:not(.nav-aperto) .testa:not(.staccata) .nav-apri { color: #f9fffb; }
.su-scuro:not(.nav-aperto) .testa:not(.staccata) .nav-apri i { background: #f9fffb; }
.su-scuro:not(.nav-aperto) .testa:not(.staccata) .nav-voce:hover, .su-scuro:not(.nav-aperto) .testa:not(.staccata) .nav-voce[aria-expanded="true"] { background: rgba(249, 255, 251, .1); }
.su-scuro:not(.nav-aperto) .testa:not(.staccata) .testa-prova { background: #f9fffb; color: var(--jet); }
.su-scuro:not(.nav-aperto) .testa.staccata { background: rgba(7, 28, 39, .82); box-shadow: 0 1px 0 rgba(214, 229, 238, .14); }
.su-scuro:not(.nav-aperto) .testa.staccata .nav-voce, .su-scuro:not(.nav-aperto) .testa.staccata .nav-apri { color: #f9fffb; }
.su-scuro:not(.nav-aperto) .testa.staccata .testa-prova { background: #f9fffb; color: var(--jet); }
.su-scuro:not(.nav-aperto) .hud { background: rgba(7, 28, 39, .6); color: #d6e5ee; box-shadow: 0 0 0 1px rgba(214, 229, 238, .14); }
.su-scuro:not(.nav-aperto) .hud span { color: #d6e5ee; }

/* azioni del caso: l'esempio vivo, la scheda da leggere con calma, il PDF */
.caso-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 6px; }
.caso-link { font: 500 .9375rem/1 var(--display); color: var(--imperial); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; padding: 8px 0; }
.caso-link:hover { text-decoration-thickness: 2px; }

/* ===================================================================== adattivo (21/10)
   Tra 1100 e 1500px menu, testo e viste stanno affiancati e la colonna del testo resta stretta:
   il titolo andava su sei righe. Ora segue la larghezza della sua colonna e non supera mai la misura di prima. */
.caso-testo { container-type: inline-size; }
.caso-testo .titolo-medio { font-size: clamp(1.6rem, min(1.1rem + 2.4vw, 10.5cqi), 3.4rem); letter-spacing: -.02em; font-family: var(--voce); font-weight: 500; }
@media (min-width: 1101px) { .casi-menu { top: calc(var(--testa-h) + 20px); } }


/* L'indice descrive un percorso lungo la pagina; le linguette nelle immagini cambiano vista. */
body[data-pagina="esempi"] .hud { display:none; }
.casi { grid-template-columns:170px minmax(0,1fr); gap:clamp(28px,3vw,52px); }
.casi-elenco { min-width:0; }
.casi-menu { top:calc(var(--testa-h,64px) + 28px); padding:0; z-index:20; }
.casi-indice { width:100%; }
.casi-indice summary { display:none; }
.casi-indice:not([open]) > .casi-indice-contenuto { display:block; }
.casi-menu-capo { display:block; font-size:.75rem; color:var(--jet); margin:0 0 10px; }
.casi-menu-nota { display:block; margin:0 0 18px; color:var(--nebbia); font-size:.8125rem; line-height:1.45; }
.casi-menu ol { display:grid; gap:0; border:0; overflow:visible; }
.casi-menu a { position:relative; gap:9px; min-height:44px; padding:9px 0; border:0; border-radius:0; box-shadow:none; color:var(--jet); font:400 .875rem/1.3 var(--display); white-space:normal; transform:none; transition:color .2s; }
.casi-menu a:hover { color:var(--imperial); transform:none; }
.casi-numero { flex:none; color:var(--nebbia); font:400 .6875rem/1 var(--mono); }
.casi-menu a[aria-current="location"] { color:var(--imperial); font-weight:600; }
.casi-menu a[aria-current="location"]::before { content:""; position:absolute; left:-13px; top:50%; width:5px; height:5px; border-radius:50%; background:var(--fucsia); transform:translateY(-50%); }
.casi-menu a:focus-visible,.casi-indice summary:focus-visible { outline:2px solid var(--imperial); outline-offset:4px; }
.caso { scroll-margin-top:calc(var(--testa-h,64px) + 28px); gap:clamp(24px,2.6vw,44px); }
.caso:first-child { padding-top:0; }
.caso-nome { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:.8125rem; }
.caso-posizione { color:var(--nebbia); white-space:nowrap; }
.caso-righe > div { grid-template-columns:minmax(80px,1fr) minmax(0,3fr); gap:12px; }
@media (max-width:1200px) {
  .casi { display:block; padding-top:24px; }
  .casi-menu { top:var(--testa-h,64px); padding:0; margin-bottom:24px; overflow:visible; border-block:1px solid var(--linea); }
  .casi-indice summary { display:flex; align-items:center; gap:12px; min-height:52px; cursor:pointer; list-style:none; font:500 .9375rem/1.3 var(--display); color:var(--jet); }
  .casi-indice summary::-webkit-details-marker { display:none; }
  .casi-contatore { margin-left:auto; color:var(--nebbia); font:400 .75rem/1 var(--mono); }
  .casi-indice summary svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .2s; }
  .casi-indice[open] summary svg { transform:rotate(180deg); }
  .casi-indice:not([open]) > .casi-indice-contenuto { display:none; }
  .casi-indice-contenuto { padding:10px 14px 14px; max-height:calc(100svh - var(--testa-h,64px) - 90px); overflow-y:auto; border-top:1px solid var(--linea); }
  .casi-menu ol { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
  .casi-menu-capo { margin-bottom:6px; }
  .casi-menu-nota { margin-bottom:10px; }
  .caso { scroll-margin-top:calc(var(--testa-h,64px) + 76px); }
}
@media (max-width:600px) {
  .casi-menu ol { grid-template-columns:minmax(0,1fr); }
  .caso-righe > div { grid-template-columns:minmax(0,1fr); gap:4px; }
}

/* L’indice resta nel margine, distinto dalla colonna degli esempi. */
@media (min-width:1201px) {
  .casi-menu { transform:translateX(calc(-1 * clamp(36px,4vw,76px))); }
}

/* Su desktop il titolo introduce l'intera vista; testo e immagine condividono lo spazio sotto. */
@media (min-width:901px) {
  .casi.riga { max-width:1800px; padding-inline:clamp(32px,4vw,76px); }
  .casi { column-gap:clamp(60px,6vw,100px); }
  .casi-menu { transform:none; }
  .caso { min-height:calc(100svh - var(--testa-h,76px) - 32px); padding-block:18px;
    grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:12px clamp(24px,2.5vw,44px);
    align-content:center; align-items:start; scroll-margin-top:calc(var(--testa-h,76px) + 16px); }
  .caso:first-child { padding-top:18px; }
  .caso-testo { display:contents; }
  .caso-nome { grid-column:1 / -1; font-size:.75rem; line-height:1.35; }
  .caso-testo .titolo-medio { grid-column:1 / -1; font-size:clamp(28px,min(3vw,4.6svh),46px); line-height:1.1; margin-bottom:8px; }
  .caso-righe { grid-column:1; grid-row:3; margin:0; }
  .caso-righe > div { grid-template-columns:82px minmax(0,1fr); gap:12px; padding-block:9px; }
  .caso-righe dt { font-size:.6875rem; line-height:1.45; }
  .caso-righe dd { font-size:clamp(15px,1.85svh,17px); line-height:1.4; }
  .caso-azioni { grid-column:1; grid-row:4; margin-top:0; gap:8px 16px; align-self:start; }
  .caso-azioni .cta { height:44px; margin:0; padding-inline:20px; font-size:.875rem; }
  .caso-link { font-size:.8125rem; padding-block:6px; }
  .schermi { grid-column:2; grid-row:3 / 5; align-self:center; gap:10px; }
  .schermi-linguette { gap:6px; }
  .schermi-linguette button { padding:8px 10px; font-size:.75rem; }
}
@media (min-width:901px) and (max-width:1200px) {
  .caso { min-height:calc(100svh - var(--testa-h,76px) - 86px); scroll-margin-top:calc(var(--testa-h,76px) + 68px); }
}
@media (min-width:901px) and (max-height:760px) {
  .caso { gap:10px 24px; padding-block:14px; }
  .caso-testo .titolo-medio { font-size:clamp(27px,4.4svh,34px); margin-bottom:2px; }
  .caso-righe > div { padding-block:7px; }
  .caso-righe dd { font-size:15px; line-height:1.35; }
  .casi-menu a { min-height:38px; padding-block:7px; }
  .casi-menu-nota { margin-bottom:10px; }
}

/* Destinatari aggiornati su main, accanto al numero e al nome del caso. */
.caso-per {color:var(--nebbia);font-size:.75rem;}