/* ATLCOC Mobile Full-Width Layout Fix
   Load this AFTER styles.css and mobile.css.
*/

html,
body{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

main{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}

/* Banner should span the entire usable viewport width */
.hero,
.atl-home-banner,
.atl-banner{
    display:block;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.hero img,
.atl-home-banner img,
.atl-banner img{
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    margin:0;
    padding:0;
}

/* Desktop/tablet containers keep normal centered layout */
.container,
.atl-container{
    width:min(1180px,92%);
    max-width:1180px;
    margin-left:auto;
    margin-right:auto;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width:600px){

    /*
     * Make the actual page sections use the full phone width,
     * with a small consistent internal gutter.
     */
    .container,
    .atl-container,
    .two-col.container,
    .bottom-grid.container,
    .mission-grid.container,
    .page-hero.container,
    .church-page,
    .church-page-shell,
    .submit-business-shell,
    .update-shell{
        width:100% !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:16px !important;
        padding-right:16px !important;
    }

    /* Full-bleed elements must not inherit container padding */
    .hero,
    .atl-home-banner,
    .atl-banner{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
    }

    .hero img,
    .atl-home-banner img,
    .atl-banner img{
        width:100% !important;
        max-width:none !important;
        height:auto !important;
        min-height:0 !important;
        object-fit:contain !important;
        object-position:center !important;
    }

    /* Home page sections should occupy the full available content width */
    .two-col,
    .bottom-grid,
    .mission-grid,
    .event-grid,
    .church-list,
    .business-grid,
    .minister-grid,
    .detail-grid,
    .secondary-grid,
    .split-section{
        width:100% !important;
        max-width:none !important;
    }

    .two-col,
    .bottom-grid,
    .mission-grid,
    .event-grid,
    .business-grid,
    .minister-grid,
    .detail-grid,
    .secondary-grid,
    .split-section{
        grid-template-columns:1fr !important;
    }

    /* Cards fill their containing column */
    .card,
    .event-card,
    .church-row,
    .business-card,
    .minister-card,
    .detail-card,
    .list-card{
        width:100% !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    /*
     * The mission band background remains edge-to-edge,
     * but its inner content uses the same 16px gutter.
     */
    .mission-band{
        width:100% !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    /* Prevent form controls/buttons from appearing narrower */
    form,
    input,
    select,
    textarea,
    button{
        max-width:100%;
    }

    .search-form,
    .actions,
    .profile-actions,
    .finder-actions,
    .business-actions,
    .home-involved-actions{
        width:100%;
    }
}

/* Slightly larger phones/tablets */
@media screen and (min-width:601px) and (max-width:900px){
    .container,
    .atl-container{
        width:94%;
        max-width:none;
    }

    .hero,
    .atl-home-banner,
    .atl-banner{
        width:100%;
        max-width:none;
    }

    .hero img,
    .atl-home-banner img,
    .atl-banner img{
        width:100%;
        max-width:none;
        height:auto;
        object-fit:contain;
    }
}