/*
 * BestPropertyPlug Ghana — Homepage Mobile Polish V26
 * Scope: homepage mobile only (<= 760px)
 * Purpose: scale/spacing polish only. No desktop, header, search, footer structure,
 *          bottom navigation, or section-order redesign.
 */

@media (max-width: 760px) {
    /* ============================================================
       1) CONSISTENT MOBILE SECTION RHYTHM
       ============================================================ */
    html body .rpgx-home .rpgx-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    html body .rpgx-home .rpgx-section-head,
    html body .rpgx-home .bpp-hp-projects-v4695__head,
    html body .rpgx-home .bpp-home-top-locations-v2__head {
        margin-bottom: 14px !important;
        gap: 10px !important;
        align-items: center !important;
    }

    html body .rpgx-home .rpgx-section-head h2,
    html body .rpgx-home .bpp-hp-projects-v4695__head h2,
    html body .rpgx-home .bpp-rec-pro-block__head h2,
    html body .rpgx-home .bpp-home-top-locations-v2__head h2 {
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 1.18 !important;
        letter-spacing: -0.02em !important;
    }

    html body .rpgx-home .rpgx-section-head > a,
    html body .rpgx-home .rpgx-view-all,
    html body .rpgx-home .bpp-rec-pro-view-all,
    html body .rpgx-home .bpp-home-top-locations-v2__view-all {
        font-size: 12px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    html body .rpgx-home .rpgx-pills,
    html body .rpgx-home .bpp-hp-projects-v4695__tabs,
    html body .rpgx-home .bpp-rec-pro-tabs {
        gap: 6px !important;
    }

    html body .rpgx-home .rpgx-pills > *,
    html body .rpgx-home .bpp-hp-projects-v4695__tabs > *,
    html body .rpgx-home .bpp-rec-pro-tabs button {
        min-height: 32px !important;
        padding: 0 11px !important;
        border-radius: 999px !important;
        font-size: 11.5px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    /* ============================================================
       2) PROPERTY TYPES — preserve the working 2-row swipe layout,
          only normalize tile sizing / typography / alignment.
       ============================================================ */
    html body .rpgx-home .rpgx-types-section .rpgx-type-row {
        grid-auto-columns: 158px !important;
        grid-template-rows: repeat(2, 78px) !important;
        gap: 10px !important;
    }

    html body .rpgx-home .rpgx-types-section .rpgx-type-card {
        min-height: 78px !important;
        height: 78px !important;
        padding: 8px 9px !important;
        gap: 9px !important;
        border-radius: 12px !important;
        align-items: center !important;
    }

    html body .rpgx-home .rpgx-types-section .rpgx-type-card img {
        width: 52px !important;
        min-width: 52px !important;
        height: 60px !important;
        object-fit: cover !important;
        border-radius: 9px !important;
    }

    html body .rpgx-home .rpgx-types-section .rpgx-type-card strong {
        font-size: 12.5px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
    }

    html body .rpgx-home .rpgx-types-section .rpgx-type-card span {
        margin-top: 3px !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
    }

    /* ============================================================
       3) RECOMMENDED PROPERTIES — keep the approved card design,
          add only breathing room and readable supporting text.
       ============================================================ */
    html body .rpgx-home .bpp-search-owner-card-v466__body {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    html body .rpgx-home .bpp-search-owner-card-v466__title {
        margin-bottom: 7px !important;
        line-height: 1.28 !important;
    }

    html body .rpgx-home .bpp-search-owner-card-v466__location,
    html body .rpgx-home .bpp-search-owner-card-v466__meta,
    html body .rpgx-home .bpp-search-owner-card-v466__description {
        line-height: 1.42 !important;
    }

    html body .rpgx-home .bpp-search-owner-card-v466__price {
        margin-top: 9px !important;
        margin-bottom: 8px !important;
    }

    html body .rpgx-home .bpp-search-owner-card-v466__identity {
        margin-top: 9px !important;
        padding-top: 9px !important;
    }

    /* ============================================================
       4) FEATURED PROJECTS — preserve current card proportions,
          polish lower information/action spacing only.
       ============================================================ */
    html body .rpgx-home .bpp-home-project-search-card-v4695__body {
        padding-bottom: 13px !important;
    }

    html body .rpgx-home .bpp-home-project-search-card-v4695__price {
        margin-top: 9px !important;
        margin-bottom: 8px !important;
    }

    html body .rpgx-home .bpp-home-project-search-card-v4695__facts {
        margin-bottom: 10px !important;
        row-gap: 6px !important;
    }

    html body .rpgx-home .bpp-home-project-search-card-v4695__developer {
        margin-top: 10px !important;
        padding-top: 9px !important;
    }

    html body .rpgx-home .bpp-home-project-search-card-v4695__view {
        min-height: 39px !important;
        margin-top: 11px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    /* ============================================================
       5) RECOMMENDED PROFESSIONALS — main V26 correction
       Agencies / Agents / Owners / Developers.
       ============================================================ */
    html body .rpgx-home .bpp-home-rec-pros-v1 {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    html body .rpgx-home .bpp-home-rec-pros-v1__layout {
        display: block !important;
    }

    html body .rpgx-home .bpp-rec-pro-block {
        margin: 0 0 26px !important;
        padding: 0 !important;
    }

    html body .rpgx-home .bpp-rec-pro-block:last-child {
        margin-bottom: 0 !important;
    }

    html body .rpgx-home .bpp-rec-pro-block__head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "title view"
            "tabs tabs" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        margin-bottom: 12px !important;
    }

    html body .rpgx-home .bpp-rec-pro-block__head h2 {
        grid-area: title !important;
        min-width: 0 !important;
    }

    html body .rpgx-home .bpp-rec-pro-view-all {
        grid-area: view !important;
        align-self: center !important;
    }

    html body .rpgx-home .bpp-rec-pro-tabs {
        grid-area: tabs !important;
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 1px !important;
    }

    html body .rpgx-home .bpp-rec-pro-tabs::-webkit-scrollbar,
    html body .rpgx-home .bpp-rec-pro-grid::-webkit-scrollbar {
        display: none !important;
    }

    html body .rpgx-home .bpp-rec-pro-tabs button {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        font-size: 11px !important;
    }

    html body .rpgx-home .bpp-rec-pro-grid {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 2px 18vw 8px 1px !important;
        margin: 0 !important;
    }

    html body .rpgx-home .bpp-rec-pro-grid > .bpp-rec-pro-card {
        flex: 0 0 80vw !important;
        width: 80vw !important;
        min-width: 80vw !important;
        max-width: 320px !important;
        min-height: 166px !important;
        height: auto !important;
        scroll-snap-align: start !important;
        padding: 14px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    html body .rpgx-home .bpp-rec-pro-card__avatar,
    html body .rpgx-home .bpp-rec-pro-card img[class*="avatar"],
    html body .rpgx-home .bpp-rec-pro-card [class*="logo"] img,
    html body .rpgx-home .bpp-rec-pro-card img[class*="logo"] {
        width: 64px !important;
        min-width: 64px !important;
        height: 64px !important;
        object-fit: cover !important;
    }

    html body .rpgx-home .bpp-rec-pro-card__avatar {
        border-radius: 13px !important;
        overflow: hidden !important;
    }

    html body .rpgx-home .bpp-rec-pro-card__avatar > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    html body .rpgx-home .bpp-rec-pro-card__avatar--round,
    html body .rpgx-home .bpp-rec-pro-block[data-entity="agent"] .bpp-rec-pro-card img[class*="avatar"],
    html body .rpgx-home .bpp-rec-pro-block[data-entity="property_owner"] .bpp-rec-pro-card img[class*="avatar"] {
        border-radius: 50% !important;
    }

    html body .rpgx-home .bpp-rec-pro-card h3,
    html body .rpgx-home .bpp-rec-pro-card h4,
    html body .rpgx-home .bpp-rec-pro-card [class*="name"],
    html body .rpgx-home .bpp-rec-pro-card > strong {
        font-size: 16px !important;
        line-height: 1.22 !important;
        font-weight: 800 !important;
    }

    html body .rpgx-home .bpp-rec-pro-card p,
    html body .rpgx-home .bpp-rec-pro-card small,
    html body .rpgx-home .bpp-rec-pro-card span:not(.bpp-rec-pro-card__lines):not([aria-hidden="true"]),
    html body .rpgx-home .bpp-rec-pro-card [class*="meta"],
    html body .rpgx-home .bpp-rec-pro-card [class*="role"],
    html body .rpgx-home .bpp-rec-pro-card [class*="location"],
    html body .rpgx-home .bpp-rec-pro-card [class*="listing"] {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    html body .rpgx-home .bpp-rec-pro-card [class*="badge"],
    html body .rpgx-home .bpp-rec-pro-card [class*="verified"] {
        min-height: 23px !important;
        padding: 3px 7px !important;
        border-radius: 999px !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }

    html body .rpgx-home .bpp-rec-pro-card [class*="view"],
    html body .rpgx-home .bpp-rec-pro-card [class*="action"],
    html body .rpgx-home .bpp-rec-pro-card button {
        min-height: 36px !important;
        padding: 0 12px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }

    /* Keep loading skeletons aligned with the final larger cards. */
    html body .rpgx-home .bpp-rec-pro-card--skeleton .bpp-rec-pro-card__lines {
        flex: 1 1 auto !important;
        gap: 9px !important;
    }

    /* ============================================================
       6) TOP LOCATIONS — slightly taller + clearer overlay copy.
       Keep the horizontal swipe experience.
       ============================================================ */
    html body .rpgx-home .bpp-home-top-locations-v2__grid {
        gap: 12px !important;
        padding-bottom: 8px !important;
    }

    html body .rpgx-home .bpp-home-location-card-v2 {
        min-height: 220px !important;
        height: 220px !important;
        border-radius: 15px !important;
    }

    html body .rpgx-home .bpp-home-location-card-v2__link {
        min-height: 220px !important;
        height: 220px !important;
    }

    html body .rpgx-home .bpp-home-location-card-v2__content {
        padding: 15px !important;
    }

    html body .rpgx-home .bpp-home-location-card-v2__title strong {
        font-size: 17px !important;
        line-height: 1.15 !important;
    }

    html body .rpgx-home .bpp-home-location-card-v2__subtitle,
    html body .rpgx-home .bpp-home-location-card-v2__count,
    html body .rpgx-home .bpp-home-location-card-v2__cta {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    html body .rpgx-home .bpp-home-top-locations-v2__license-note {
        font-size: 10.5px !important;
        line-height: 1.4 !important;
    }

    /* ============================================================
       7) WHY CHOOSE — retain the 2-column stat layout but stop the
          over-compression and make metrics prominent.
       ============================================================ */
    html body .rpgx-home .rpgx-trust {
        min-height: 0 !important;
        padding: 18px !important;
        gap: 11px !important;
        border-radius: 16px !important;
    }

    html body .rpgx-home .rpgx-trust h3 {
        max-width: 280px !important;
        margin: 0 0 8px !important;
        font-size: 20px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.025em !important;
    }

    html body .rpgx-home .rpgx-trust > div:first-child p {
        display: block !important;
        max-width: 290px !important;
        margin: 0 0 9px !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }

    html body .rpgx-home .rpgx-trust > div:first-child > a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 31px !important;
        font-size: 11.5px !important;
        font-weight: 800 !important;
    }

    html body .rpgx-home .rpgx-trust-stat {
        min-height: 84px !important;
        padding: 11px 8px !important;
        border-radius: 12px !important;
    }

    html body .rpgx-home .rpgx-trust-stat i {
        width: 31px !important;
        height: 31px !important;
        font-size: 16px !important;
    }

    html body .rpgx-home .rpgx-trust-stat strong {
        margin-top: 5px !important;
        font-size: 20px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    html body .rpgx-home .rpgx-trust-stat span {
        margin-top: 4px !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }

    /* ============================================================
       8) OWNER CTA — taller conversion block + clear dual actions.
       ============================================================ */
    html body .rpgx-home .rpgx-cta {
        min-height: 190px !important;
        padding: 20px 18px !important;
        gap: 14px !important;
        border-radius: 16px !important;
    }

    html body .rpgx-home .rpgx-cta h3 {
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
    }

    html body .rpgx-home .rpgx-cta p {
        display: block !important;
        margin: 8px 0 0 !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }

    html body .rpgx-home .rpgx-cta > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    html body .rpgx-home .rpgx-cta .rpgx-btn {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        font-size: 12.5px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }

    /* ============================================================
       9) GLOBAL FOOTER — typography/readability only.
       Do not change accordion structure or open/closed behavior.
       ============================================================ */
    html body footer.rpg-market-footer .rpg-market-footer__brand > p {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }

    html body footer.rpg-market-footer .rpg-market-footer__contact,
    html body footer.rpg-market-footer .rpg-market-footer__contact a {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    html body footer.rpg-market-footer .rpg-market-footer__col > h4 {
        min-height: 48px !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
    }

    html body footer.rpg-market-footer .rpg-market-footer__col > a {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    html body footer.rpg-market-footer .rpg-market-footer__newsletter h4 {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    html body footer.rpg-market-footer .rpg-market-footer__newsletter > p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    html body footer.rpg-market-footer .rpg-market-footer__newsletter-form input,
    html body footer.rpg-market-footer .rpg-market-footer__newsletter-form button {
        min-height: 44px !important;
        font-size: 12.5px !important;
    }

    html body footer.rpg-market-footer .rpg-market-footer__bottom,
    html body footer.rpg-market-footer .rpg-market-footer__bottom span {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 390px) {
    html body .rpgx-home .bpp-rec-pro-grid > .bpp-rec-pro-card {
        flex-basis: 82vw !important;
        width: 82vw !important;
        min-width: 82vw !important;
    }

    html body .rpgx-home .bpp-rec-pro-grid {
        padding-right: 14vw !important;
    }

    html body .rpgx-home .rpgx-cta h3 {
        font-size: 19px !important;
    }
}