/* Responsive Image Styles for OptimizedImageTagHelper */

/* Responsive image class - applied automatically by OptimizedImageTagHelper when responsive="true" */
.img-responsive {
    max-width: 100%;
    height: auto;
}

/* Ensure picture elements don't overflow their containers */
picture {
    display: inline-block;
    max-width: 100%;
    line-height: 0; /* Remove extra space below inline-block */
}

/* Make images within picture elements responsive 
   Note: These styles work in conjunction with the .img-responsive class.
   The inline styles from the tag helper provide the primary responsive behavior. */
picture img {
    display: block;
}

/* Global responsive image rules for lazy-loaded images without inline styles */
img[loading="lazy"]:not([style*="max-width"]) {
    max-width: 100%;
    height: auto;
}

/* Ensure optimized images maintain aspect ratio on mobile
   Uses lower specificity to allow page-specific CSS to override */
@media screen and (max-width: 640px) {
    picture {
        width: auto; /* Don't force 100% width - let container control it */
    }
}