/* Squadre — dal prototipo approvato (squadre_parti.html) */

/* ═══ SQUADRE · primo livello ═══ */
.titolo-sezione{ display:flex; align-items:center; gap:16px; padding-top:18px }
.titolo-sezione svg{ width:54px; height:54px }
.titolo-sezione h1{ margin:0; font:900 clamp(var(--c-dato), 8vw, var(--c-grande))/.85 var(--f-titolo); text-transform:uppercase; letter-spacing:-.01em }
/* le sei liste: il colore d'identità resta (decisione di Fabio, 26/08), ma come striscia, non come fondo */
.liste{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:2px solid var(--inchiostro); margin-top:16px }
.liste button{ overflow:hidden; display:grid; gap:2px; align-content:start; text-align:left; padding:0 12px 10px; border:0; border-right:1px solid var(--filetto); background:var(--carta); color:var(--inchiostro); cursor:pointer; min-width:0 }
.liste button:last-child{ border-right:0 }
.liste button::before{ content:''; height:7px; margin:0 -12px 8px; background:var(--id) }
.liste button.bianco::before{ background:repeating-linear-gradient(90deg,var(--id) 0 10px,transparent 10px 14px); box-shadow:inset 0 -1px 0 var(--id) }
/* ★ il dato più grande dell'etichetta: il conto (69) grande, il nome della lista e «squadre» piccoli */
.liste b{ font:700 var(--c-testo)/1.05 var(--f-titolo); text-transform:uppercase; letter-spacing:.03em; color:var(--grigio) }
.liste .n{ font:900 var(--c-sottotitolo)/1 var(--f-titolo); color:var(--inchiostro) }
.liste .n small{ font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.04em; color:var(--grigio); margin-left:4px }
.liste button[aria-selected="true"] b{ color:var(--inchiostro) }
.liste button[aria-selected="true"]{ background:var(--velo); box-shadow:inset 0 -5px 0 var(--inchiostro) }
.strumenti{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:14px 0 4px }
.strumenti .filtro input{ border:0; background:none; color:var(--inchiostro); font:600 var(--c-testo) var(--f-testo); width:18ch; outline:none }
.striscia i.dn.fuori{ background:none !important; outline:1px dashed var(--grigio) }
.nota45{ font-size:var(--c-testo); color:var(--grigio); margin:8px 0 0 }
.cartello{ font-size:var(--c-evidenza); line-height:1.45; margin:12px 0 0; max-width:62ch }
.legenda{ display:flex; flex-wrap:wrap; gap:6px 18px; font:600 var(--c-nota) var(--f-cifre); color:var(--grigio); margin-top:14px }
.legenda i{ display:inline-block; width:12px; vertical-align:-2px; margin-right:6px; background:var(--inchiostro) }
.scaffale{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr)); gap:14px; margin-top:18px }
.club{ display:grid; gap:10px; padding:0 16px 14px; border:1px solid var(--filetto); background:var(--carta); color:var(--inchiostro); text-align:left; cursor:pointer; font:inherit; min-width:0 }
.club::before{ content:''; height:7px; margin:0 -16px; background:linear-gradient(90deg,var(--c1) 0 60%,var(--c2) 60%); box-shadow:inset 0 -1px 0 var(--filetto) }
.club:hover,.club:focus-visible{ border-color:var(--inchiostro); outline:none }
.club .testa{ display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center }
.club .st{ width:48px; height:52px; display:flex; align-items:center; justify-content:center }
.club .st img{ max-width:48px; max-height:52px; object-fit:contain }
.club .st .stemma-svg,.club .st .stemma-svg svg{ width:auto; height:48px }
.club .st .iniz{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:2px solid var(--inchiostro); font:900 var(--c-titoletto) var(--f-titolo) }
.club h3{ margin:0; font:800 var(--c-sottotitolo)/1 var(--f-titolo); text-transform:uppercase; letter-spacing:.01em; overflow-wrap:normal; word-break:normal; hyphens:none }
.club .testa > span:nth-child(2){ min-width:0 }
.club .chi{ font-size:var(--c-nota); color:var(--grigio); margin-top:4px; display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline }
.club .chi b{ font-size:var(--c-testo); font-weight:600; color:var(--inchiostro); margin-left:4px }
.club .num{ text-align:right; font:900 var(--c-titolo)/.85 var(--f-titolo) }
.club .num small{ display:block; max-width:7.5ch; margin-left:auto; font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.02em; text-transform:uppercase; color:var(--grigio); margin-top:4px }
/* la striscia: una tacca per stagione dal 1929-30 — piena in A, a metà in B, bassa più sotto */
.striscia{ display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); align-items:end; gap:1px; height:30px; border-bottom:2px solid var(--inchiostro) }
.striscia i{ display:block; height:0 }
.striscia i.a{ height:100%; background:var(--inchiostro) }
.striscia i.b{ height:50%; background:var(--grigio) }
.striscia i.c{ height:22%; background:var(--grigio); opacity:.6 }
.striscia i.dn{ outline:1px dashed var(--inchiostro); outline-offset:-1px }
.anni-st{ display:flex; justify-content:space-between; font:600 var(--c-nota) var(--f-cifre); color:var(--grigio); margin-top:-6px }
.club .ordine{ font:600 var(--c-nota) var(--f-cifre); color:var(--grigio); border-top:1px solid var(--filetto); padding-top:8px }
.club .ordine b{ font:800 var(--c-titoletto) var(--f-titolo); color:var(--inchiostro); margin-right:6px }
.club .chips{ display:flex; flex-wrap:wrap; gap:6px }
.chip{ font:600 var(--c-nota) var(--f-cifre); letter-spacing:.03em; border:1px solid var(--filetto); padding:3px 8px; color:var(--grigio); background:var(--carta) }
.chip b{ font-size:var(--c-testo); color:var(--inchiostro); margin-left:4px }
.vuoto{ border:1px dashed var(--filetto); padding:28px; font-size:var(--c-testo); color:var(--grigio); margin-top:24px }
.vuoto h2{ color:var(--inchiostro); margin:0 0 8px } .vuoto ul{ margin:10px 0 0; padding-left:22px; color:var(--inchiostro) }
.altri-tasto{ margin-top:18px }
/* la scheda del club, al tocco */
#p-club{ top:50%; left:50%; transform:translate(-50%,-50%); width:min(700px,calc(100vw - 24px)); max-height:88vh; padding:0 }
#p-club .fascia{ height:10px; background:linear-gradient(90deg,var(--c1) 0 60%,var(--c2) 60%) }
#p-club .corpo-s{ padding:16px 22px 22px; display:grid; gap:14px }
#p-club .intesta{ display:flex; gap:16px; align-items:center }
#p-club .intesta .st{ width:84px; height:84px; display:flex; align-items:center; justify-content:center; flex:none }
#p-club .intesta img{ max-width:84px; max-height:84px }
#p-club .intesta .stemma-svg svg{ height:80px; width:auto }
#p-club h2{ font:900 var(--c-titolo)/.95 var(--f-titolo); text-transform:uppercase; margin:0 }
#p-club h4{ margin:8px 0 0; font:700 var(--c-nota) var(--f-cifre); letter-spacing:.1em; text-transform:uppercase; color:var(--grigio); border-bottom:2px solid var(--inchiostro); padding-bottom:4px }
#p-club dl{ display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:8px 16px; margin:0; align-items:baseline }
#p-club dt{ color:var(--grigio); font-size:var(--c-nota) } #p-club dd{ margin:0; font-weight:600; font-size:var(--c-titoletto) }
#p-club dd small{ display:block; font-weight:400; font-size:var(--c-testo); color:var(--grigio); line-height:1.4 }
#p-club dd a{ color:var(--inchiostro) }
#p-club .striscia-grande .striscia{ height:44px }
#p-club .striscia-grande{ display:grid; gap:10px }
#p-club .azioni{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
#p-club .azioni a.primo{ background:var(--velo); border:2px solid var(--inchiostro); font-weight:700 }
@media (max-width:900px){ .liste{ grid-template-columns:repeat(3,minmax(0,1fr)) } .liste button:nth-child(3){ border-right:0 } .liste button:nth-child(-n+3){ border-bottom:1px solid var(--filetto) } }
@media (max-width:760px){
  .titolo-sezione h1{ font-size:var(--c-dato) } .titolo-sezione svg{ width:42px; height:42px }
  .liste b{ font-size:var(--c-testo) }
  .scaffale{ grid-template-columns:1fr }
  .club h3{ font-size:var(--c-titoletto) } .club .num{ font-size:var(--c-titolo) }
  #p-club dl{ grid-template-columns:1fr; gap:0 } #p-club dd{ margin-bottom:8px }
  #p-club h2{ font-size:var(--c-sottotitolo) }
}

