/* Fotografia din portofoliu, deschisa mare. Perechea lui site/js/portofoliu.js.

   Venea de la Shopify, scrisa inline in pagina, si s-a pierdut la conversie odata cu
   scriptul. Atributele au ramas, deci pozele aratau apasabile si nu faceau nimic. */

.nl-lb{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s;
}
.nl-lb[hidden]{ display:none !important; }
.nl-lb.nl-lb--in{ opacity:1; }
.nl-lb-backdrop{
  position:absolute; inset:0; background:rgba(5,5,6,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.nl-lb-stage{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  max-width:min(92vw, 1100px); max-height:90vh;
}
.nl-lb-img{
  display:block; max-width:100%; max-height:82vh; object-fit:contain;
  border-radius:12px; box-shadow:0 32px 80px rgba(0,0,0,.6);
  transition:opacity .2s, transform .25s var(--ease-out-cubic,ease);
}
.nl-lb.nl-lb--in .nl-lb-img{ transform:scale(1); }
.nl-lb-img{ transform:scale(.96); }
.nl-lb-img.nl-lb--loading{ opacity:0; }
.nl-lb-info{
  display:flex; gap:10px; align-items:baseline; margin-top:14px;
  opacity:0; transition:opacity .3s .1s;
}
.nl-lb.nl-lb--in .nl-lb-info{ opacity:1; }
.nl-lb-title{ color:#fff; font-size:15px; font-weight:600; }
.nl-lb-caption{ color:rgba(255,255,255,.5); font-size:13px; }
.nl-lb-close{
  position:absolute; top:20px; right:20px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08); color:#fff; font-size:16px; cursor:pointer;
  display:grid; place-items:center; transition:background .2s, border-color .2s;
}
.nl-lb-close:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); }
/* Fotografia e un buton: se poate ajunge la ea si cu tastatura, si atunci trebuie sa se
   vada unde esti. */
.nl-pf--clickable { cursor: zoom-in; }
.nl-pf--clickable:focus-visible { outline: 2px solid #ff2fb0; outline-offset: 3px; }

/* Cine a cerut mai putina miscare primeste deschiderea seaca, nu una animata. */
@media (prefers-reduced-motion: reduce) {
  .nl-lb, .nl-lb-img, .nl-lb-info { transition: none !important; }
  .nl-lb-img { transform: none !important; }
}