/* ohana-lightbox.css - the sitewide image viewer (pinch/scroll zoom, drag pan). */
.ohana-lightbox-overlay {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(15, 20, 28, 0.88);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.75rem; padding: 2.5rem 1.5rem;
  overflow: hidden;
}
.ohana-lightbox-overlay.is-open { display: flex; }
.ohana-lightbox-img {
  max-width: 95vw; max-height: 88vh;
  border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  background: #fff;
  cursor: zoom-in;
}
.ohana-lightbox-overlay.is-open .ohana-lightbox-img {
  animation: ohanaLbPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ohanaLbPop {
  from { opacity: 0.4; transform: scale(0.92); }
  to   { opacity: 1;   transform: none; }
}
.ohana-lightbox-caption {
  color: #fff; font-size: 0.9rem; max-width: 60ch; text-align: center;
}
.ohana-lightbox-close {
  position: absolute; top: 1rem; right: 1.25rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.14); color: #fff; border: none;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.ohana-lightbox-close:hover { background: rgba(255,255,255,0.26); }
/* Zoom controls: keyboard + motor accessible fallback for the gestures */
.ohana-lightbox-controls {
  position: absolute; bottom: 1rem; right: 1.25rem;
  display: flex; gap: 0.5rem;
}
.ohana-lightbox-zbtn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.14); color: #fff; border: none;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.ohana-lightbox-zbtn:hover { background: rgba(255,255,255,0.26); }
/* Fading gesture hint */
.ohana-lightbox-hint {
  position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 0.85rem; white-space: nowrap;
  background: rgba(15, 20, 28, 0.55); border-radius: 999px;
  padding: 0.3rem 0.9rem; pointer-events: none; opacity: 0;
}
.ohana-lightbox-overlay.is-open .ohana-lightbox-hint {
  animation: ohanaLbHint 3.2s ease forwards;
}
@keyframes ohanaLbHint {
  0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; }
}
/* Trigger affordance on any image opted in */
.ohana-lightbox-trigger { cursor: zoom-in; }