/* ★ sito nuovo: SETTE liste (il 7° tasto «Pre Unico», ardesia: ★ 09/10/2026 niente viola, C.6) */
.liste{ grid-template-columns:repeat(7,minmax(0,1fr)) }
.liste b{ overflow-wrap:anywhere }
@media (max-width:1200px){ .liste b{ font-size:var(--c-nota) } .liste .n{ font-size:var(--c-titoletto) } }
@media (max-width:900px){ .liste{ grid-template-columns:repeat(4,minmax(0,1fr)) } .liste button:nth-child(3){ border-right:1px solid var(--filetto) } .liste button:nth-child(4){ border-right:0 }
  .liste button:nth-child(-n+3){ border-bottom:1px solid var(--filetto) } .liste button:nth-child(4){ border-bottom:1px solid var(--filetto) } }
@media (max-width:760px){ .liste b{ font-size:var(--c-nota); letter-spacing:.01em } .liste .n{ font-size:var(--c-titoletto) } .liste .n small{ display:block; margin:2px 0 0; font-size:var(--c-etichetta) } .liste button{ padding:0 8px 8px } .liste button::before{ margin:0 -8px 8px } }
.altra-lista{ margin-top:14px; display:grid; grid-template-columns:minmax(0,1fr); gap:14px }
/* 06/10 · sul telefono la città lunga della scheda club (Serie C: «San Miniato (Ponte a Egola)…») allargava la pagina a 870 px: va a capo */
.club .chi b[data-intero],.club .chi span{ white-space:normal !important; overflow-wrap:anywhere !important; min-width:0 }
/* ★ 07/10/2026 sera (collaudo a 320 px: «CAMPIO-/NATI»; e a 375 l'ottava cella vuota): l'etichetta della lista va a capo fra le
     parole e una parola che non entra si stringe intera (data-adatta); sul telefono la settima lista prende due colonne: niente buchi */
.liste b .lw{ display:inline-block; max-width:100% }
@media (max-width:900px){ .liste button:last-child:nth-child(4n+3){ grid-column:span 2; border-right:0 } }