/* ---------------------------------------------------------------------
 * Listing grid cards (property_unit_3.php) get stretched to match the
 * tallest card in their row (parent theme's #listing_ajax_container is a
 * flex container with the default align-items:stretch), but the card's
 * own content isn't flex, so a shorter card's content just leaves a gap
 * below the bed/bath/guest row instead of filling the stretched height.
 * Making the card a flex column and pinning that row to the bottom
 * absorbs the extra height intentionally.
 *
 * Scoped to .propety_unit_3 (the wrapper class unique to that template):
 * other templates reuse .property_listing / .title-container, e.g. the
 * horizontal cards on the half-map page, and must not become flex columns.
 * --------------------------------------------------------------------- */
.propety_unit_3 .property_listing {
    display: flex;
    flex-direction: column;
}

.propety_unit_3 .property_listing .title-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.propety_unit_3 .property_listing .category_tagline.custom_details {
    margin-top: auto;
}

/* ---------------------------------------------------------------------
 * On mobile, the recent-listings grid (.items_shortcode_wrapper_grid)
 * is meant to render one column, but its column track is
 * repeat(auto-fit, minmax(260px, auto)) with justify-content:start.
 * An "auto" max track doesn't reliably stretch to the container's full
 * width - it sizes off the item's content, so depending on the exact
 * content width (which shifts slightly by viewport/font metrics) the
 * track can fall a few pixels short of the container's right edge,
 * even after the card's own max-width:390px cap is lifted. That's why
 * the gap only showed up on some widths (e.g. iPhone 16 Pro Max's
 * 440px) and not others (e.g. 430px).
 *
 * Forcing the track to a plain 1fr on mobile makes it always match the
 * container's width exactly, regardless of content sizing. Desktop and
 * tablet keep the original auto-fit multi-column behavior untouched.
 *
 * This section on the homepage is also an Elementor widget, and
 * Elementor generates its own per-widget CSS file with selectors like
 * ".elementor-28160 .elementor-element.elementor-element-86107a0
 * .items_shortcode_wrapper_grid" that set grid-template-columns at the
 * same max-width:767px breakpoint. That selector's specificity (3
 * classes) beats a plain ".items_shortcode_wrapper_grid" rule, so
 * !important is needed here to reliably win regardless of which
 * Elementor widget ID wraps the grid on a given page.
 * --------------------------------------------------------------------- */
@media (max-width: 767px) {
    .items_shortcode_wrapper_grid {
        grid-template-columns: 1fr !important;
    }

    .items_shortcode_wrapper_grid > .listing_wrapper {
        max-width: 100%;
    }
}