/*
 * BestPropertyPlug Ghana — Homepage Mobile Section Center V26.2
 * Scope: homepage mobile only (<= 760px)
 * Purpose: center homepage content blocks with equal left/right gutters.
 * Preserves V26.1 search centering and does not redesign header, hero,
 * desktop/tablet, footer structure, sticky bottom nav, or card content.
 */

@media (max-width: 760px) {
    /* ============================================================
       A. CANONICAL HOMEPAGE CONTENT GUTTER
       Every main homepage section uses one centered 10px mobile gutter.
       This neutralizes inherited container padding/offsets that were
       making some blocks look slightly left/right shifted.
       ============================================================ */
    html body .rpgx-home > section.rpgx-section > .rpgx-container {
        display: block !important;
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Keep all major section heads on the exact same center line. */
    html body .rpgx-home .rpgx-types-section .rpgx-section-head,
    html body .rpgx-home .rpgx-properties-head,
    html body .rpgx-home .bpp-hp-projects-v4695__head,
    html body .rpgx-home .bpp-rec-pro-block__head,
    html body .rpgx-home .bpp-home-top-locations-v2__head {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    /* ============================================================
       B. PROPERTY TYPES
       Lock the whole types strip to the centered section container.
       ============================================================ */
    html body .rpgx-home .rpgx-types-section .rpgx-type-row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        scroll-padding-left: 0 !important;
    }

    /* ============================================================
       C. RECOMMENDED PROPERTIES
       Preserve the horizontal swipe/peek, but remove left offset.
       ============================================================ */
    html body .rpgx-home .rpgx-property-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        scroll-padding-left: 0 !important;
    }

    html body .rpgx-home .rpgx-property-grid > :first-child {
        margin-left: 0 !important;
    }

    /* ============================================================
       D. FEATURED PROJECTS
       Center the head, group viewport and card scroller as one block.
       ============================================================ */
    html body .rpgx-home .bpp-hp-projects-v4695__groups,
    html body .rpgx-home .bpp-hp-projects-v4695__grid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        scroll-padding-left: 0 !important;
    }

    html body .rpgx-home .bpp-hp-projects-v4695__grid > :first-child {
        margin-left: 0 !important;
    }

    /* ============================================================
       E. RECOMMENDED AGENCIES / AGENTS / OWNERS / DEVELOPERS
       These blocks showed the most obvious inconsistent horizontal
       alignment after the card-size polish. Align all four identically.
       ============================================================ */
    html body .rpgx-home .bpp-home-rec-pros-v1__layout,
    html body .rpgx-home .bpp-rec-pro-block {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    html body .rpgx-home .bpp-rec-pro-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        scroll-padding-left: 0 !important;
    }

    html body .rpgx-home .bpp-rec-pro-grid > :first-child {
        margin-left: 0 !important;
    }

    /* ============================================================
       F. TOP LOCATIONS
       This section has a .rpgx-container nested inside another
       .rpgx-container. The generic mobile width rule was therefore
       shrinking/offsetting it twice. Keep the outer canonical gutter,
       then make the nested locations container exactly 100% of it.
       ============================================================ */
    html body .rpgx-home > section.rpgx-section > .rpgx-container > .bpp-home-top-locations-v2 {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    html body .rpgx-home > section.rpgx-section > .rpgx-container > .bpp-home-top-locations-v2 > .rpgx-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    html body .rpgx-home .bpp-home-top-locations-v2__grid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        scroll-padding-left: 0 !important;
    }

    html body .rpgx-home .bpp-home-top-locations-v2__grid > :first-child {
        margin-left: 0 !important;
    }

    /* ============================================================
       G. WHY CHOOSE + OWNER CTA
       Ensure the two conversion modules use the same exact outer width.
       ============================================================ */
    html body .rpgx-home .rpgx-trust,
    html body .rpgx-home .rpgx-cta {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Do not allow any corrected content module to create a hidden
       horizontal overflow that visually pulls the page off-center. */
    html body .rpgx-home > section.rpgx-section {
        max-width: 100% !important;
        overflow-x: clip !important;
    }
}

@media (max-width: 390px) {
    /* Same 10px gutter on narrow phones for exact left/right parity. */
    html body .rpgx-home > section.rpgx-section > .rpgx-container {
        width: calc(100% - 20px) !important;
    }
}