/*
 * CT Real Estate Core Custom Extension — Flex listings grid
 *
 * Converts the Elementor "Listings Grid" widget from the theme's float-based
 * responsive.gs columns to flexbox. Behaviour matches the original: 3 columns
 * on desktop (>=768px), 1 column below. Scoped to the widget only so the
 * theme's global .col / .span_* float grid is left untouched everywhere else.
 *
 * Selectors target both the core widget (.elementor-widget-ct-listings-grid)
 * and our plugin-owned secondary-price duplicate
 * (.elementor-widget-ct-listings-grid-secondary), so the flex layout and the
 * equal-height / VIEW-button fix apply identically to both.
 */

.elementor-widget-ct-listings-grid ul.col.span_12.row,
.elementor-widget-ct-listings-grid-secondary ul.col.span_12.row {
    display: flex;
    flex-wrap: wrap;
    /* 2% gutter between the 3 columns, matching the old margin-left:2% rhythm */
    gap: 0 2%;
    margin-left: 0;
    margin-right: 0;
}

/* Neutralise the float-grid mechanics on the items inside this widget */
.elementor-widget-ct-listings-grid ul.col.span_12.row > li.listing,
.elementor-widget-ct-listings-grid-secondary ul.col.span_12.row > li.listing {
    float: none;
    margin-left: 0;
    width: 100%; /* mobile / tablet default: single column */
}

/* The theme's clearfix / clear div is unnecessary in flex; hide if present */
.elementor-widget-ct-listings-grid ul.col.span_12.row > .clear,
.elementor-widget-ct-listings-grid-secondary ul.col.span_12.row > .clear {
    display: none;
}

/* Desktop: 3 columns. (3 x 32% + 2 x 2% gap = 100%) */
@media screen and (min-width: 768px) {
    .elementor-widget-ct-listings-grid ul.col.span_12.row > li.listing,
    .elementor-widget-ct-listings-grid-secondary ul.col.span_12.row > li.listing {
        width: 32%;
    }
    /* Single-column widget variant (settings number == 1) stays full width */
    .elementor-widget-ct-listings-grid ul.col.span_12.row > li.listing.span_12,
    .elementor-widget-ct-listings-grid-secondary ul.col.span_12.row > li.listing.span_12 {
        width: 100%;
    }
}

/*
 * modern_two layout: pin the VIEW button to the bottom of the whole card.
 *
 * The theme makes .search-view-listing.btn position:absolute relative to
 * .grid-listing-info, which shrinks to its content — so on a short card the
 * button floats up. The flex grid already makes cards equal height, so we
 * move the positioning context up to the <li>: the button then anchors to the
 * full card bottom and lines up across the row, regardless of text length.
 * (modern_two has no other absolutely-positioned element inside the info block,
 * so dropping its relative context is safe.)
 */
.elementor-widget-ct-listings-grid li.listing.modern_two,
.elementor-widget-ct-listings-grid-secondary li.listing.modern_two {
    position: relative;
}

.elementor-widget-ct-listings-grid li.listing.modern_two .grid-listing-info,
.elementor-widget-ct-listings-grid-secondary li.listing.modern_two .grid-listing-info {
    position: static;
}

.elementor-widget-ct-listings-grid li.listing.modern_two .search-view-listing.btn,
.elementor-widget-ct-listings-grid-secondary li.listing.modern_two .search-view-listing.btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
}