/* Foto e illustrazione della pagina Avvisi. Il tema condiviso resta in findme-brillante.css. */

/* SEZIONE 1 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto #versione-navigazione-notifiche,
.fm-notifiche-foto #versione-navigazione-notifiche + p {
  /* Mantiene la diagnostica nel menu Analisi. */
  display: none;
}

/* SEZIONE 2 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .avvisi-hero {
  /* Dispone testo e foto affiancati. */
  display: grid;
  /* Divide lo spazio in due colonne flessibili. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Allinea il testo al centro della foto. */
  align-items: center;
  /* Separa la foto dal testo. */
  gap: 32px;
  /* Mantiene il testo facilmente leggibile. */
  text-align: left;
}

/* SEZIONE 3 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .avvisi-hero h1 {
  /* Adatta il titolo senza renderlo eccessivo. */
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  /* Rende compatto il titolo. */
  line-height: 1.15;
  /* Separa il titolo dagli altri testi. */
  margin: 12px 0 18px;
}

/* SEZIONE 4 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .avvisi-hero-foto {
  /* Elimina il margine predefinito della figura. */
  margin: 0;
  /* Consente alla foto di restringersi. */
  min-width: 0;
  /* Riprende gli angoli morbidi del sito. */
  border-radius: 24px;
  /* Ritaglia soltanto gli angoli del riquadro. */
  overflow: hidden;
  /* Crea un bordo luminoso intorno alla foto. */
  border: 3px solid #ffffff;
  /* Dà profondità alla foto. */
  box-shadow: 0 12px 28px rgba(18, 96, 174, .14);
}

/* SEZIONE 5 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .avvisi-hero-foto img {
  /* Elimina lo spazio sotto la foto. */
  display: block;
  /* Adatta la foto al riquadro. */
  width: 100%;
  /* Mantiene visibili tutti gli animali senza deformazioni. */
  height: auto;
}

/* SEZIONE 6 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .avvisi-hero-badge {
  /* Mantiene il badge compatto. */
  display: inline-block;
  /* Lascia spazio intorno al testo. */
  padding: 9px 14px;
  /* Richiama l’arancio del marchio. */
  background: #fff1e6;
  /* Assicura contrasto sul fondo chiaro. */
  color: #84380e;
  /* Arrotonda il badge. */
  border-radius: 30px;
  /* Evidenzia il messaggio. */
  font-weight: 700;
}

/* SEZIONE 7 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .avvisi-telefono {
  /* Include il bordo nelle dimensioni. */
  box-sizing: border-box;
  /* Contiene l’illustrazione anche sul telefono. */
  width: min(100%, 290px);
  /* Centra il telefono e lo separa dai pulsanti. */
  margin: 0 auto 24px;
  /* Crea la cornice interna del telefono. */
  padding: 16px 12px 18px;
  /* Disegna la cornice blu del telefono. */
  border: 5px solid #123d70;
  /* Disegna gli angoli del telefono. */
  border-radius: 30px;
  /* Richiama lo sfondo della schermata. */
  background: #edf5ff;
  /* Dà profondità senza invadere il modulo. */
  box-shadow: 0 10px 24px rgba(18, 61, 112, .12);
}

/* SEZIONE 8 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .avvisi-telefono-camera {
  /* Definisce la larghezza del dettaglio decorativo. */
  width: 56px;
  /* Mantiene sottile il dettaglio. */
  height: 5px;
  /* Centra il dettaglio della cornice. */
  margin: 0 auto 12px;
  /* Riprende il colore della cornice. */
  background: #123d70;
  /* Arrotonda il dettaglio. */
  border-radius: 8px;
}

/* SEZIONE 9 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .avvisi-telefono-label {
  /* Separa l’etichetta dalla foto. */
  margin: 0 0 10px;
  /* Distingue l’esempio dallo stato reale. */
  font-size: .8rem;
  /* Centra l’etichetta. */
  text-align: center;
  /* Mantiene leggibile l’avvertenza. */
  color: #52657a;
}

/* SEZIONE 10 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .avvisi-telefono-foto {
  /* Elimina lo spazio sotto la foto. */
  display: block;
  /* Adatta la foto alla schermata. */
  width: 100%;
  /* Mantiene le proporzioni originali. */
  height: auto;
  /* Arrotonda la foto nella schermata. */
  border-radius: 15px;
}

/* SEZIONE 11 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .avvisi-telefono-messaggio {
  /* Dispone le righe dell’avviso una sotto l’altra. */
  display: grid;
  /* Separa le righe. */
  gap: 6px;
  /* Separa l’avviso dalla foto. */
  margin-top: 10px;
  /* Lascia spazio interno alla notifica. */
  padding: 12px;
  /* Riproduce un avviso chiaro sul telefono. */
  background: #ffffff;
  /* Arrotonda la notifica. */
  border-radius: 14px;
  /* Mantiene leggibile il contenuto. */
  color: #123d70;
  /* Mantiene il testo compatto. */
  font-size: .9rem;
  /* Lascia spazio tra le righe. */
  line-height: 1.4;
}

/* SEZIONE 12 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .avvisi-telefono-messaggio small {
  /* Distingue il suggerimento dal testo principale. */
  font-size: .8rem;
}

/* SEZIONE 13 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto #stato-notifiche,
.fm-notifiche-foto #stato-zona {
  /* Evidenzia gli stati reali del dispositivo. */
  padding: 14px 16px;
  /* Rende riconoscibili i riquadri di stato. */
  background: #edf5ff;
  /* Richiama il blu FindMe. */
  border-left: 4px solid #1260ae;
  /* Arrotonda gli stati. */
  border-radius: 12px;
  /* Evita che messaggi lunghi escano dal riquadro. */
  overflow-wrap: anywhere;
}

/* SEZIONE 14 · Aspetto della pagina Avvisi. */
.fm-notifiche-foto .riquadro-attivazione .pulsante {
  /* Rende evidenti i pulsanti di gestione. */
  width: 100%;
  /* Include lo spazio interno nella larghezza. */
  box-sizing: border-box;
  /* Mantiene una comoda area di tocco. */
  min-height: 52px;
  /* Separa i due pulsanti. */
  margin-top: 10px;
}

/* SEZIONE MOBILE · Foto e testo senza colonne strette. */
@media (max-width: 700px) {
  .fm-notifiche-foto .avvisi-hero {
    /* Dispone foto e testo su una sola colonna. */
    grid-template-columns: minmax(0, 1fr);
    /* Riduce lo spazio tra testo e foto. */
    gap: 20px;
    /* Centra il titolo sugli schermi piccoli. */
    text-align: center;
  }
  .fm-notifiche-foto .avvisi-hero-foto {
    /* Contiene la foto mantenendo tutte le specie visibili. */
    width: min(100%, 430px);
    /* Centra il riquadro fotografico. */
    margin: 0 auto;
  }
  .fm-notifiche-foto .avvisi-telefono {
    /* Mantiene compatta la schermata illustrativa. */
    width: min(100%, 230px);
  }
}