/* Listing photo lightbox — a full-viewport modal viewer opened from the
   listing gallery. lightbox_controller.js toggles [hidden] and the body lock;
   this file owns all presentation. The page is .bx-dark, so the tokens read as
   the dark palette. */
.bido-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: max(clamp(16px, 4vw, 56px), env(safe-area-inset-top));
  padding-inline: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left));
}

.bido-lightbox[hidden] { display: none; }

.bido-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--bx-navy-rgb), 0.92);
  backdrop-filter: blur(6px);
}

.bido-lightbox-stage {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-inline-size: min(100%, 1100px);
  max-block-size: 100%;
}

.bido-lightbox-image {
  display: block;
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--bx-r-lg);
  box-shadow: var(--bx-shadow-soft);
}

.bido-lightbox-control {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--bx-control-h);
  block-size: var(--bx-control-h);
  border-radius: var(--bx-r-pill);
  border: 1px solid rgba(var(--bx-white-rgb), 0.18);
  background: rgba(var(--bx-navy-rgb), 0.72);
  color: var(--bx-ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.bido-lightbox-close {
  inset-block-start: clamp(12px, 4vw, 40px);
  inset-inline-end: clamp(12px, 4vw, 40px);
}

.bido-lightbox-prev,
.bido-lightbox-next {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.bido-lightbox-prev { inset-inline-start: clamp(8px, 3vw, 32px); }
.bido-lightbox-next { inset-inline-end: clamp(8px, 3vw, 32px); }

.bido-lightbox-counter {
  position: absolute;
  inset-block-end: clamp(12px, 4vw, 36px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: var(--bx-r-pill);
  background: rgba(var(--bx-navy-rgb), 0.72);
  border: 1px solid rgba(var(--bx-white-rgb), 0.18);
  color: var(--bx-ink);
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-sm);
}

/* Lock body scroll behind the viewer. */
body.bido-lightbox-open { overflow: hidden; }

@media (any-hover: hover) {
  .bido-lightbox-control:hover {
    background: rgba(var(--bx-navy-rgb), 0.95);
    border-color: rgba(var(--bx-white-rgb), 0.32);
  }
}

/* Coarse pointers get a larger tap target for the controls. */
@media (pointer: coarse) {
  .bido-lightbox-control {
    inline-size: var(--bx-control-h-lg);
    block-size: var(--bx-control-h-lg);
  }
}