/* 
 * Fix for Chrome warning: "Deprecated feature used"
 * Addressing overflow: visible on img, video and canvas tags
 * See: https://github.com/WICG/shared-element-transitions/blob/main/debugging_overflow_on_images.md
 */

/* Primary fix: Use 'clip' for modern browsers */
img, video, canvas {
    overflow: clip !important;
}

/* Fallback for older browsers that don't support 'clip' */
@supports not (overflow: clip) {
    img, video, canvas {
        overflow: hidden !important;
    }
}

/* Ensure this doesn't break responsive behavior */
img.img-responsive,
img.img-fluid,
.img-responsive,
.img-fluid {
    max-width: 100%;
    height: auto;
    overflow: clip !important;
}

/* Specific contexts where this fix is critical */
article img,
.article img,
.content img {
    overflow: clip !important;
    display: block;
    max-width: 100%;
    height: auto;
}

/* Video elements */
video {
    overflow: clip !important;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Canvas elements */
canvas {
    overflow: clip !important;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Navigation and logo images */
.navbar img,
.navbar-brand img,
.logo img,
img[src*="logo"],
img[alt*="logo"] {
    overflow: clip !important;
    display: block;
}

/* Cards and media containers */
.card img,
.media img,
.figure img,
.thumbnail img {
    overflow: clip !important;
}

/* Bootstrap carousel and modal images */
.carousel img,
.modal img {
    overflow: clip !important;
}

/* Ensure this doesn't interfere with image animations */
img[style*="transform"],
.img-hover img {
    overflow: clip !important;
}

/* Override any potential conflicts with utility classes */
.overflow-visible img,
.overflow-visible video,
.overflow-visible canvas {
    overflow: clip !important;
}

/* Specific fix for any inline styles that might override */
*[style*="overflow: visible"] img,
*[style*="overflow: visible"] video,
*[style*="overflow: visible"] canvas {
    overflow: clip !important;
}