/* =========================================================
   Clienti · indice dei clienti con una storia
   Righe grandi tipo archivio; su desktop l'anteprima segue il cursore,
   su telefono ogni riga ha la sua miniatura.
   ========================================================= */

/* ---------- testa ---------- */
.cl-testa{padding:calc(var(--menu-h) + clamp(56px,9vw,150px)) 0 clamp(48px,6vw,96px)}
.cl-testa .etichetta{margin-bottom:clamp(18px,2vw,28px)}
.cl-testa h1{margin-bottom:clamp(20px,2.4vw,36px)}

/* ---------- indice ---------- */
.cl-corpo{position:relative;z-index:2;padding-bottom:clamp(80px,10vw,160px)}
.cl-intestazione,.cl-riga{display:grid;grid-template-columns:4.5ch 64px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 17ch;grid-template-areas:"n mini nome settore fatto vai";column-gap:clamp(16px,2.4vw,40px);align-items:center}
.cl-intestazione{grid-template-areas:none}
.cl-intestazione{padding-bottom:14px;font-family:var(--f-etichetta);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grigio)}
.cl-indice{border-bottom:1px solid var(--bianco-12)}
.cl-indice li{border-top:1px solid var(--bianco-12)}
.cl-riga{position:relative;padding-block:clamp(18px,2vw,30px);transition:opacity .5s var(--curva-out)}
.cl-n{font-family:var(--f-etichetta);font-weight:800;font-size:13px;color:var(--grigio);transition:color .4s var(--curva-out)}
.cl-nome{font-size:var(--t-m);font-weight:500;line-height:1;letter-spacing:-.045em;transition:transform .6s var(--curva-out)}
.cl-settore,.cl-fatto{color:var(--bianco-80);font-size:var(--testo)}
.cl-fatto{color:var(--grigio)}
.cl-vai{font-family:var(--f-etichetta);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--bianco);opacity:.5;transition:opacity .4s,color .4s}
.cl-n{grid-area:n}.cl-nome{grid-area:nome}.cl-settore{grid-area:settore}.cl-fatto{grid-area:fatto}.cl-vai{grid-area:vai;justify-self:end}
.cl-mini{grid-area:mini;width:64px;height:114px;object-fit:cover;border-radius:4px;filter:saturate(.85) brightness(.85);transition:filter .5s var(--curva-out)}
.cl-riga:hover .cl-mini{filter:none}

@media (hover:hover) and (pointer:fine){
  .cl-indice:hover .cl-riga{opacity:.32}
  .cl-indice .cl-riga:hover{opacity:1}
  .cl-riga:hover .cl-nome{transform:translateX(clamp(10px,1.2vw,22px))}
  .cl-riga:hover .cl-n,.cl-riga:hover .cl-vai{color:var(--lime);opacity:1}
}
.cl-riga:focus-visible{outline:2px solid var(--lime);outline-offset:6px}

/* anteprima che segue il cursore (solo desktop) */
.cl-anteprima{position:fixed;left:0;top:0;z-index:3;width:clamp(180px,15vw,260px);aspect-ratio:9/16;border-radius:6px;overflow:hidden;pointer-events:none;
  opacity:0;transform:translate3d(var(--x,50vw),var(--y,50vh),0) translate(-50%,-50%) scale(.86);transition:opacity .35s var(--curva-out),scale .5s var(--curva-out);
  box-shadow:0 30px 80px rgba(0,0,0,.55);background:var(--nero-2)}
.cl-anteprima.attiva{opacity:1;scale:1.163}
.cl-anteprima video{width:100%;height:100%;object-fit:cover}

/* ---------- chiusa ---------- */
.cl-chiusa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;padding-bottom:clamp(96px,12vw,180px)}

/* ---------- telefono e tablet ---------- */
@media (max-width:900px){
  .cl-intestazione{display:none}
  .cl-riga{grid-template-columns:minmax(0,1fr) 72px;justify-items:start;grid-template-areas:"n mini" "nome mini" "settore mini" "fatto mini" "vai mini";row-gap:6px;column-gap:18px;align-items:start}
  .cl-n{grid-area:n}
  .cl-nome{grid-area:nome;font-size:clamp(30px,8.4vw,44px);margin-block:2px 6px}
  .cl-settore{grid-area:settore}
  .cl-fatto{grid-area:fatto}
  .cl-vai{grid-area:vai;justify-self:start;opacity:1;color:var(--lime);margin-top:10px;min-height:24px}
  .cl-mini{grid-area:mini;width:72px;height:128px;object-fit:cover;border-radius:4px;align-self:center}
  .cl-anteprima{display:none}
  .cl-chiusa{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .cl-riga,.cl-nome,.cl-anteprima{transition:none}
}