/* Phase 1 elevation — Photography presentation system (cinema view)
 *
 * Reusable full-screen lightbox for property galleries, magazine photo
 * essays, and curated journey imagery. Implements Site UI Elevation §3
 * "The Image Opening Experience": image scales from container, dark navy
 * surround, soft inner shadow on image, no harsh borders, metadata
 * overlay (caption + photographer + counter), keyboard nav, touch swipe.
 *
 * Backdrop and zoom-in keyframes already exist in motion.css
 * (.lightbox-backdrop, .lightbox-frame); this file handles the surface
 * styling, controls, metadata, and responsive behaviour. The two work
 * together — the JS controller adds .bt-lightbox--open on the root and
 * sets --lightbox-origin-x / -y so the zoom animates from the click
 * point.
 */

.bt-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--surface-cinema);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.bt-lightbox--open {
  opacity: 1;
  pointer-events: auto;
  animation: lightbox-backdrop-in var(--duration-slow) var(--ease-out) both;
}

.bt-lightbox__stage {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bt-lightbox__image {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow:
    0 0 0 1px rgba(15, 26, 48, 0.4),
    0 32px 96px rgba(0, 0, 0, 0.6);
  background: var(--ink);
  animation: lightbox-zoom-in var(--duration-slow) var(--ease-editorial) both;
  transform-origin:
    var(--lightbox-origin-x, 50%)
    var(--lightbox-origin-y, 50%);
}

.bt-lightbox__image--loading {
  filter: blur(12px);
  transition: filter var(--duration-slower) var(--ease-out);
}

.bt-lightbox__image--loaded {
  filter: blur(0);
}

/* Navigation arrows — soft, only visible on hover/focus */
.bt-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 248, 245, 0.08);
  border: 1px solid rgba(250, 248, 245, 0.15);
  border-radius: var(--radius-full);
  color: var(--cream);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  padding: 0;
}

.bt-lightbox:hover .bt-lightbox__nav,
.bt-lightbox__nav:focus-visible {
  opacity: 1;
}

.bt-lightbox__nav:hover {
  background: rgba(250, 248, 245, 0.18);
}

.bt-lightbox__nav:active {
  transform: translateY(-50%) scale(0.96);
}

.bt-lightbox__nav--prev { left: var(--space-lg); }
.bt-lightbox__nav--next { right: var(--space-lg); }

.bt-lightbox__nav[disabled] {
  opacity: 0 !important;
  pointer-events: none;
}

.bt-lightbox__nav svg {
  width: 20px;
  height: 20px;
}

/* Close button — top-left per spec, restrained */
.bt-lightbox__close {
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(250, 248, 245, 0.2);
  border-radius: var(--radius-full);
  color: var(--cream);
  cursor: pointer;
  transition: var(--transition-fast);
  padding: 0;
  z-index: 2;
}

.bt-lightbox__close:hover {
  background: rgba(250, 248, 245, 0.1);
  border-color: rgba(250, 248, 245, 0.4);
}

.bt-lightbox__close svg {
  width: 16px;
  height: 16px;
}

/* Counter — top-right, Jost small caps */
.bt-lightbox__counter {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.7);
  font-variant-numeric: tabular-nums;
}

/* Metadata overlay — bottom-centered, fades on toggle */
.bt-lightbox__meta {
  position: absolute;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  max-width: min(720px, 90%);
  text-align: center;
  color: var(--cream);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.bt-lightbox--meta-hidden .bt-lightbox__meta {
  opacity: 0;
}

.bt-lightbox__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--size-md);
  line-height: var(--leading-snug);
  color: var(--cream);
  margin: 0;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.6);
}

.bt-lightbox__credit {
  margin-top: var(--space-xs);
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold-light);
}

.bt-lightbox__location {
  margin-top: var(--space-xxs);
  font-family: var(--font-ui-sans);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(250, 248, 245, 0.55);
}

/* Body lock when lightbox is open (set by JS) */
body.bt-lightbox-open {
  overflow: hidden;
}

/* Trigger element on the page — any thumbnail wrapped in [data-lightbox]
 * gets the cursor + subtle scale/brightness on hover. The actual modal
 * is owned by the JS controller. */
[data-lightbox] {
  cursor: zoom-in;
}

@media (hover: hover) {
  [data-lightbox]:hover img {
    filter: brightness(1.04);
  }
}

/* Mobile — tighter chrome, larger touch targets */
@media (max-width: 768px) {
  .bt-lightbox {
    padding: var(--space-md);
  }

  .bt-lightbox__nav {
    width: 48px;
    height: 48px;
    /* Always visible on touch — no hover state */
    opacity: 0.85;
  }

  .bt-lightbox__nav--prev { left: var(--space-md); }
  .bt-lightbox__nav--next { right: var(--space-md); }

  .bt-lightbox__close,
  .bt-lightbox__counter {
    top: var(--space-md);
  }

  .bt-lightbox__close { left: var(--space-md); }
  .bt-lightbox__counter { right: var(--space-md); }

  .bt-lightbox__caption { font-size: var(--size-base); }

  .bt-lightbox__meta {
    bottom: var(--space-md);
  }
}