/**
 * WPRentals Responsive Listing Grid
 * Provides 2, 3, 4, 5, 6 column layout options with tablet and mobile breakpoints
 */

/* ==========================================================================
   Base Grid Styles
   ========================================================================== */

.wpr-listing-grid.items_shortcode_wrapper,
.wpr-listing-grid .items_shortcode_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* The listing_wrapper is the actual grid item */
.wpr-listing-grid .listing_wrapper,
.wpr-listing-grid.items_shortcode_wrapper .listing_wrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Top bar widget specific */
.wpr-listing-grid.wpestate_display_item_list_top_bar_wrapper .listing_wrapper_list {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* ==========================================================================
   Desktop Column Classes (Default - above 1024px)
   ========================================================================== */

/* 2 Columns - 50% each */
.wpr-cols-2 .listing_wrapper,
.wpr-cols-2.items_shortcode_wrapper .listing_wrapper {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

/* 3 Columns - 33.333% each */
.wpr-cols-3 .listing_wrapper,
.wpr-cols-3.items_shortcode_wrapper .listing_wrapper {
    width: 33.333% !important;
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
}

/* 4 Columns - 25% each */
.wpr-cols-4 .listing_wrapper,
.wpr-cols-4.items_shortcode_wrapper .listing_wrapper {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

/* 5 Columns - 20% each */
.wpr-cols-5 .listing_wrapper,
.wpr-cols-5.items_shortcode_wrapper .listing_wrapper {
    width: 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
}

/* 6 Columns - 16.666% each */
.wpr-cols-6 .listing_wrapper,
.wpr-cols-6.items_shortcode_wrapper .listing_wrapper {
    width: 16.666% !important;
    flex: 0 0 16.666% !important;
    max-width: 16.666% !important;
}

/* ==========================================================================
   Tablet Breakpoint (768px - 1024px)
   ========================================================================== */

@media (max-width: 1024px) and (min-width: 768px) {
    /* 1 Column Tablet */
    .wpr-cols-tablet-1 .listing_wrapper,
    .wpr-cols-tablet-1.items_shortcode_wrapper .listing_wrapper {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 2 Columns Tablet */
    .wpr-cols-tablet-2 .listing_wrapper,
    .wpr-cols-tablet-2.items_shortcode_wrapper .listing_wrapper {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* 3 Columns Tablet */
    .wpr-cols-tablet-3 .listing_wrapper,
    .wpr-cols-tablet-3.items_shortcode_wrapper .listing_wrapper {
        width: 33.333% !important;
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }

    /* 4 Columns Tablet */
    .wpr-cols-tablet-4 .listing_wrapper,
    .wpr-cols-tablet-4.items_shortcode_wrapper .listing_wrapper {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

/* ==========================================================================
   Mobile Breakpoint (below 768px)
   ========================================================================== */

@media (max-width: 767px) {
    /* 1 Column Mobile */
    .wpr-cols-mobile-1 .listing_wrapper,
    .wpr-cols-mobile-1.items_shortcode_wrapper .listing_wrapper {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 2 Columns Mobile */
    .wpr-cols-mobile-2 .listing_wrapper,
    .wpr-cols-mobile-2.items_shortcode_wrapper .listing_wrapper {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Adjust padding for mobile */
    .wpr-listing-grid.items_shortcode_wrapper,
    .wpr-listing-grid .items_shortcode_wrapper {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    .wpr-listing-grid .listing_wrapper,
    .wpr-listing-grid.items_shortcode_wrapper .listing_wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   Small Mobile Breakpoint (below 480px)
   ========================================================================== */

@media (max-width: 480px) {
    /* Keep 2 columns on small screens if explicitly set - reduce padding for tighter fit */
    .wpr-cols-mobile-2 .listing_wrapper,
    .wpr-cols-mobile-2.items_shortcode_wrapper .listing_wrapper {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .wpr-cols-mobile-2.items_shortcode_wrapper,
    .wpr-cols-mobile-2 .items_shortcode_wrapper {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }

    .wpr-listing-grid.items_shortcode_wrapper,
    .wpr-listing-grid .items_shortcode_wrapper {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .wpr-listing-grid .listing_wrapper,
    .wpr-listing-grid.items_shortcode_wrapper .listing_wrapper {
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-bottom: 16px !important;
    }
    
    /* Top bar widget - keep 2 columns on small mobile */
    .wpestate_display_item_list_top_bar_wrapper.wpr-cols-mobile-2 .listing_wrapper_list .listing_wrapper {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .wpestate_display_item_list_top_bar_wrapper.wpr-cols-mobile-2 .listing_wrapper_list {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
}

/* ==========================================================================
   Override Bootstrap Column Classes
   ========================================================================== */

/* Override the default Bootstrap col-md classes when our grid is active */
.wpr-listing-grid .listing_wrapper.col-md-3,
.wpr-listing-grid .listing_wrapper.col-md-4,
.wpr-listing-grid .listing_wrapper.col-md-6,
.wpr-listing-grid .listing_wrapper.col-md-12,
.wpr-listing-grid .listing_wrapper.shortcode-col {
    float: none !important;
}

/* ==========================================================================
   Top Bar Widget Specific Styles
   ========================================================================== */

.wpestate_display_item_list_top_bar_wrapper.wpr-listing-grid .listing_wrapper_list {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.wpestate_display_item_list_top_bar_wrapper.wpr-listing-grid .listing_wrapper_list .listing_wrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Top bar widget column classes */
.wpestate_display_item_list_top_bar_wrapper.wpr-cols-2 .listing_wrapper_list .listing_wrapper {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

.wpestate_display_item_list_top_bar_wrapper.wpr-cols-3 .listing_wrapper_list .listing_wrapper {
    width: 33.333% !important;
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
}

.wpestate_display_item_list_top_bar_wrapper.wpr-cols-4 .listing_wrapper_list .listing_wrapper {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

.wpestate_display_item_list_top_bar_wrapper.wpr-cols-5 .listing_wrapper_list .listing_wrapper {
    width: 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
}

.wpestate_display_item_list_top_bar_wrapper.wpr-cols-6 .listing_wrapper_list .listing_wrapper {
    width: 16.666% !important;
    flex: 0 0 16.666% !important;
    max-width: 16.666% !important;
}

/* Top bar widget tablet columns */
@media (max-width: 1024px) and (min-width: 768px) {
    .wpestate_display_item_list_top_bar_wrapper.wpr-cols-tablet-1 .listing_wrapper_list .listing_wrapper {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .wpestate_display_item_list_top_bar_wrapper.wpr-cols-tablet-2 .listing_wrapper_list .listing_wrapper {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .wpestate_display_item_list_top_bar_wrapper.wpr-cols-tablet-3 .listing_wrapper_list .listing_wrapper {
        width: 33.333% !important;
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
    
    .wpestate_display_item_list_top_bar_wrapper.wpr-cols-tablet-4 .listing_wrapper_list .listing_wrapper {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

/* Top bar widget mobile columns */
@media (max-width: 767px) {
    .wpestate_display_item_list_top_bar_wrapper.wpr-cols-mobile-1 .listing_wrapper_list .listing_wrapper {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .wpestate_display_item_list_top_bar_wrapper.wpr-cols-mobile-2 .listing_wrapper_list .listing_wrapper {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .wpestate_display_item_list_top_bar_wrapper.wpr-listing-grid .listing_wrapper_list {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    
    .wpestate_display_item_list_top_bar_wrapper.wpr-listing-grid .listing_wrapper_list .listing_wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   Card Type Specific Adjustments
   ========================================================================== */

/* Type 1 Cards */
.wpr-listing-grid .property_unit_type1 {
    height: 100%;
}

/* Type 2 Cards */
.wpr-listing-grid .property_unit_type2 {
    height: 100%;
}

/* Type 3 Cards */
.wpr-listing-grid .property_unit_v3 {
    height: 100%;
}

/* Type 4 Cards */
.wpr-listing-grid .property_unit_v4 {
    height: 100%;
}

/* ==========================================================================
   Image Aspect Ratio Consistency
   ========================================================================== */

.wpr-listing-grid .listing-unit-img-wrapper {
    position: relative;
    overflow: hidden;
}

.wpr-listing-grid .listing-unit-img-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==========================================================================
   Fallback for Non-Flex Browsers
   ========================================================================== */

@supports not (display: flex) {
    .wpr-listing-grid .property_listing {
        float: left !important;
    }
    
    .wpr-listing-grid .items_shortcode_wrapper::after,
    .wpr-listing-grid .listing_wrapper::after {
        content: "";
        display: table;
        clear: both;
    }
}