/* ============================================================
   bluestudio — indice dei progetti
   Split: a sinistra l'identità del lavoro in vista (appuntata),
   a destra le card che salgono. Si aggiunge a style.css +
   servizio.css (da cui riusa .ssez, .swrap, .scta, .cap).
   ============================================================ */

.whero {
  display: flex; flex-direction: column;
  gap: clamp(1.4rem, 3vh, 2rem);
  padding: clamp(8rem, 18vh, 11rem) var(--pad) clamp(3rem, 7vh, 4.5rem);
}
.whero__meta {
  font-size: 0.85rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent);
}
.whero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  font-weight: 300; line-height: 0.99;
  letter-spacing: -0.04em; text-transform: uppercase;
  color: var(--fg-strong);
}
.whero__title strong { font-weight: 700; }
.whero__mask { display: block; overflow: hidden; }
.whero__line { display: block; }
.whero__intro {
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.65; max-width: 56ch; opacity: 0.8;
}

/* ---------- i pannelli ----------
   Sono i .plate della home: coreografia e stile arrivano da style.css
   e da initWorkDeck in main.js. Qui si aggiungono solo i crediti, che
   in questa pagina sono il motivo per cui esiste. */
.work--indice { position: relative; }

/* in alto a sinistra, sotto categoria e anno: lì si leggono davvero.
   In basso a destra finivano nell'angolo più scuro del gradiente e
   competevano con il titolo gigante. */
.plate__chi {
  position: absolute; left: var(--pad); top: calc(5vh + 3.4rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  color: var(--paper);
  max-width: 22rem;
}
.plate__chi-eti {
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  opacity: 0.55;
  margin-bottom: 0.35rem;
}
.wchi { font-size: 0.98rem; line-height: 1.3; }
.wchi b { font-weight: 600; }
.wchi em { font-style: normal; opacity: 0.62; }

/* sotto la categoria, a sinistra: in alto a destra andava a sbattere
   contro il numero gigante del pannello */
/* sotto i crediti: in basso la sua area urtava quella del titolo, che
   occupa tutta la larghezza del pannello */
.plate__nota {
  position: absolute; top: calc(5vh + 9.6rem); left: var(--pad);
  max-width: 22rem;
  font-size: 0.78rem; font-style: italic;
  color: var(--paper);
  padding: 0.5rem 0.75rem;
  background: rgba(1, 7, 38, 0.45);
  border-radius: 4px;
}

@media (max-width: 900px) {
  /* il titolo dei pannelli è gigante: i crediti gli lasciano spazio
     mettendosi sopra, allineati a sinistra come tutto il resto */

  /* la nota sta sotto i crediti: in basso finirebbe sopra il titolo */
  .plate__nota { top: 30vh; bottom: auto; left: var(--pad); right: var(--pad); max-width: none; }
}