/* Brianform — la lente: apre una fotografia a schermo intero.
   Vale su tutto il sito, sopra qualunque foglio di stile della pagina. */

.lente-attiva{cursor:zoom-in}
.lente-attiva:focus-visible{outline:2px solid currentColor;outline-offset:3px}

#lente{
  position:fixed;inset:0;z-index:9999;
  background:rgba(24,21,18,.95);
  display:none;align-items:center;justify-content:center;
  opacity:0;transition:opacity .22s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
#lente.aperta{display:flex;opacity:1}

#lente .telaio{
  position:relative;max-width:min(94vw,1600px);max-height:88vh;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
#lente img{
  max-width:min(94vw,1600px);max-height:80vh;
  width:auto;height:auto;object-fit:contain;display:block;
  background:#EFEAE3;box-shadow:0 18px 60px rgba(0,0,0,.45);
}
#lente figcaption{
  color:rgba(250,248,244,.82);font-size:.82rem;letter-spacing:.04em;
  text-align:center;max-width:70ch;line-height:1.5;
  font-family:var(--f-body), system-ui, sans-serif;font-weight:300;
}

#lente button{
  position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;padding:0;transition:background .2s;
  font-family:inherit;
}
#lente button:hover{background:rgba(255,255,255,.26)}
#lente button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#lente .chiudi{top:-3.6rem;right:0;width:2.8rem;height:2.8rem}
#lente .prec{left:-3.8rem;top:calc(40vh - 1.5rem)}
#lente .succ{right:-3.8rem;top:calc(40vh - 1.5rem)}
#lente svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.6}

#lente .contatore{
  position:absolute;top:-3.4rem;left:0;
  color:rgba(250,248,244,.6);font-size:.74rem;letter-spacing:.16em;
  font-family:var(--f-body), system-ui, sans-serif;
}

@media (max-width:60rem){
  #lente .telaio{max-height:92vh}
  #lente .prec{left:.4rem;top:auto;bottom:-3.6rem}
  #lente .succ{right:.4rem;top:auto;bottom:-3.6rem}
  #lente .chiudi{top:-3.2rem;right:.2rem}
  #lente .contatore{top:-3rem;left:.2rem}
  #lente img{max-height:70vh}
}
@media (prefers-reduced-motion:reduce){
  #lente{transition:none}
}