/*
 * BDA Website Components – shared layout foundations.
 *
 * These tokens keep container widths consistent across plugin components.
 * Existing Modern Page dimensions are preserved; the homepage receives a
 * modest width increase only on large desktop displays.
 */

:root {
    --bda-container-narrow: 820px;
    --bda-container-standard: 1120px;
    --bda-container-expanded: 1320px;
    --bda-container-wide: 1400px;
    --bda-container-max: 1480px;

    /* Homepage-specific large-screen tiers. */
    --bda-container-home-standard: 1600px;
    --bda-container-home-cta: 1720px;
    --bda-container-home-hero: 2360px;

    --bda-container-gutter: 20px;
    --bda-container-gutter-mobile: 14px;
}

/* Reusable container utility for future plugin components. */
.bda-layout-container {
    box-sizing: border-box;
    width: min(
        calc(100% - (var(--bda-container-gutter) * 2)),
        var(--bda-container-standard)
    );
    margin-right: auto;
    margin-left: auto;
}

.bda-layout-container--narrow {
    max-width: var(--bda-container-narrow);
}

.bda-layout-container--standard {
    max-width: var(--bda-container-standard);
}

.bda-layout-container--wide {
    max-width: var(--bda-container-wide);
}

.bda-layout-container--full {
    width: 100%;
    max-width: none;
}

/*
 * Large desktop homepage refinement.
 *
 * The live homepage prototype originally stored its Hero, About and CTA shell
 * rules in the child theme. These selectors deliberately load after that file,
 * allowing the plugin to own the new width behaviour without altering the
 * successful laptop, tablet or mobile layouts.
 */
@media screen and (min-width: 1800px) {
    body.home .fw-main-row-custom.bda-home-hero-section {
        width: min(calc(100vw - 96px), var(--bda-container-home-hero)) !important;
        max-width: var(--bda-container-home-hero) !important;
        margin-left: max(
            calc(50% - 50vw + 48px),
            calc(50% - 1180px)
        ) !important;
    }

    body.home .fw-main-row-custom.bda-home-about-section .fw-container,
    body.home .fw-main-row-custom.bda-home-about-section .fw-container-fluid,
    body.home .fw-main-row-custom.bda-home-featured-section .fw-container,
    body.home .fw-main-row-custom.bda-home-featured-section .fw-container-fluid,
    body.home .fw-main-row-custom.bda-home-news-section .fw-container,
    body.home .fw-main-row-custom.bda-home-news-section .fw-container-fluid {
        width: min(calc(100vw - 128px), var(--bda-container-home-standard)) !important;
        max-width: var(--bda-container-home-standard) !important;
    }

    body.home .fw-main-row-custom.bda-home-cta-section .fw-container,
    body.home .fw-main-row-custom.bda-home-cta-section .fw-container-fluid {
        width: min(calc(100vw - 128px), var(--bda-container-home-cta)) !important;
        max-width: var(--bda-container-home-cta) !important;
    }
}

@media screen and (max-width: 767px) {
    .bda-layout-container {
        width: min(
            calc(100% - (var(--bda-container-gutter-mobile) * 2)),
            100%
        );
    }
}