/* ==========================================================
   1. CONTENITORE PRINCIPALE (Centrato e Flessibile)
   ========================================================== */
.foto-classe-block {
  display: flex;
  flex-direction: column;
  align-items: center;       /* Centra testo e immagine */
  width: 100%;
  margin: 20px auto;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  box-sizing: border-box;
  font-family: Georgia, serif;
}

/* ==========================================================
   2. ELENCO NOMI (Compattato)
   ========================================================== */
.elenco-nomi {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

/* Elimina gli ampi spazi vuoti sopra e sotto i titoli e i paragrafi */
.elenco-nomi h3,
.elenco-nomi h4,
.elenco-nomi p {
  margin: 3px 0;        /* Distanza verticale minima tra gli elementi */
  line-height: 1.3;     /* Interlinea compatta e ben leggibile */
}

.nome-alunna {
  display: inline-block;
  padding: 1px 2px;     /* Spaziatura minima attorno ai singoli nomi */
}

/* ==========================================================
   3. CONTENITORE IMMAGINE (Qualsiasi risoluzione)
   ========================================================== */
.foto-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 6px;
  /* FONDAMENTALE: permette al fumetto di uscire sopra la foto senza venire tagliato */
  overflow: visible !important; 
}

.foto-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ==========================================================
   4. HOTSPOT (Aree interattive sulle persone)
   ========================================================== */
.hotspot {
  position: absolute;
  cursor: pointer;
  border-radius: 50%;
  aspect-ratio: 1; /* Forzo la forma circolare sovrascrivendo l'altezza HTML */
  box-sizing: border-box;
  transition: background-color 0.2s ease, border 0.2s ease;
  z-index: 10;
}

/* Stile della casella quando selezionata (mouse o touch) */
.hotspot:hover,
.hotspot.attivo {
  /* background-color: rgba(255, 235, 59, 0.3); /* Alone giallo trasparente */
  border: 2px dashed #ff4f07;                 /* Bordo tratteggiato arancione */
}

/* ==========================================================
   5. FUMETTO CON IL NOME (Sopra il rettangolo)
   ========================================================== */
/* Etichetta nera e gialla */
/* ETICHETTA CON IL NOME (Sotto-sopra) */
.hotspot::after {
  content: attr(data-name);
  position: absolute;
  /* Posiziona il fumetto SEMPRE subito sopra la casella, a prescindere dall'altezza del testo */
  bottom: calc(100% + 8px); 
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.85);
  color: #ffeb3b;
  border: 1px solid #ffeb3b;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  
  /* --- NOVITÀ PER ANDARE A CAPO --- */
  white-space: pre-line;         /* Permette al testo di andare a capo */
  text-align: center;            /* Centra il nome rispetto al cognome */
  line-height: 1.25;             /* Mantiene compatte le due righe */
  
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 100;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Modifica anche la freccetta per adattarsi alla nuova posizione */
.hotspot::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);      /* Posizionata esattamente alla base del fumetto */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #ffeb3b transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 100;
}

/* Mostra il fumetto e la freccetta all'attivazione */
.hotspot:hover::after,
.hotspot.attivo::after,
.hotspot:hover::before,
.hotspot.attivo::before {
  opacity: 1;
  visibility: visible;
}

.istruzioni-overlay {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.85);
  color: #ffeb3b;
  border: 1px solid #ffeb3b;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
  text-align: center;
  margin: 0;
  z-index: 20;
  pointer-events: none; /* Fondamentale: evita di bloccare gli hotspot in basso */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  max-width: 90%; /* Adatta la larghezza a qualsiasi foto */
  box-sizing: border-box;
}

/* Ottimizzazione per smartphone */
@media (max-width: 600px) {
  .istruzioni-overlay {
    font-size: 10px;
    padding: 4px 8px;
    bottom: 6px;
    white-space: normal; /* Evita che il testo esca dai bordi su schermi stretti */
  }
}

.istruzioni-box {
  display: block;
  width: fit-content;
  margin: 10px auto;
  background-color: rgba(0, 0, 0, 0.85);
  color: #ffeb3b;
  border: 1px solid #ffeb3b;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

/* ==========================================================
   💡 TRUCCO POSIZIONAMENTO
   Scommenta la riga sotto per vedere i rettangoli in rosso mentre li regoli!
   ========================================================== */
.hotspot { background: rgba(255, 0, 0, 0.3) !important; border: 1px solid red !important; }