/* ============================================================
   MALSCH ITALIA — galleria a tutto schermo

   Stesse regole del resto del sito: niente raggi, niente ombre,
   niente icone decorative. I comandi sono etichette testuali come
   le altre del tema (.label: maiuscolo, spaziato, piccolo).

   Il fondo e' scuro e non bianco: e' l'unico punto del sito dove il
   contenuto e' SOLO la fotografia, e su fondo chiaro le ambientate
   chiare perdono i bordi. La regola 80/15/5 vale per le pagine, non
   per un visore che per definizione e' 100% foto.
   ============================================================ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;                 /* sopra .site-header, che sta a 100 */
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-4);
  background: #0E0E0D;
  color: #fff;
  opacity: 0;
  transition: opacity 0.22s var(--ease-out);
}
.lb.is-visibile { opacity: 1; }
.lb[hidden] { display: none; }

/* la pagina sotto non deve scorrere mentre il visore e' aperto */
html.lb-aperta { overflow: hidden; }

/* --- barra in alto: contatore a sinistra, Chiudi a destra -------------- */

.lb__barra {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.lb__conta { color: rgba(255, 255, 255, 0.6); }

.lb__chiudi {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 4px 2px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out);
}
.lb__chiudi:hover { border-bottom-color: #fff; }

/* --- la foto ----------------------------------------------------------- */

.lb__scena {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lb__dida {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: var(--measure);
}
.lb__dida[hidden] { display: none; }

/* --- avanti / indietro -------------------------------------------------- */

.lb__nav {
  grid-row: 2;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.75rem;
  line-height: 1;
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
  transition: color 0.18s var(--ease-out);
}
.lb__nav:hover { color: #fff; }
.lb__nav--prec { grid-column: 1; }
.lb__nav--succ { grid-column: 3; }
.lb__nav[hidden] { visibility: hidden; display: block; }  /* tiene la colonna */

/* --- l'innesco sulla scheda prodotto ------------------------------------ */

.product__zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.product__zoom img { transition: opacity 0.3s var(--ease-out); }

/* --- gli inneschi sulla scheda progetto --------------------------------- */

.progetto__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* --- schermi stretti ---------------------------------------------------- */

@media (max-width: 600px) {
  .lb {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    padding: var(--space-2) var(--space-2) var(--space-3);
  }
  .lb__scena { grid-column: 1; grid-row: 2; }
  /* su mobile si scorre col dito: le frecce vanno in fondo, affiancate,
     invece che ai lati dove ruberebbero larghezza alla foto */
  .lb__nav { grid-row: 3; padding: var(--space-2); }
  .lb__nav--prec { grid-column: 1; justify-self: start; }
  .lb__nav--succ { grid-column: 1; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .lb,
  .lb__chiudi,
  .lb__nav,
  .product__zoom img { transition: none; }
}