/* Shared photo lightbox — assets/js/components/lightbox.js.
   Dark full-screen overlay, one image at a time, arrows when there are several. */
.lb {
  position: fixed; inset: 0; z-index: var(--z-modal, 400);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(3px);
  padding: 64px 16px 24px;
}
.lb[hidden] { display: none; }
body.lb-open { overflow: hidden; }

.lb__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; image-orientation: from-image;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

.lb__bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  color: #fff;
}
.lb__title {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb__counter {
  margin-left: auto; flex-shrink: 0;
  font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .7);
}

.lb__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 0; border-radius: var(--radius-md, 8px);
  background: rgba(255, 255, 255, .12); color: #fff;
  cursor: pointer;
}
.lb__btn:hover { background: rgba(255, 255, 255, .22); }
.lb__btn[hidden] { display: none; }
.lb__btn svg { width: 20px; height: 20px; }

.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb__nav svg { width: 22px; height: 22px; }
.lb__nav--prev { left: 16px; }
.lb__nav--next { right: 16px; }

@media (max-width: 640px) {
  .lb { padding: 58px 8px 16px; }
  .lb__nav--prev { left: 8px; }
  .lb__nav--next { right: 8px; }
}