/* Pagina Casi HAIT: solo regole di pagina. Tema, header, footer, pulsanti, hero e pannello finale sono in ../theme.css. */
.case-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem 2rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line-soft)}
.case-index a{display:flex;gap:.9rem;align-items:baseline;font-size:.875rem;font-weight:700;color:var(--bright)}
.case-index a span{font-size:.9688rem;font-weight:500;color:var(--text)}
@media(hover:hover) and (pointer:fine){.case-index a:hover span{text-decoration:underline;text-underline-offset:4px}}

.case-list{display:grid;gap:clamp(1rem,2vw,1.5rem);padding:0 var(--gutter) clamp(2.5rem,5vw,4rem)}
.case{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:2rem;padding:clamp(1.75rem,3.5vw,3rem);scroll-margin-top:5.75rem}
.case-aside{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.case-number{font-size:3.5rem;font-weight:300;line-height:1;color:var(--bright)}
.case-content{max-width:56rem}
.case-content>.eyebrow{margin-bottom:.6rem}
.case-content h2{max-width:22ch;margin-bottom:1.25rem;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.08}
.case-context,.case-application{max-width:62ch;color:var(--muted)}
.case-application{margin-top:1rem;color:var(--text)}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.75rem}
.roles h3{margin-bottom:.5rem;font-size:1.125rem}
.roles p{font-size:.9688rem;color:var(--muted)}
.learning{margin-top:1.5rem;padding:1rem 1.25rem;border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;background:rgba(10,18,38,.55);font-size:.9688rem;color:var(--muted)}
.learning strong{margin-right:.5rem;color:var(--text)}

@media(max-width:800px){
  .case{grid-template-columns:5rem minmax(0,1fr);gap:1.25rem}
  .case-number{font-size:2.75rem}
  .case-index{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .case-index{grid-template-columns:1fr}
  .case{grid-template-columns:1fr;gap:.75rem}
  .case-aside{flex-direction:row;align-items:center;gap:1rem}
  .case-number{font-size:2.5rem}
  .roles{grid-template-columns:1fr;gap:1.25rem}
}