/* VELINA SULLE FOTO DEL TEAM
   PC: compare all'hover. Smartphone e tablet: compare quando la foto entra nello schermo
   (la classe .in-vista la aggiunge src/js/team.js). */
:root {
  --velina-url: url("/festival-giornalismo-culturale/resources/img/team/velina.webp");
  --velina-opacita: 1;         /* intensità della velina (0 = niente, 1 = piena) */
  --velina-durata: 0.4s;       /* durata della dissolvenza */
  --foto-team-max: 320px;      /* dimensione massima della foto nell'elenco */
}

.team-foto {
  position: relative;
  display: block;
  line-height: 0;
}

.team-foto img {
  display: block;
}

.team-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--velina-url) center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity var(--velina-durata) ease;
  pointer-events: none;
}
/* webp tonde, niente border */
.staff-item .autore-thumbnail {
  border: none;
  border-radius: 0;
}
/* PC (dispositivi con hover) */
@media (hover: hover) {
  .staff-item:hover .team-foto::after,
  .team-foto:hover::after {
    opacity: var(--velina-opacita);
    transition-delay: .2s;
    transition-duration: 1s;
  }
}

/* Smartphone e tablet (niente hover): compare scrollando */
@media (hover: none) {
  .team-foto.in-vista::after {
    opacity: var(--velina-opacita);
    transition-delay: .1s;
    transition-duration: 1.2s;
  }
}

/* Pagina singola */
.team-foto--tonda {
  display: inline-block;
  align-self: flex-start;
}

/* DIMENSIONE MASSIMA FOTO NELL'ELENCO */
.staff-item .team-foto {
  width: 100%;
  max-width: var(--foto-team-max);
}

.staff-item .team-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}