/**
 * Igny8 Image Injection CSS
 * 
 * Responsive image display styles for marker-based image injection
 * 
 * @package Igny8
 * @version 1.0.0
 */

/* Desktop and larger screens (769px+) */
@media (min-width: 769px) {
  .igny8-article-image-desktop { 
    display: block !important; 
  }
  .igny8-article-image-mobile { 
    display: none !important; 
  }
}

/* Mobile and smaller screens (768px and below) */
@media (max-width: 768px) {
  .igny8-article-image-desktop { 
    display: none !important; 
  }
  .igny8-article-image-mobile { 
    display: block !important; 
  }
}

/* Image wrapper styling */
.igny8-image-wrapper {
  margin: 20px 0;
  text-align: center;
}

.igny8-image-wrapper img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Loading state */
.igny8-image-wrapper img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.igny8-image-wrapper img[loading="lazy"].loaded {
  opacity: 1;
}