/* ==========================================================
   ES AGUILAR DESIGNS
   BRONX PORTFOLIO — COMPLETE MOBILE RESPONSIVE FIX
   ========================================================== */

@media only screen and (max-width: 767px) {


    /* ======================================================
       1. PROJECT IMAGES
       Keep portfolio images proportional on mobile
       ====================================================== */

    .single-portfolio img,
    .single-portfolio .wp-post-image,
    .portfolio-single img,
    .project-content img,
    .project-detail img {

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
        display: block !important;
    }


    /* ======================================================
       2. ELEMENTOR FLEXBOX CONTAINERS
       Prevent inherited desktop heights on mobile
       ====================================================== */

    .single-portfolio .e-con,
    .single-portfolio .e-con-inner,

    .portfolio-single .e-con,
    .portfolio-single .e-con-inner,

    .project-content .e-con,
    .project-content .e-con-inner,

    .project-detail .e-con,
    .project-detail .e-con-inner {

        height: auto !important;
        min-height: 0 !important;
    }


    /* ======================================================
       3. ELEMENTOR IMAGE WIDGET WRAPPERS
       Prevent image widgets from retaining desktop height
       ====================================================== */

    .single-portfolio .elementor-widget-image,
    .single-portfolio .elementor-widget-image .elementor-widget-container,

    .portfolio-single .elementor-widget-image,
    .portfolio-single .elementor-widget-image .elementor-widget-container,

    .project-content .elementor-widget-image,
    .project-content .elementor-widget-image .elementor-widget-container,

    .project-detail .elementor-widget-image,
    .project-detail .elementor-widget-image .elementor-widget-container {

        height: auto !important;
        min-height: 0 !important;

        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }


    /* ======================================================
       4. LEGACY BRONX / WPBAKERY WRAPPERS
       Kept for theme compatibility
       ====================================================== */

    .portfolio-single .vc_row,
    .single-portfolio .vc_row,
    .project-content .vc_row,

    .portfolio-single .wpb_wrapper,
    .single-portfolio .wpb_wrapper,
    .project-content .wpb_wrapper {

        height: auto !important;
        min-height: 0 !important;
    }


    /* ======================================================
       5. PREVENT FLEXBOX IMAGE SECTIONS FROM STRETCHING
       ====================================================== */

    .single-portfolio .elementor-widget-image,
    .portfolio-single .elementor-widget-image,
    .project-content .elementor-widget-image,
    .project-detail .elementor-widget-image {

        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }


    /* ======================================================
       6. BRONX WORK DETAIL IMAGE SECTION
       General custom-widget protection
       ====================================================== */

    .work-detail-image-section {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        flex-grow: 0 !important;
    }


    .work-detail-image-section > div,
    .work-detail-image-section .elementor-widget-container {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }


    .work-detail-image-section img {

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        object-fit: contain !important;
        display: block !important;
    }


    /* ======================================================
       7. CONFIRMED BRONX IMAGE CONTAINERS
       DevTools showed Bronx forcing:
       .work-detail-full-img { height: 658px; }

       THIS removes that fixed mobile height.
       ====================================================== */

    .work-detail-full-img,
    .work-detail-full-img-wrap,
    .work-detail-full-img-wrap2 {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }


    /* Actual Bronx image container */

    .work-detail-full-img {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }


    /* Actual image inside Bronx container */

    .work-detail-full-img img {

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        object-fit: contain !important;
        display: block !important;
    }


    /* ======================================================
       8. REMOVE EXTRA SPACING FROM CONFIRMED BRONX WRAPPERS
       ====================================================== */

    .work-detail-full-img-wrap,
    .work-detail-full-img-wrap2 {

        padding-bottom: 0 !important;
        margin-bottom: 0 !important;

        flex-grow: 0 !important;
    }

}