/**
 * Responsive Content CSS
 * 
 * Bulletproof responsive styles for user-generated content from Quill editor.
 * Overrides inline styles on images to ensure proper display on all devices.
 * 
 * @version 1.0.0
 */

/* ============================================
   DESKTOP STYLES (768px and above)
   ============================================ */

/* Base image styles - MINIMAL interference on desktop */
.article-content img,
.page-body img {
  /* Only safety net: prevent images from overflowing container */
  max-width: 100%;
  
  /* Maintain aspect ratio when max-width is applied */
  height: auto;
  
  /* Fix padding issue - include padding in width/height calculation */
  box-sizing: border-box;
  
  /* Smooth rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  
  /* Add subtle shadow for depth - using filter instead of box-shadow */
  /* filter: drop-shadow() applies to image only, not padding */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
  
  /* Smooth transitions */
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Fix for images with padding - prevent width distortion */
.article-content img[style*="padding"],
.page-body img[style*="padding"] {
  /* When padding is present, use auto width and let max-width control size */
  width: auto !important;
  /* Keep max-width to prevent overflow */
  max-width: 100%;
}

/* Hover effect for images */
.article-content img:hover,
.page-body img:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

/* Clear floats after content blocks */
.article-content::after,
.page-body::after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================
   MOBILE STYLES (below 768px)
   ============================================ */

@media (max-width: 767px) {
  /* AGGRESSIVE override - disable ALL user settings on mobile */
  .article-content img,
  .page-body img {
    /* Override dimensions */
    width: 90% !important;
    max-width: 90% !important;
    height: auto !important;
    
    /* Limit height to prevent very tall images from dominating screen */
    max-height: 70vh !important;
    
    /* Maintain aspect ratio and fit within constraints */
    object-fit: contain !important;
    
    /* Fix padding issue - include padding in width/height calculation */
    box-sizing: border-box !important;
    
    /* Override positioning */
    float: none !important;
    display: block !important;
    
    /* Override spacing - center all images */
    margin: 1.5rem auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    
    /* Override any transform or positioning */
    position: static !important;
    transform: none !important;
    
    /* Remove filter effects on mobile for better performance */
    filter: none !important;
  }
  
  /* Ensure proper spacing between images and text */
  .article-content img + p,
  .article-content img + h2,
  .article-content img + h3,
  .article-content img + h4,
  .page-body img + p,
  .page-body img + h2,
  .page-body img + h3,
  .page-body img + h4 {
    margin-top: 1.5rem;
  }
}

/* ============================================
   SMALL MOBILE (below 480px)
   ============================================ */

@media (max-width: 479px) {
  .article-content img,
  .page-body img {
    /* Slightly larger on very small screens for better visibility */
    width: 95% !important;
    max-width: 95% !important;
    margin: 1rem auto !important;
  }
}

/* ============================================
   FALLBACKS FOR OLDER BROWSERS
   ============================================ */

/* IE11 and older browsers that don't support object-fit */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .article-content img,
  .page-body img {
    width: auto;
    max-width: 100%;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .article-content img,
  .page-body img {
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 1rem auto !important;
    page-break-inside: avoid;
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Ensure images without alt text are still accessible */
.article-content img:not([alt]),
.page-body img:not([alt]) {
  outline: 2px dashed rgba(231, 76, 60, 0.3);
  outline-offset: 2px;
}

/* Focus styles for keyboard navigation */
.article-content img:focus,
.page-body img:focus {
  outline: 3px solid #e74c3c;
  outline-offset: 3px;
}

/* ============================================
   SPECIAL CASES
   ============================================ */

/* Handle images inside links */
.article-content a img,
.page-body a img {
  /* Remove default link styling */
  border: none;
  outline: none;
}

.article-content a:hover img,
.page-body a:hover img {
  opacity: 0.9;
}

/* Handle images in lists */
.article-content li img,
.page-body li img {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Handle images in blockquotes */
.article-content blockquote img,
.page-body blockquote img {
  margin: 1rem auto;
  display: block;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Enable GPU acceleration for transforms */
.article-content img,
.page-body img {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/* Lazy loading hint for browsers */
.article-content img[loading="lazy"],
.page-body img[loading="lazy"] {
  content-visibility: auto;
}