/* Basera lightbox.css — the full-screen photo viewer (fragments/lightbox :: viewer,
   js/lightbox.js) and the "open the viewer" layer on each listing gallery.
   Loaded only on the pages that carry a gallery: public detail, lister manage,
   staff review. Uses the global tokens from basera.css; defines no new ones
   outside .bs-lb. */

/* ---------- gallery → viewer opener ---------- */
/* A transparent link over the photo. It sits first (or right after the slides)
   in the gallery, so the gallery's own buttons, badges and counter, which come
   later in the markup, stay on top of it and keep working. */
.bs-gal__open{position:absolute;inset:0;display:block;cursor:zoom-in;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none}
.bs-gal__open:focus-visible{outline:3px solid var(--coral);outline-offset:-3px;border-radius:inherit}
.bs-gal__thumb[data-lb-open]{cursor:zoom-in}

/* ---------- page behind the viewer ---------- */
html.bs-lb-lock,html.bs-lb-lock body{overflow:hidden}

/* ---------- the viewer ---------- */
.bs-lb{
  --lb-bg:#100C16;
  --lb-btn:rgba(250,244,236,.14);
  --lb-btn-hover:rgba(250,244,236,.26);
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;overflow:hidden;
  background:var(--lb-bg);color:var(--paper);font-family:var(--font-body);
  overscroll-behavior:contain;
}
.bs-lb[open]{display:flex;flex-direction:column}
.bs-lb::backdrop{background:#100C16}

.bs-lb__bar{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 10px calc(18px + env(safe-area-inset-left,0px));
  background:linear-gradient(rgba(16,12,22,.72),rgba(16,12,22,0));
  pointer-events:none;
}
.bs-lb__bar > *{pointer-events:auto}
.bs-lb__counter{font-weight:700;font-size:15px;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.5)}

.bs-lb__btn{
  width:44px;height:44px;flex:none;border-radius:999px;border:0;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:var(--lb-btn);color:var(--paper);
  -webkit-tap-highlight-color:transparent;
}
.bs-lb__btn:hover{background:var(--lb-btn-hover);color:var(--paper)}
.bs-lb__btn:focus-visible,.bs-lb__thumb:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.bs-lb__close{width:48px;height:48px;background:rgba(16,12,22,.55)}

.bs-lb__stage{
  position:relative;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  /* one-finger gestures are ours (swipe); pinch-zoom always stays the browser's */
  touch-action:pinch-zoom;
  -webkit-user-select:none;user-select:none;
}
.bs-lb.is-zoomed .bs-lb__stage{touch-action:auto}
.bs-lb__img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;will-change:transform}
.bs-lb__img:not([src]){visibility:hidden}

/* light discs, like the inline gallery's arrows: they read on the dark backdrop and on any photo */
.bs-lb__nav{position:absolute;top:50%;z-index:2;width:52px;height:52px;margin-top:-26px;background:rgba(250,244,236,.92);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.bs-lb__nav:hover{background:var(--paper);color:var(--ink)}
.bs-lb__nav--prev{left:calc(16px + env(safe-area-inset-left,0px))}
.bs-lb__nav--next{right:calc(16px + env(safe-area-inset-right,0px))}
.bs-lb__nav[hidden],.bs-lb__strip[hidden]{display:none}

.bs-lb__spinner{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid rgba(250,244,236,.25);border-top-color:var(--paper);opacity:0;pointer-events:none}
.bs-lb.is-loading .bs-lb__spinner{opacity:1;transition:opacity .2s ease .25s;animation:bs-lb-spin .8s linear infinite}

.bs-lb__strip{
  flex:none;display:flex;gap:8px;overflow-x:auto;
  padding:10px calc(14px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px));
  scrollbar-width:none;
}
.bs-lb__strip::-webkit-scrollbar{display:none}
/* centred when it fits, scrollable from the first thumb when it doesn't */
.bs-lb__thumb:first-child{margin-left:auto}
.bs-lb__thumb:last-child{margin-right:auto}
.bs-lb__thumb{
  flex:none;width:72px;height:52px;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;background:rgba(250,244,236,.08);opacity:.55;
}
.bs-lb__thumb:hover{opacity:.85}
.bs-lb__thumb.is-active{opacity:1;border-color:var(--coral)}
.bs-lb__thumb img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}

.bs-lb__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* phones: smaller chrome, more photo. Prev / next stay — they are the
   single-tap alternative to swiping (WCAG 2.5.1) — but sit lighter. */
@media (max-width:767px){
  .bs-lb__nav{width:40px;height:40px;margin-top:-20px;background:rgba(250,244,236,.82)}
  .bs-lb__nav--prev{left:calc(8px + env(safe-area-inset-left,0px))}
  .bs-lb__nav--next{right:calc(8px + env(safe-area-inset-right,0px))}
  .bs-lb__thumb{width:54px;height:40px;border-radius:8px}
  .bs-lb__strip{gap:6px;padding-top:8px}
}

@media (prefers-reduced-motion:no-preference){
  .bs-lb[open]{animation:bs-lb-in .18s ease-out}
  .bs-lb__img{transition:opacity .15s ease}
}
@media (prefers-reduced-motion:reduce){
  .bs-lb.is-loading .bs-lb__spinner{animation:none}
}
@keyframes bs-lb-in{from{opacity:0}to{opacity:1}}
@keyframes bs-lb-spin{to{transform:rotate(360deg)}}