/*
==================================================
STATIC PAGE
==================================================
*/

.bbw-page{

    padding:3rem 0 4rem;

}

.bbw-page-content{

    width:min(100% - 2in,1500px);

    max-width:none;

    margin-inline:auto;

    padding-inline:2rem;

    border-left:4px solid var(--bbw-teal);
    border-right:4px solid var(--bbw-teal);

    box-shadow:
        4px 0 0 var(--bbw-yellow),
        -4px 0 0 var(--bbw-yellow);

    font-size:1.15rem;

}

.bbw-page-content::after{

    content:"";

    display:table;

    clear:both;

}

.bbw-404 .bbw-page-content{

    text-align:center;

}

/*
==================================================
WRAPPED / FLOATED IMAGES

Native Image block, "align left"/"align right" —
gives the magazine wrap-around-image layout.
==================================================
*/

.bbw-page-content .wp-block-image.alignleft,
.bbw-page-content .wp-block-image.alignright{

    max-width:50%;

    margin-top:.3rem;
    margin-bottom:1.5rem;

}

.bbw-page-content .wp-block-image.alignleft{

    margin-right:2rem;

}

.bbw-page-content .wp-block-image.alignright{

    margin-left:2rem;

}

/*
==================================================
WIDE / FULL BREAKOUT

Theme already declares add_theme_support('align-wide');
this makes those options actually render full-bleed
inside the page container.
==================================================
*/

.bbw-page-content .alignwide{

    max-width:calc(100% + 4rem);

    margin-inline:-2rem;

}

.bbw-page-content .alignfull{

    max-width:100vw;

    margin-inline:calc(50% - 50vw);

}

/*
==================================================
GRID LAYOUT

Native Columns/Group blocks — image-over-text cards,
repeated in rows.
==================================================
*/

.bbw-page-content .wp-block-columns{

    margin-top:2.5rem;
    margin-bottom:2.5rem;

    gap:2rem;

}

.bbw-page-content .wp-block-column img{

    width:100%;

}

/*
==================================================
RESPONSIVE
==================================================
*/

@media (max-width:640px){

    .bbw-page{

        padding:2rem 0 3rem;

    }

    .bbw-page-content{

        width:100%;

        margin-inline:0;

        padding-inline:1.25rem;

        font-size:1.05rem;

    }

    .bbw-page-content .wp-block-image.alignleft,
    .bbw-page-content .wp-block-image.alignright{

        float:none;

        max-width:100%;

        margin-left:0;
        margin-right:0;

    }

}