/* Bannez mobile service-card fixes
 * Keeps cards compact and preserves the full 4:3 service artwork on phones.
 */
@media (max-width: 767.98px) {
    /* PremiumPress outputs a separate native mobile card as well as the desktop MJ10 card.
       Our desktop MJ10 card is the branded Bannez version, so hide only the duplicate
       native mobile card inside AJAX results. */
    #ajax-search-output .show-mobile {
        display: none !important;
    }

    /* Keep the customized MJ10 card visible on phones even though the parent theme
       marks it hide-mobile. */
    #ajax-search-output [ppt-box].h-m-mj.hide-mobile {
        display: flex !important;
    }

    /* Do not stretch the card to the tallest card in the row. */
    [ppt-box].h-m-mj {
        height: auto !important;
        min-height: 0 !important;
        align-self: flex-start !important;
    }

    [ppt-box].h-m-mj ._content {
        display: block !important;
        flex: none !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 10px 8px !important;
    }

    [ppt-box].h-m-mj ._content > div:has(> ._adtitle) {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 10px 0 0 !important;
        margin: 0 !important;
    }

    [ppt-box].h-m-mj ._adtitle {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 1.22 !important;
        font-size: 14px !important;
    }

    /* Keep CTA directly below title instead of pinning it to card bottom. */
    [ppt-box].h-m-mj ._adtitle::after {
        display: flex !important;
        position: static !important;
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        padding: 9px 10px !important;
        min-height: 0 !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    /* Force service artwork to a clean 4:3 responsive frame. */
    [ppt-box].h-m-mj figure,
    [ppt-box].h-m-mj figure > a,
    [ppt-box].h-m-mj figure > div {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    [ppt-box].h-m-mj figure {
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        background: #fff !important;
        margin: 0 !important;
    }

    [ppt-box].h-m-mj figure > a,
    [ppt-box].h-m-mj figure > div {
        height: 100% !important;
    }

    [ppt-box].h-m-mj figure img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    [ppt-box].h-m-mj figure .bg-image,
    [ppt-box].h-m-mj figure [data-bg] {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* PremiumPress grid columns are stretch-items by default. Keep each card compact. */
    #ajax-search-output .row > [class*="col-"] {
        align-self: flex-start !important;
        margin-bottom: 16px !important;
    }

    /*
     * PremiumPress renders a second, native mobile card for the same listing.
     * On Explore we already suppress that duplicate inside #ajax-search-output.
     * Single-service "Recommended" sections use the same mobile-card markup
     * outside the AJAX container, so hide only that exact listing-card shape.
     */
    body.single-listing_type .show-mobile .position-relative.mb-3:has(> .fs-14.text-600) {
        display: none !important;
    }

    /* Collapse the now-empty native-mobile wrapper so it cannot leave a blank row. */
    body.single-listing_type .show-mobile:has(> .position-relative.mb-3 > .fs-14.text-600) {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
    }
}