/**
 * RAIC Mobile Image Styles - Make images 100% width on mobile
 */

/* Target image blocks on mobile devices */
@media (max-width: 767px) {
    /* Image block figure element */
    .wp-block-image {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* The image itself */
    .wp-block-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    /* Also handle aligned images */
    .wp-block-image.alignleft,
    .wp-block-image.alignright,
    .wp-block-image.aligncenter {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Image inside figure */
    .wp-block-image figure {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Handle different image sizes */
    .wp-block-image.size-large,
    .wp-block-image.size-full,
    .wp-block-image.size-medium,
    .wp-block-image.size-thumbnail {
        width: 100% !important;
    }
    
    /* Fix for inline styles that might override */
    .wp-block-image[style] {
        width: 100% !important;
    }
    
    /* Also handle images with captions */
    .wp-block-image figcaption {
        width: 100% !important;
    }
}

/* Optional: Smooth transition for responsive behavior */
.wp-block-image,
.wp-block-image img {
    transition: width 0.3s ease;
}