/* lightbox.css — genbrugelig billed-lightbox (webcam + synsfeltskort).
   Hører sammen med src/views/lightbox.php og assets/js/lightbox.js.

   To visninger: "fit" (hele billedet, ingen scroll) og "1:1" (native opløsning
   i en scrollbar container). Al panorering er browserens egen scroll — der er
   ingen transform-matematik her, og derfor heller ingen gestus at holde
   synkron. Overlayet er altid mørkt, uanset tema: det er en visning AF et
   billede, og en lys ramme ville forurene farvebedømmelsen af motivet. */

.lb{position:fixed;inset:0;z-index:90;background:rgba(5,9,14,.95);
  display:flex;flex-direction:column}
.lb[hidden]{display:none}

/* Topbjælken bærer titel + knapper og er den eneste "kant" i visningen.
   Den ligger OVER billedet, ikke ved siden af, så motivet får hele fladen. */
.lb-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;
  gap:8px;padding:10px 12px;background:linear-gradient(rgba(0,0,0,.72),transparent)}
.lb-title{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#DCE7EF;
  margin:0 auto 0 4px;text-transform:uppercase}

.lb-btn{display:inline-flex;align-items:center;gap:7px;flex:none;
  /* 44×44 er minimums-hit-target; padding + min-height holder det også når
     knappen kun indeholder et 17 px ikon. */
  min-height:44px;min-width:44px;justify-content:center;padding:0 13px;
  border-radius:11px;border:1px solid rgba(255,255,255,.28);
  background:rgba(10,16,24,.72);color:#EAF0F4;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
.lb-btn:hover{background:rgba(30,44,60,.85);border-color:rgba(255,255,255,.5)}
.lb-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.lb-close{padding:0}

/* Billedfladen. BEVIDST flex + `margin:auto` på billedet frem for
   place-items/justify-content:center: centrering via alignment KLIPPER den
   overskydende top/venstre væk når indholdet er større end containeren, så den
   øverste venstre del af billedet bliver uNåelig i 1:1. Auto-margener absorberer
   kun POSITIV fri plads og forsvinder derfor af sig selv når billedet vokser —
   scroll når hele vejen ud. */
.lb-scroll{flex:1;min-height:0;display:flex;overscroll-behavior:contain;padding:0}
.lb-scroll:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.lb-img{display:block;margin:auto;user-select:none;-webkit-user-drag:none}

/* fit: hele billedet, ingen scroll. cursor signalerer at der er mere at hente. */
.lb[data-zoom="fit"] .lb-scroll{overflow:hidden;touch-action:pinch-zoom}
.lb[data-zoom="fit"] .lb-img{max-width:100%;max-height:100%;width:auto;height:auto;
  cursor:zoom-in}

/* 1:1: native opløsning. Det er HELE pointen — de indbrændte pejlemærker er
   ~18 px høje i en 1920 px frame og bliver først læsbare her. touch-action
   giver native pan OG pinch oveni. */
.lb[data-zoom="one"] .lb-scroll{overflow:auto;touch-action:pan-x pan-y pinch-zoom}
.lb[data-zoom="one"] .lb-img{max-width:none;max-height:none;width:auto;height:auto;
  cursor:grab}
.lb[data-zoom="one"][data-panning="1"] .lb-img{cursor:grabbing}

@media(max-width:640px){
  .lb-title{display:none}          /* pladsen går til knapperne på små skærme */
  .lb-btn{padding:0 11px}
}
@media(prefers-reduced-motion:reduce){
  .lb,.lb *{transition:none!important;animation:none!important}
}