/* static/css/components/image-preview-modal.css
   Minimal styles for the global image preview modal.
*/

html.no-scroll,
html.no-scroll body {
  overflow: hidden;
}

.img-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.img-preview-modal.is-open {
  display: block;
}

.img-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.img-preview-dialog {
  position: absolute;
  inset: 0;
  margin: auto;

  width: min(92vw, 720px);
  max-height: min(86vh, 720px);
  height: auto;

  display: flex;
  flex-direction: column;

  background: var(--color-background);
  border-radius: var(--border-radius-r);
  box-shadow: var(--box-shadow-containers);
  overflow-y: auto;
}

.img-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.img-preview-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.img-preview-img {
  width: 100%;
  height: auto; /* L'altezza scala in proporzione alla larghezza */
  max-height: 65vh; /* Evita che un'immagine altissima spinga via il testo senza motivo */
  object-fit: contain;
  background: rgba(0, 0, 0, 0.03);
  display: block; /* Rimuove i micro-spazi bianchi sotto le immagini */
}

.img-preview-meta {
  padding: 30px 14px 14px;
  display: grid;
  gap: 10px;
  justify-content: center;
}

.img-preview-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

/* Default: hide actions row unless modal has actions */
.img-preview-actions {
  display: none;
}

.img-preview-modal.has-actions .img-preview-actions {
  display: flex;
}

/*general rules for when it's visible (STAFF)*/
.img-preview-actions {
  justify-content: flex-end;
  box-shadow: var(--box-shadow-buttons);
}

.img-preview-replace {
  border: 0;
  padding: 10px 12px;
  border-radius: var(--border-radius-r);
  cursor: pointer;
  background: var(--color-primary);
  font-size: var(--font-size-r);
  font-weight: var(--font-weight-semi);
}

/* MOBILE: let it breathe */
@media (max-width: 480px) {
  .img-preview-dialog {
    width: min(94vw, 720px);
    
    /* IL FIX anche su mobile: max-height invece di height */
    max-height: min(90vh, 720px);
    height: auto;
    
    border-radius: 14px;
  }
  
  .img-preview-img {
    max-height: 55vh; /* Su mobile lasciamo più spazio in basso per scritte e bottoni */
  }
}