/* ============================================================
   PODGLĄD ZDJĘCIA (lightbox)
   Natywny <dialog> — stąd zero kodu na warstwę modalną i pułapkę fokusa.
   Kolory wyłącznie z palety.
   ============================================================ */

/* Miniatura ma mówić, że da się w nią kliknąć. */
.grid-photos .photo img,
.cms-gallery img,
.article-body figure img{cursor:zoom-in}

.lightbox{
  width:100%; max-width:100vw; height:100%; max-height:100dvh;
  padding:0; border:0; background:transparent; overflow:hidden;
}
.lightbox::backdrop{background:var(--brown-900); opacity:.94}

.lightbox__figure{
  margin:0; height:100%;
  display:grid; grid-template-rows:1fr auto; place-items:center;
  padding:56px 64px 24px;
}
.lightbox__img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  border-radius:var(--r); background:var(--brown-700);
}
.lightbox__caption{
  margin:14px 0 0; text-align:center;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  color:var(--sand-200);
}

.lightbox__close,
.lightbox__nav{
  position:fixed; z-index:1;
  display:grid; place-items:center;
  background:transparent; border:1px solid transparent; border-radius:var(--r);
  color:var(--sand-100); cursor:pointer; line-height:1;
  transition:background .18s, border-color .18s;
}
.lightbox__close:hover,
.lightbox__nav:hover{background:var(--brown-700); border-color:var(--brown-500)}
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible{outline:3px solid var(--blue-400); outline-offset:2px}

.lightbox__close{top:14px; right:18px; width:42px; height:42px; font-size:20px}
.lightbox__nav{top:50%; transform:translateY(-50%); width:48px; height:64px; font-size:34px}
.lightbox__nav--prev{left:10px}
.lightbox__nav--next{right:10px}

.lightbox__counter{
  position:fixed; top:20px; left:20px; margin:0;
  font-family:var(--mono); font-size:12px; color:var(--brown-300);
}

@media (max-width:719px){
  .lightbox__figure{padding:52px 12px 20px}
  .lightbox__nav{width:40px; height:52px; font-size:28px}
  .lightbox__nav--prev{left:2px}
  .lightbox__nav--next{right:2px}
}