/* Coristi — una scheda per voce, con ritratto (o monogramma finche' la foto manca) */

/* Colori di sezione: derivati dalla nota poetica di ciascuna voce in home.
   Ogni "ink" passa 4.5:1 su carta, su crema e sull'estremo chiaro del proprio gradiente. */
.voce-soprani{--voce-ink:#8b672a;--voce-a:#f8f2e6;--voce-b:#ecdcbb}
.voce-contralti{--voce-ink:#41706b;--voce-a:#dfeae9;--voce-b:#b3ccc9}
.voce-tenori{--voce-ink:#406da1;--voce-a:#e5ecf5;--voce-b:#c0d2e6}
.voce-bassi{--voce-ink:#855a38;--voce-a:#ebe3d7;--voce-b:#c9b69b}

.coristi-hero{max-width:900px;margin:auto;padding:clamp(3rem,8vw,8rem) clamp(1.3rem,5vw,4rem) clamp(1.5rem,4vw,2.5rem)}
.coristi-hero h1{font:600 clamp(3rem,6.5vw,6rem)/.98 var(--serif);letter-spacing:-.05em;margin:.4rem 0 1.4rem}
.coristi-hero .lead{font:500 1.15rem/1.5 var(--serif);color:var(--muted);max-width:680px;margin:0}

/* filtri per sezione */
.voce-filtri{max-width:1240px;margin:auto;padding:0 clamp(1.3rem,5vw,4rem) 1rem;display:flex;flex-wrap:wrap;gap:.55rem}
.voce-filtro{border:1px solid #cfc6b6;background:transparent;color:var(--ink);padding:.5rem .85rem;font:700 .75rem var(--sans);cursor:pointer}
.voce-filtro:hover,.voce-filtro:focus-visible{border-color:var(--navy)}
.voce-filtro.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.voce-filtro span{font-weight:500;opacity:.75;margin-left:.35rem}
.coristi-conteggio{max-width:1240px;margin:auto;padding:0 clamp(1.3rem,5vw,4rem);font-size:.82rem;color:var(--muted)}

.sezione-voce{max-width:1240px;margin:auto;padding:clamp(2.5rem,5vw,3.5rem) clamp(1.3rem,5vw,4rem) 0}
.sezione-voce[hidden]{display:none}
/* intestazione di sezione: il righello richiama un pentagramma */
.sezione-testa{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  border-bottom:1px solid #d9d1c4;padding-bottom:.9rem;margin-bottom:1.8rem;position:relative}
.sezione-testa h2{font:600 clamp(1.6rem,2.6vw,2.3rem)/1 var(--serif);letter-spacing:-.03em;margin:0;color:var(--voce-ink)}
.sezione-testa .conteggio{font:700 .74rem var(--sans);letter-spacing:.1em;color:var(--voce-ink);text-transform:uppercase}
.sezione-testa .pentagramma{flex:1;min-width:60px;height:11px;align-self:center;
  background:repeating-linear-gradient(to bottom,var(--voce-ink) 0 1px,transparent 1px 3px);opacity:.35}
.sezione-nota{font:italic 500 .92rem/1.45 var(--serif);color:var(--muted);margin:-1.2rem 0 1.8rem;max-width:640px}

.coristi-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:1.8rem 1.2rem}
.corista{margin:0;text-align:center}
.corista-ritratto{width:104px;height:104px;margin:0 auto .85rem;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;position:relative;
  background:linear-gradient(145deg,var(--voce-a) 0%,var(--voce-b) 100%);
  box-shadow:inset 0 0 0 1px var(--voce-ink)}
.corista-ritratto img{width:100%;height:100%;object-fit:cover;display:block}
.corista-ritratto .monogramma{font:500 1.85rem/1 var(--serif);letter-spacing:-.04em;color:var(--voce-ink)}
.corista-nome{display:block;font:600 .78rem var(--sans);letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.corista-cognome{display:block;font:600 1.12rem/1.2 var(--serif);letter-spacing:-.01em;margin-top:.15rem}
.corista-voce{display:block;margin-top:.4rem;font:700 .66rem var(--sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--voce-ink)}

.coristi-coda{max-width:1240px;margin:auto;padding:clamp(3.5rem,7vw,5.5rem) clamp(1.3rem,5vw,4rem) clamp(4.5rem,9vw,7rem)}
.coristi-coda p{max-width:700px;margin:0 0 1.2rem;font:500 clamp(1.2rem,2.2vw,1.75rem)/1.25 var(--serif);letter-spacing:-.02em}

@media(max-width:760px){
  .coristi-griglia{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:1.5rem .9rem}
  .corista-ritratto{width:84px;height:84px}
  .corista-ritratto .monogramma{font-size:1.5rem}
  .corista-cognome{font-size:1rem}
  .sezione-testa .pentagramma{display:none}
}
@media(prefers-reduced-motion:no-preference){
  .corista-ritratto{transition:box-shadow .2s ease,transform .2s ease}
  .corista:hover .corista-ritratto{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--voce-ink)}
}