/* ============================================================================
   LIGHTBOX — styling to match LightOps' own image viewer: the same dark
   backdrop (rgba(10,20,36,.86)) and the same round translucent controls, so
   opening a photo here feels like opening one in a proposal.
   ============================================================================ */
.lb{position:fixed;inset:0;z-index:700;display:none;align-items:center;justify-content:center;
    padding:clamp(12px,3vw,28px);background:rgba(10,20,36,.86);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lb.is-open{display:flex}
.lb-stage{margin:0;max-width:min(1400px,100%);max-height:100%;display:flex;
    flex-direction:column;align-items:center;gap:14px}
.lb-img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;
    border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.55);background:#0a1424}
.lb-cap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
    color:#fff;font-size:15px;line-height:1.4;text-align:center}
.lb-tag{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.16)}
.lb-text{font-weight:600}
.lb-count{color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
/* one control size, so the three buttons read as a set */
.lb-close,.lb-prev,.lb-next{position:absolute;width:44px;height:44px;border-radius:50%;
    border:none;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;line-height:1;z-index:2;
    transition:background .15s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.3)}
.lb-close{top:16px;right:16px;font-size:26px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%);font-size:30px;padding-bottom:4px}
.lb-next{right:12px;top:50%;transform:translateY(-50%);font-size:30px;padding-bottom:4px}
.lb-prev[hidden],.lb-next[hidden]{display:none}
@media (max-width:560px){
  .lb-img{max-height:calc(100vh - 190px)}
  .lb-prev{left:6px} .lb-next{right:6px}
}

/* click-to-enlarge affordance on ordinary content photos */
img.lb-click { cursor: zoom-in; }

/* zoom (2026-08-30): transform-driven; bar bottom-right */
.lb-img { transition: transform 0.12s ease-out; will-change: transform; }
.lb.is-zoomed .lb-img { transition: none; }
.lb-stage { touch-action: none; overflow: hidden; }
.lb-zoombar {
  position: fixed; right: 18px; bottom: 18px; z-index: 3;
  display: flex; gap: 8px;
}
.lb-zoombar button {
  width: 42px; height: 42px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255,255,255,0.14); color: white;
  font-size: 22px; line-height: 1;
  backdrop-filter: blur(8px);
}
.lb-zoombar button:hover { background: rgba(255,255,255,0.3); }
.lb-zoomhint {
  display: block; font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.6; margin-top: 4px;
}