/* Critical Image Fixes - Load Early & Take Priority */
/* This file must be loaded AFTER all other stylesheets to ensure maximum priority */

/* Ultra-aggressive fix for article images being cut off */
article img,
.article-content img,
.post-content img,
.content img,
.main-content img,
[class*="article"] img,
[class*="post"] img,
[class*="content"] img {
  max-height: 80vh !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  height: auto !important;
  display: block !important;
  margin: 1.5rem auto !important;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  padding: 1rem !important;
  border-radius: 12px !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

/* Special handling for very tall images (certificates, infographics, etc) */
article img[style*="height"],
.article-content img[style*="height"],
img[data-tall="true"] {
  max-height: 85vh !important;
  width: auto !important;
  min-width: 200px !important;
  background: #ffffff !important;
  padding: 2rem !important;
  border: 2px solid #e9ecef !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15) !important;
}

/* Hover effect for better UX */
article img:hover,
.article-content img:hover,
.post-content img:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.2) !important;
  cursor: zoom-in !important;
}

/* Mobile optimization */
@media (max-width: 768px) {
  article img,
  .article-content img,
  .post-content img,
  .content img {
    max-height: 70vh !important;
    padding: 0.75rem !important;
    margin: 1rem auto !important;
  }
}

/* Tablet optimization */
@media (min-width: 768px) and (max-width: 1024px) {
  article img,
  .article-content img,
  .post-content img {
    max-height: 75vh !important;
    padding: 1.25rem !important;
  }
}

/* Desktop optimization for very wide screens */
@media (min-width: 1400px) {
  article img,
  .article-content img,
  .post-content img {
    max-height: 80vh !important;
    max-width: 80% !important;
  }
}

/* Ultra-wide screens */
@media (min-width: 2560px) {
  article img,
  .article-content img,
  .post-content img {
    max-height: 70vh !important;
    max-width: 60% !important;
  }
}

/* Fix for images that might have inline styles */
article img[style],
.article-content img[style],
.post-content img[style] {
  height: auto !important;
  max-height: 80vh !important;
  width: auto !important;
}

/* Accessibility improvements */
article img,
.article-content img,
.post-content img {
  loading: lazy;
  decoding: async;
}

/* Print optimization */
@media print {
  article img,
  .article-content img,
  .post-content img {
    max-height: none !important;
    max-width: 100% !important;
    page-break-inside: avoid !important;
    margin: 1rem 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
}