/* Sasora lightbox (assets/js/lightbox.js). Werkt in elk theme; kleuren zijn
   neutraal (zwart/wit). */

.sasora-lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 56px 72px;
  border: 0;
  background: rgba(0, 0, 0, .96);
  color: #fff;
}
.sasora-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.sasora-lightbox::backdrop { background: transparent; }
html:has(.sasora-lightbox[open]) { overflow: hidden; }

.sasora-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
}

.sasora-lightbox__count {
  position: absolute;
  top: 18px;
  left: 20px;
  font-size: 14px;
  opacity: .85;
}

.sasora-lightbox [hidden] { display: none !important; }

.sasora-lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.sasora-lightbox button:hover,
.sasora-lightbox button:focus-visible { background: rgba(255, 255, 255, .28); }
.sasora-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sasora-lightbox__close { top: 8px; right: 12px; }
.sasora-lightbox__prev,
.sasora-lightbox__next { top: 50%; transform: translateY(-50%); }
.sasora-lightbox__prev { left: 14px; }
.sasora-lightbox__next { right: 14px; }

@media (max-width: 600px) {
  .sasora-lightbox { padding: 56px 8px; }
  .sasora-lightbox__prev,
  .sasora-lightbox__next { top: auto; bottom: 12px; transform: none; }
  .sasora-lightbox__prev { left: calc(50% - 56px); }
  .sasora-lightbox__next { right: calc(50% - 56px); }
}