/* Dedicated Lightbox and Image Styles to ensure high priority */

/* Lightbox Overlay */
#lightbox-overlay {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 99999;
}

#lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border: 5px solid #fff;
}

/* 
   Forcefully override all image styles in post and page content 
   Using higher specificity and !important to guarantee application
   Only apply to images that have the 'lightbox-enabled' class added by JS
*/
img.lightbox-enabled {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  max-height: 500px !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 1px solid #ddd !important;
  padding: 5px !important;
  background-color: #fff !important;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05) !important;
  display: block !important;
  margin: 20px auto !important;
  cursor: zoom-in !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* Ensure overlay image is not affected by the above styles */
#lightbox-overlay img {
  max-width: 95% !important;
  max-height: 95% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border: none !important;
  padding: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  cursor: zoom-out !important;
  img.lightbox-enabled:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Specific override for project full content to match previous design */
body .project-full-content img {
  max-height: 300px !important;
}