/* ============================================================================
   KJLightbox — the photo viewer over the page (new-ui/js/kj-lightbox.js,
   2026-10-06). The design bundles have no viewer; this one uses the site's
   tokens: navy backdrop (--kj-navy-900 #041E42 family), white glass buttons,
   the coral focus ring. The dialog is built by the script on the first open,
   so nothing here applies before a photo is clicked.
   Layers: above everything on the page, the SIMBA bubble included
   (simba-bubble.php uses 2147483600/1).
   Doc: docs/features/photo-lightbox.md
   ============================================================================ */
html.kj-lb-open,
html.kj-lb-open body { overflow: hidden; }

.kj-lb {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  display: flex;
  flex-direction: column;
  background: rgba(3, 16, 36, .97);   /* the page only as a faint ghost */
  color: #fff;
  font-family: var(--kj-font-mulish, 'Mulish', system-ui, sans-serif);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
  animation: kjLbIn .18s ease-out both;
}
.kj-lb[hidden] { display: none; }
/* full screen: the script sets .is-full on (webkit)fullscreenchange — one class,
   so a browser that lacks :fullscreen / :-webkit-full-screen drops no rule */
.kj-lb.is-full { background: #000; }

/* ---- top bar: "3 / 6" · full screen · close ---- */
.kj-lb__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
}
.kj-lb__count {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .88);
  padding-left: 4px;
}
.kj-lb__tools { display: flex; gap: 8px; margin-left: auto; }

.kj-lb__btn,
.kj-lb__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .2s, transform .2s;
  -webkit-appearance: none;
  appearance: none;
}
.kj-lb__btn:hover,
.kj-lb__nav:hover { background: rgba(255, 255, 255, .24); }
.kj-lb__btn:focus-visible,
.kj-lb__nav:focus-visible { outline: 2px solid var(--kj-coral-500, #FE616C); outline-offset: 2px; }
.kj-lb__btn[hidden],
.kj-lb__nav[hidden] { display: none; }
.kj-lb__btn svg,
.kj-lb__nav svg { display: block; }

/* ---- the photo ---- */
.kj-lb__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 84px 32px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  touch-action: pan-y pinch-zoom;    /* horizontal drags are the script's swipe */
}
.kj-lb__img {
  display: block;
  max-width: 100%;                   /* the script sets width / height (fit to the stage, */
  max-height: 100%;                  /* small photos up to 2x); these keep it inside      */
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .7);
  opacity: 0;
  transition: opacity .2s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.kj-lb__img.is-in { opacity: 1; }
.kj-lb.is-full .kj-lb__img { border-radius: 0; box-shadow: none; }

.kj-lb__nav {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -42px;                 /* centred on the photo area (the stage keeps 32px below) */
}
.kj-lb__nav--prev { left: 18px; }
.kj-lb__nav--next { right: 18px; }

/* a spinner only when a photo takes a moment */
.kj-lb__spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -34px 0 0 -18px;
  border: 3px solid rgba(255, 255, 255, .22);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: kjLbSpin .8s linear infinite;
}
.kj-lb__stage.is-loading .kj-lb__spin { opacity: 1; visibility: visible; transition: opacity .2s ease .3s; }

.kj-lb__err {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: -16px 0 0;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.kj-lb__err[hidden] { display: none; }

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

@keyframes kjLbIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kjLbSpin { to { transform: rotate(360deg); } }

/* ---- phones: the photo uses the whole width; the arrows sit over its edges ---- */
@media (max-width: 759px) {
  .kj-lb__bar { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
  .kj-lb__stage { padding: 0 0 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .kj-lb__img { border-radius: 0; }
  .kj-lb__nav {
    width: 44px;
    height: 44px;
    margin-top: -34px;
    background: rgba(3, 16, 36, .55);
  }
  .kj-lb__nav--prev { left: 8px; }
  .kj-lb__nav--next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .kj-lb { animation: none; }
  .kj-lb__img,
  .kj-lb__btn,
  .kj-lb__nav { transition: none; }
  .kj-lb__spin { animation: none; border-top-color: rgba(255, 255, 255, .22); }
}