/* BPP Developer Profile V5.8
   Mobile layout correction + sticky/anchor safety.
   Desktop Developer structure/order remains V5.7.
   Global mobile footer remains the site's rpg-market-footer. */

/* Prevent any child from forcing horizontal overflow. */
html body .bpp54-developer,
html body .bpp54-developer *{
    min-width:0;
}

html body .bpp54-developer{
    overflow-x:clip!important;
}

/* Make anchor scrolling stop below the site's sticky header + profile tabs.
   This does NOT reposition or restyle the global header. */
html body .bpp54-developer #overview,
html body .bpp54-developer #about,
html body .bpp54-developer #contact,
html body .bpp54-developer #featured-developments,
html body .bpp54-developer #available-units,
html body .bpp54-developer #team,
html body .bpp54-developer #reviews{
    scroll-margin-top:calc(var(--bpp58-sticky-offset, var(--bpp54-header-offset, 0px)) + 54px)!important;
}

/* Tablet/mobile starts stacking earlier so Firefox/mobile emulation cannot
   leave About and Get in Touch trapped in the desktop 2-column composition. */
@media (max-width:900px){
    html body .bpp54-developer .bpp54-overview-grid{
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        gap:10px!important;
        width:100%!important;
    }

    html body .bpp54-developer .bpp54-overview-grid > *{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    html body .bpp54-developer .bpp54-contact-card{
        position:static!important;
        inset:auto!important;
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
        margin:0!important;
    }

    html body .bpp54-developer .bpp54-contact-card a{
        width:100%!important;
        max-width:none!important;
    }

    /* Explicit source order on compact layouts. */
    html body .bpp54-developer #about{
        order:1!important;
    }

    html body .bpp54-developer #contact{
        order:2!important;
    }

    /* Tabs stay one line and scroll instead of compressing labels. */
    html body .bpp54-developer .bpp54-tabs{
        display:flex!important;
        flex-wrap:nowrap!important;
        justify-content:flex-start!important;
        gap:20px!important;
        width:100%!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        white-space:nowrap!important;
        overscroll-behavior-x:contain!important;
        scroll-snap-type:x proximity!important;
        -webkit-overflow-scrolling:touch!important;
        scrollbar-width:none!important;
    }

    html body .bpp54-developer .bpp54-tabs::-webkit-scrollbar{
        display:none!important;
    }

    html body .bpp54-developer .bpp54-tabs a{
        flex:0 0 auto!important;
        width:auto!important;
        min-width:max-content!important;
        scroll-snap-align:start!important;
        text-align:center!important;
    }
}

/* Phone layout: full-width cards, readable text, 2x2 KPIs, global footer. */
@media (max-width:767px){
    html,
    body{
        overflow-x:hidden!important;
    }

    html body .bpp54-developer .bpp54-container{
        width:calc(100% - 20px)!important;
        max-width:none!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    html body .bpp54-developer .bpp54-main{
        width:100%!important;
        padding-top:10px!important;
        padding-bottom:20px!important;
    }

    /* Identity/actions */
    html body .bpp54-developer .bpp54-profile-row{
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        gap:10px!important;
    }

    html body .bpp54-developer .bpp54-identity{
        width:100%!important;
    }

    html body .bpp54-developer .bpp54-actions{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:7px!important;
        width:100%!important;
    }

    html body .bpp54-developer .bpp54-actions a{
        width:100%!important;
        min-height:40px!important;
        font-size:12px!important;
    }

    /* 2 x 2 KPI cards. */
    html body .bpp54-developer .bpp54-top-kpis,
    html body .bpp54-developer .bpp54-summary{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:7px!important;
        width:100%!important;
    }

    html body .bpp54-developer .bpp54-top-kpis>div,
    html body .bpp54-developer .bpp54-summary>div{
        min-height:58px!important;
        padding:9px 10px!important;
    }

    /* About and contact are true full-width stacked cards. */
    html body .bpp54-developer .bpp54-overview-grid{
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        gap:10px!important;
    }

    html body .bpp54-developer .bpp54-card,
    html body .bpp54-developer .bpp54-contact-card{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding:14px!important;
        overflow:visible!important;
    }

    html body .bpp54-developer .bpp54-copy{
        font-size:13px!important;
        line-height:1.58!important;
        overflow-wrap:anywhere!important;
    }

    html body .bpp54-developer .bpp54-card-title h3{
        font-size:15px!important;
        line-height:1.3!important;
    }

    html body .bpp54-developer .bpp54-card-title p{
        font-size:11px!important;
        line-height:1.45!important;
    }

    /* Keep feature chips readable; on very narrow phones they become 1 column. */
    html body .bpp54-developer .bpp54-feature-grid{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:6px!important;
        width:100%!important;
    }

    html body .bpp54-developer .bpp54-feature-grid span{
        display:flex!important;
        align-items:center!important;
        min-height:36px!important;
        width:100%!important;
        padding:8px!important;
        font-size:11px!important;
        line-height:1.35!important;
        white-space:normal!important;
        overflow-wrap:anywhere!important;
    }

    /* Cards stay one-per-row on mobile. */
    html body .bpp54-developer .bpp54-development-grid,
    html body .bpp54-developer .bpp54-property-grid,
    html body .bpp54-developer .bpp54-bottom-grid{
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        gap:10px!important;
        width:100%!important;
    }

    html body .bpp54-developer .bpp54-development-card,
    html body .bpp54-developer .bpp54-property-card{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    html body .bpp54-developer .bpp54-development-card .media,
    html body .bpp54-developer .bpp54-property-card .media{
        width:100%!important;
        aspect-ratio:1.65/1!important;
    }

    html body .bpp54-developer .bpp54-development-card h3,
    html body .bpp54-developer .bpp54-property-card h3{
        font-size:15px!important;
        line-height:1.35!important;
    }

    html body .bpp54-developer .bpp54-development-card p,
    html body .bpp54-developer .bpp54-development-card .metric,
    html body .bpp54-developer .bpp54-development-card .starting,
    html body .bpp54-developer .bpp54-property-card .location,
    html body .bpp54-developer .bpp54-property-card .property-meta{
        font-size:11px!important;
        line-height:1.45!important;
    }

    /* Bottom information cards stay full-width and vertical. */
    html body .bpp54-developer .bpp54-location-body{
        grid-template-columns:1fr!important;
    }

    /* Global mobile footer only. */
    html body:has(.bpp54-developer){
        padding-bottom:0!important;
    }


    /* Ensure legacy Developer custom mobile bar can never reappear. */
    html body .bpp54-developer .bpp54-mobile-actions{
        display:none!important;
    }
}

@media (max-width:420px){
    html body .bpp54-developer .bpp54-feature-grid{
        grid-template-columns:minmax(0,1fr)!important;
    }

    html body .bpp54-developer .bpp54-actions{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    html body .bpp54-developer .bpp54-tabs{
        gap:17px!important;
    }
}