/**
 * Mad Origin Image Styling Enhancement - Frontend Styles
 * Applied to styled image widgets on the frontend
 */

/* Image Container Enhancements */
.mad-image-styled {
    position: relative;
    display: block;
    width: 100%;
}

/* Ensure images maintain aspect ratio and responsive behavior */
.mad-image-styled img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .mad-image-styled {
        /* Ensure proper touch scrolling */
        touch-action: manipulation;
    }
    
    /* Disable hover effects on mobile for better performance */
    .mad-image-styled:hover img {
        /* Preserve horizontal flip but disable other hover effects */
        opacity: 1 !important;
        box-shadow: inherit !important;
    }
    
    /* Ensure minimum touch targets for interactive images */
    .mad-image-styled {
        min-height: 44px; /* iOS minimum touch target */
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .mad-image-styled {
        /* Enhanced image rendering on retina displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Accessibility improvements */
.mad-image-styled img {
    /* Ensure focus visibility for keyboard navigation */
    outline-offset: 2px;
}

.mad-image-styled img:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Performance optimizations */
.mad-image-styled img {
    /* Hardware acceleration for transform effects */
    backface-visibility: hidden;
    transform: translateZ(0);
}