/* BPYC Mobile UX M4 — cross-site responsive QA closure.
   This file contains only final defensive rules shared by public + member pages. */
/* BEGIN bpyc-mobile-closure-m4 */

@media(max-width:1024px){
    .public-site :where(main,section,article,aside,header,footer,nav,form,fieldset,div),
    .member-site :where(main,section,article,aside,header,footer,nav,form,fieldset,div){
        min-width:0;
    }

    .public-site :where(img,svg,video,canvas),
    .member-site :where(img,svg,video,canvas){
        max-width:100%;
    }

    .public-site :where(iframe,object,embed),
    .member-site :where(iframe,object,embed){
        max-width:100%;
    }

    .public-site :where(pre,code,kbd,samp),
    .member-site :where(pre,code,kbd,samp){
        max-width:100%;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .public-site table,
    .member-site table{
        max-width:100%;
    }
}

@media(max-width:768px){
    .public-site :where(a,button,input,select,textarea,summary):focus-visible,
    .member-site :where(a,button,input,select,textarea,summary):focus-visible{
        outline:3px solid rgba(0,79,158,.34);
        outline-offset:3px;
    }

    .public-site details>summary,
    .member-site details>summary{
        min-height:44px;
        touch-action:manipulation;
    }

    .public-site :where(dialog,[role="dialog"]),
    .member-site :where(dialog,[role="dialog"]){
        max-width:calc(100vw - 20px);
        max-height:calc(100dvh - 20px - env(safe-area-inset-bottom));
    }

    .public-site :where(.table-wrap,.responsive-table,.section-table-wrap),
    .member-site :where(.table-wrap,.responsive-table,.section-table-wrap){
        max-width:100%;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
    }

    .public-site :where(.flash,.alert,.public-alert),
    .member-site :where(.flash,.alert,.member-alert){
        max-width:100%;
        overflow-wrap:anywhere;
    }
}

@media(max-width:430px){
    .public-site :where(h1,h2,h3),
    .member-site :where(h1,h2,h3){
        text-wrap:balance;
    }

    .public-site :where(.public-card-actions,.section-action-buttons),
    .member-site :where(.member-work-card-buttons,.member-profile-form-actions){
        max-width:100%;
    }
}

@media(max-width:412px){
    .public-site :where(.badge,.chip,.pill),
    .member-site :where(.badge,.chip,.pill){
        max-width:100%;
        white-space:normal;
    }
}

@media(max-width:390px){
    .public-site :where(input,select,textarea),
    .member-site :where(input,select,textarea){
        width:100%;
        min-width:0;
    }
}

@media(max-width:375px){
    .public-site :where(.public-shell,.public-container),
    .member-site .member-shell{
        max-width:calc(100% - 18px);
    }
}

@media(max-width:360px){
    .public-site :where(.public-card-actions,.section-action-buttons),
    .member-site :where(.member-work-card-buttons,.member-profile-form-actions){
        grid-template-columns:1fr;
    }
}

@media(max-width:320px){
    .public-site :where(.public-shell,.public-container),
    .member-site .member-shell{
        max-width:calc(100% - 14px);
    }

    .public-site :where(h1,h2,h3,p,a,button,label,strong,span,small),
    .member-site :where(h1,h2,h3,p,a,button,label,strong,span,small){
        overflow-wrap:anywhere;
    }
}

/* Short landscape phones need vertical-space recovery as well as width rules. */
@media(max-height:500px) and (orientation:landscape){
    [data-mobile-menu] [data-mobile-menu-panel]{
        top:8px!important;
        max-height:calc(100dvh - 16px - env(safe-area-inset-bottom))!important;
    }

    .member-site{
        padding-bottom:calc(56px + env(safe-area-inset-bottom))!important;
    }

    .member-mobile-dock{
        min-height:52px!important;
        padding-top:4px!important;
        padding-bottom:max(4px,env(safe-area-inset-bottom))!important;
    }

    .member-mobile-dock>a{
        min-height:42px!important;
    }

    .member-mobile-dock>a>span:last-child{
        display:none;
    }

    .member-notification-popover,
    .public-share-dialog{
        max-height:calc(100dvh - 16px - env(safe-area-inset-bottom))!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .public-site *,
    .public-site *::before,
    .public-site *::after,
    .member-site *,
    .member-site *::before,
    .member-site *::after{
        scroll-behavior:auto!important;
    }
}

/* END bpyc-mobile-closure-m4 */

/* BEGIN public-mobile-shell-consistency-v2 */
/*
 * Final public mobile geometry.
 * Do not create route-specific shell widths: every public page should use
 * the same viewport containment, centered gutters, and content width.
 */
@media(max-width:760px){
    body.public-site{
        width:100%;
        max-width:100%;
        margin:0;
        overflow-x:hidden;
    }

    body.public-site :where(.public-shell,.public-container){
        width:calc(100% - 24px);
        max-width:1232px;
        margin-left:auto;
        margin-right:auto;
    }

    body.public-site :where(
        .section-page-hero,
        .section-page-body
    ){
        width:100%;
        max-width:100%;
        min-width:0;
    }

    body.public-site :where(
        .section-feed-layout,
        .section-feed-side,
        .section-announcement-list,
        .section-announcement-card,
        .section-announcement-card-layout,
        .section-announcement-card-copy,
        .section-feed-pastoral
    ){
        width:100%;
        max-width:100%;
        min-width:0;
    }
}

@media(max-width:520px){
    body.public-site :where(.public-shell,.public-container){
        width:calc(100% - 20px);
    }
}
/* END public-mobile-shell-consistency-v2 */