/**


 * SA Layout — Global responsive layout system


 *


 * Loaded on every front-end page by sa-shared-ui.


 * Provides:


 *   1. CSS custom properties for site-wide width tokens.


 *   2. Utility classes (.pa-wrap, .pa-grid-wrap) for new/refactored plugins.


 *   3. Targeted wide-screen expansion for all current SA plugin wrappers —


 *      no per-plugin PHP changes required.


 *


 * Breakpoint strategy


 *   < 1024px  : untouched — existing mobile/tablet styles govern


 *   1024–1400px : gentle nudge to 1100px content / 1300px grids


 *   > 1400px  : full wide-screen expansion (targets QHD/4K monitors at DPR 1)


 */





/* ─── 1. CSS custom properties ───────────────────────────────────────────── */





:root {


    --pa-wrap-width:   1100px;   /* text / reading pages          */


    --pa-grid-width:   1560px;   /* card grids, wide layouts      */


    --pa-page-gutter:  clamp(16px, 3vw, 48px);  /* responsive side padding */


}





/* ─── 2. Utility classes (for future / refactored plugins) ───────────────── */





.pa-wrap {


    max-width:      var(--pa-wrap-width);


    margin-inline:  auto;


    padding-inline: var(--pa-page-gutter);


    width:          100%;


    box-sizing:     border-box;


}





.pa-grid-wrap {


    max-width:      var(--pa-grid-width);


    margin-inline:  auto;


    padding-inline: var(--pa-page-gutter);


    width:          100%;


    box-sizing:     border-box;


}





/* Full-width band (hero, stat bars): background bleeds edge-to-edge,


   inner content stays constrained via a .pa-wrap child. */


.pa-band {


    width: 100%;


}





/* ─── 3. Wide-screen expansion for existing SA plugins ───────────────────── */


/*


 * At ≥ 1024px, nudge all SA plugin content wrappers above the old 980px cap.


 * This removes the "narrow island" on any screen wider than a large laptop.


 */





@media (min-width: 1024px) {


}





/* At full wide-screen (QHD monitors, DPR-1 displays > 1400px CSS px):


   let grids breathe fully and add column density. */


@media (min-width: 1400px) {


}





/* ─── 4. Gutter harmonisation ────────────────────────────────────────────── */


/*


 * Ensure plugin wrappers that previously relied on a fixed narrow


 * max-width for implied side padding pick up breathing room instead.


 */


@media (min-width: 1024px) {


}





/* ─── 5. Elementor container expansion on wide screens ───────────────────── */


/*


 * The plays/characters/etc pages use Elementor's e-con-boxed container which


 * caps content width independently of our plugin wrappers.


 * On wide screens we let it breathe, while keeping reading pages narrower.


 */


@media (min-width: 1400px) {


    .e-con-boxed {


        --container-max-width: 1560px !important;


    }


}





@media (min-width: 1024px) and (max-width: 1399px) {


    .e-con-boxed {


        --container-max-width: 1200px !important;


    }


}