/* 
 * Enhanced CSS fixes for images - consolidated version
 */

/* Global fixes for all images */
img {
  max-width: 100%;
  height: auto;
  opacity: 1 !important;
  visibility: visible !important;
  display: block;
}

/* Fix for images in post content */
.post-content {
  position: relative; /* Create proper context for images */
}

.post-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 2rem auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
  transition: opacity 0.3s ease-in-out;
}

/* Target images directly inside paragraphs (typical Markdown format) */
.post-content p > img {
  position: relative !important; /* Override any absolute positioning */
  margin: 2rem auto !important;
  width: auto !important; /* Allow image to use natural width */
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important; /* Preserve aspect ratio */
}

/* Fix for images inside a paragraph */
.post-content p {
  display: block;
  clear: both;
  overflow: visible !important; /* Prevent image clipping */
}

/* Card image specific fixes for home and list pages */
.card-image {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 3;
  border: none !important;
  margin: 0 !important;
  font-size: 0 !important; /* Hide alt text */
  color: transparent !important; /* Hide alt text color */
}

/* Fix featured image containers */
.post-featured-image {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 150px !important; 
  max-height: 250px !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-color: transparent !important;
  z-index: 1;
  margin: -24px -24px 20px -24px !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

/* Make ratio boxes visible and properly sized */
.image-ratio-box {
  position: relative !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2;
  background-color: transparent !important;
  height: 0 !important;
  width: 100% !important;
}

/* Fix lazy loading issues */
img[loading="lazy"],
.lazyload, .lazyloading {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Remove background colors that might be showing instead of images */
.post-featured-image::before,
.post-featured-image::after,
.image-ratio-box::before,
.image-ratio-box::after {
  display: none !important;
  content: none !important;
}

/* Fix for problematic themes - override any theme variables */
:root, :root.dark-theme, :root.light-theme {
  --tertiary: transparent !important;
}

/* Debug styles that can be enabled via URL parameter */
.img-debug-on img {
  border: 2px solid red !important;
  box-shadow: 0 0 10px rgba(255,0,0,0.5) !important;
}

.img-debug-on .post-content img {
  border: 2px dashed orange !important;
}

.img-debug-on .post-content img[data-path-fixed="true"] {
  border: 2px solid green !important;
}

.img-debug-on .post-content img.broken {
  border: 2px solid red !important;
}

/* Special helper class for fixed images */
.manually-fixed,
img[data-path-fixed="true"] {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Error placeholder styling for failed images */
.image-placeholder {
  padding: 2rem;
  background-color: var(--tertiary, #f0f0f0);
  color: var(--secondary, #555);
  text-align: center;
  border-radius: var(--radius);
  width: 100%;
  margin: 2rem auto;
}

/* Mobile optimizations */
@media (min-width: 768px) {
  .image-ratio-box {
    max-height: 180px !important;
  }
}