/* ==========================================================================
   Lightbox — fullscreen image viewer for project galleries
   ========================================================================== */

/* Gallery grid — clickable images */
.project-gallery__item {
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity var(--transition-base);
}

.project-gallery__item:hover {
  opacity: 0.85;
}

/* Lightbox overlay */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  align-items: center;
  justify-content: center;
}

.lightbox.is-open {
  display: flex;
}

/* Prevent body scroll when lightbox is open */
body.lightbox-open {
  overflow: hidden;
}

/* Main image */
.lightbox__image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
}

/* Close button */
.lightbox__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-sm);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
  z-index: 1;
}

.lightbox__close:hover {
  opacity: 1;
}

/* Nav arrows */
.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-lg);
  opacity: 0.6;
  transition: opacity var(--transition-fast);
  z-index: 1;
}

.lightbox__prev {
  left: 0;
}

.lightbox__next {
  right: 0;
}

.lightbox__prev:hover,
.lightbox__next:hover {
  opacity: 1;
}

/* Counter */
.lightbox__counter {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--type-small);
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .lightbox__image {
    max-width: 95vw;
    max-height: 80vh;
  }

  .lightbox__prev,
  .lightbox__next {
    font-size: 2rem;
    padding: var(--space-md);
  }

  .lightbox__close {
    top: var(--space-md);
    right: var(--space-md);
    font-size: 2rem;
  }
}