/* ============================================================
   Monarch Hoard — ADATTAMENTO LOGHI NEI RIQUADRI
   ------------------------------------------------------------
   COME SI USA
   1) Salva questo file in:  assets/css/logo-fit.css
   2) In vetrina.html, subito DOPO la riga di vetrina.css, aggiungi:
        <link rel="stylesheet" href="/static/css/logo-fit.css">
      Deve stare DOPO, altrimenti non ha effetto.
   Non serve toccare nessun altro file.
   ------------------------------------------------------------
   COSA RISOLVE
   Prima il logo usava max-width/max-height: i loghi grandi
   venivano rimpiccioliti, ma quelli piccoli restavano piccoli.
   Risultato: riquadri disomogenei.
   Ora il logo riempie sempre l'area disponibile mantenendo le
   proporzioni, sia che il file di partenza sia 200x200 sia
   2000x2000, sia che sia largo, alto o quadrato.
   ============================================================ */

/* ------------------------------------------------------------
   1) L'AREA DEL LOGO HA SEMPRE LA STESSA MISURA
   Il riquadro non si deforma mai in base all'immagine dentro:
   le misure sono decise qui, non dal file PNG.
   ------------------------------------------------------------ */
.scelta__logo {
  /* box-sizing: l'imbottitura non fa crescere il riquadro */
  box-sizing: border-box;

  width: 100%;
  height: 100px;          /* altezza fissa per gli EDITORI */
  padding: 6px;           /* respiro: il logo non tocca mai i bordi */

  display: flex;
  align-items: center;    /* centrato in verticale */
  justify-content: center;/* centrato in orizzontale */
  overflow: hidden;       /* nessuna fuoriuscita, mai */
}

/* Le collezioni hanno un riquadro un po' piu' alto (loghi spesso orizzontali) */
.scelta--collezione .scelta__logo {
  height: 118px;
}

/* ------------------------------------------------------------
   2) IL LOGO SI ADATTA AL RIQUADRO
   width/height 100% + object-fit: contain  =>  l'immagine viene
   RIDIMENSIONATA in entrambi i sensi (ingrandita se piccola,
   ridotta se grande) senza mai essere tagliata o deformata.
   ------------------------------------------------------------ */
.scelta__logo img {
  /* annulla i limiti del CSS precedente, che impedivano l'ingrandimento */
  max-width: none;
  max-height: none;

  width: 100%;
  height: 100%;
  object-fit: contain;      /* mantiene le proporzioni, niente ritaglio */
  object-position: center;

  display: block;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));

  /* qualita' migliore quando un logo piccolo viene ingrandito */
  image-rendering: auto;
}

/* ------------------------------------------------------------
   3) LIMITE DI SICUREZZA PER I LOGHI MOLTO PICCOLI
   Un file da 60x60 px ingrandito a 100 px si vedrebbe sgranato.
   Con questa regola i file sotto una certa misura reale non
   vengono gonfiati oltre il ragionevole: restano nitidi.
   La classe la mette da sola il codice JS (vedi logo-fit.js).
   ------------------------------------------------------------ */
.scelta__logo img.logo--minuscolo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* ------------------------------------------------------------
   4) CORREZIONE OTTICA PER FORME ESTREME
   Un logo molto largo e basso (es. una scritta lunga) con
   "contain" occuperebbe pochissima altezza e sembrerebbe minuscolo.
   Qui gli lasciamo usare tutta la larghezza disponibile.
   Un logo molto alto e stretto fa il contrario.
   Anche queste classi le assegna da solo logo-fit.js.
   ------------------------------------------------------------ */
.scelta__logo img.logo--largo {
  width: 100%;
  height: auto;
  max-height: 100%;
}

.scelta__logo img.logo--alto {
  width: auto;
  height: 100%;
  max-width: 100%;
}

/* ------------------------------------------------------------
   5) IMMAGINE NON ANCORA CARICATA
   Evita il "salto" del riquadro mentre il PNG sta arrivando.
   ------------------------------------------------------------ */
.scelta__logo img:not(.logo--pronto) {
  opacity: 0;
}
.scelta__logo img.logo--pronto {
  opacity: 1;
  transition: opacity .25s ease;
}

/* ------------------------------------------------------------
   6) SCHERMI PICCOLI
   Riquadri piu' compatti sul telefono, stesso comportamento.
   ------------------------------------------------------------ */
@media (max-width: 520px) {
  .scelta__logo { height: 78px; padding: 4px; }
  .scelta--collezione .scelta__logo { height: 90px; }
}