/* Lightbox-specific styles - loads after Webflow CSS to override conflicts */

/* Lightbox Styles */
.lightbox-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s !important;
  will-change: opacity, transform !important;
}

.lightbox-modal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 0.25s ease-in-out, visibility 0s linear 0s !important;
}

/* Remove scale-based open animation in favor of pure fade */
@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* No explicit fade-out class needed; removing .active will transition opacity */

@keyframes lightboxFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.lightbox-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.75) !important;
  cursor: pointer !important;
  z-index: 1 !important;
}

.lightbox-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

.lightbox-content {
  position: relative !important;
  max-width: 90% !important;
  max-height: 90% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

.lightbox-image {
  max-width: 100% !important;
  max-height: 80vh !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  opacity: 1 !important;
  display: block !important;
  margin: 0 auto !important;
  z-index: 11 !important;
  position: relative !important;
  will-change: transform, opacity !important;
}

.lightbox-image.fade-in {
  /* Only fade, no scale */
  animation: imageFadeIn 0.2s ease-in-out !important;
}

@keyframes imageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-image:hover {
  transform: scale(1.015);
}

.lightbox-caption {
  margin-top: 20px !important;
  text-align: center !important;
  color: white !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  padding: 12px 20px !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  z-index: 4 !important;
  position: relative !important;
}

.lightbox-caption #lightbox-counter {
  font-size: 14px !important;
  color: #e54c41 !important;
  font-weight: bold !important;
  margin-right: 10px !important;
}

.lightbox-caption #lightbox-title {
  font-size: 16px !important;
  font-weight: 500 !important;
}

.lightbox-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  background: none !important;
  border: none !important;
  color: white !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  z-index: 10000000 !important;
  transition: all 0.3s ease !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  opacity: 0.8 !important;
  line-height: 1 !important;
}

.lightbox-close:hover {
  color: #e54c41 !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  transform: scale(1.1) !important;
  opacity: 1 !important;
}

.lightbox-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  z-index: 10000000 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0.7 !important;
}

.lightbox-nav:hover {
  background-color: rgba(229, 76, 65, 0.8) !important;
  transform: translateY(-50%) scale(1.05) !important;
  opacity: 1 !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.lightbox-prev {
  left: 30px !important;
}

.lightbox-next {
  right: 30px !important;
}

.lightbox-nav:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

.lightbox-nav:disabled:hover {
  transform: translateY(-50%) !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Case study grid images: remove frame but keep subtle hover scale */
.misingleimage {
  cursor: pointer !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: transform 0.2s ease !important;
  will-change: transform !important;
}

.misingleimage:hover {
  transform: scale(1.02) !important;
  box-shadow: none !important;
}

/* Ensure wrappers don't create visual frames around images */
.misingleimagewrapper {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* Mobile responsiveness for lightbox */
@media (max-width: 768px) {
  .lightbox-container {
    padding: 10px !important;
  }
  
  .lightbox-image {
    max-height: 70vh !important;
  }
  
  .lightbox-close {
    top: 15px !important;
    right: 15px !important;
    font-size: 28px !important;
    width: 36px !important;
    height: 36px !important;
  }
  
  .lightbox-nav {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  
  .lightbox-prev {
    left: 15px !important;
  }
  
  .lightbox-next {
    right: 15px !important;
  }
  
  .lightbox-caption {
    padding: 10px 20px !important;
    margin-top: 15px !important;
  }
  
  .lightbox-caption #lightbox-counter {
    font-size: 12px !important;
  }
  
  .lightbox-caption #lightbox-title {
    font-size: 14px !important;
  }
}

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

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lightbox-modal,
  .lightbox-modal.active,
  .lightbox-image,
  .misingleimage,
  .lightbox-close,
  .lightbox-nav {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .lightbox-image {
    max-height: 60vh !important;
  }
  
  .lightbox-nav {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  
  .lightbox-prev {
    left: 10px !important;
  }
  
  .lightbox-next {
    right: 10px !important;
  }
}