/*
 * Desktop Image Fixes
 * Fix image overflow issues on desktop screens
 * Version: 1.0
 */

/* ===== DESKTOP IMAGE CONSTRAINTS ===== */

/* Ensure images don't overflow on desktop */
@media (min-width: 769px) {
  
  /* General image constraints for desktop */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Article images should respect container bounds */
  .article-image,
  .featured-image {
    max-width: 100%;
    height: auto;
    width: auto; /* Let natural sizing work */
  }
  
  /* Card images should stay within card bounds */
  .card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
  }
  
  /* Cloudinary images should respect container */
  img[src*="cloudinary"] {
    max-width: 100%;
    height: auto;
    width: auto;
  }
  
  /* Featured article images in specific containers */
  .featured-article .article-image,
  .article-detail .article-image {
    max-width: 100%;
    width: auto;
    height: auto;
  }
  
  /* Hero images should fit properly */
  .hero-image,
  .banner-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    object-position: center;
  }
  
  /* Gallery images */
  .gallery-image,
  .thumbnail {
    max-width: 100%;
    height: auto;
  }
  
  /* Prevent any image from exceeding viewport */
  img:not(.icon):not(.logo-image):not(.avatar) {
    max-width: 100vw;
  }
  
  /* Content images in articles */
  .article-content img,
  .post-content img,
  .content img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Images in cards should never overflow */
  .card img {
    max-width: 100%;
  }
  
  /* Responsive images in containers */
  .container img,
  .row img,
  .col img {
    max-width: 100%;
  }
}

/* ===== SPECIFIC CONTAINER FIXES ===== */

/* Fix for specific layout containers */
@media (min-width: 769px) {
  
  /* Main content area */
  .main-content img {
    max-width: 100%;
    height: auto;
  }
  
  /* Article listing images */
  .article-list .article-image {
    width: 100%;
    max-width: 300px; /* Reasonable max width */
    height: 200px;
    object-fit: cover;
  }
  
  /* Grid layout images */
  .row .col img {
    max-width: 100%;
    width: auto;
  }
  
  /* Carousel images */
  .carousel-item img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
  }
  
  /* Modal images */
  .modal img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
  }
}

/* ===== DEBUG HELPERS ===== */

/* Add debug class to body to see image boundaries */
.debug-images img {
  border: 2px solid red !important;
  box-sizing: border-box !important;
}

.debug-images .article-image {
  border-color: green !important;
}

.debug-images .card-img-top {
  border-color: blue !important;
}

.debug-images img[src*="cloudinary"] {
  border-color: orange !important;
}