/* Public marketing shell only. 1600px retains the roomy desktop composition
   (including the existing >1440px ecosystem/carousel rules), without letting
   grids, artwork and type keep spreading on ultrawide screens or zoom-out.
   Use the same bounded unit in the existing CSS formulas, not transform/zoom.
   Admin routes omit this class and retain the original 1vw fallback. */
.public-site {
    --byc-content-max: 1600px;
    --byc-content-gutter: clamp(20px, 4vw, 64px);
    --public-layout-max: 1600px;
    --public-layout-vw: min(1vw, calc(var(--public-layout-max) / 100));
}

/* Keep the section backgrounds/artwork full-bleed on ultrawide screens. The
   existing content blocks remain bounded below, so the composition does not
   stretch just because the viewport is wider. */
.public-site > main {
    width: 100%;
    max-width: none;
}

.public-site > main > section {
    width: 100%;
}

.public-site > main > .homepage-canvas > section {
    width: 100%;
}

.public-site > main > section
    > :not(.hero-media):not(.hero-grid):not(.hero-shell):not(.hero-card-grid):not(.about-team-hero__media):not(.wb-hero):not(.wb-capabilities):not(.wb-audience):not(.contact) {
    width: min(100%, var(--public-layout-max));
    margin-inline: auto;
}

.public-site > main > .homepage-canvas > section
    > :not(.hero-media):not(.hero-grid):not(.hero-shell):not(.hero-card-grid):not(.about-team-hero__media):not(.wb-hero):not(.wb-capabilities):not(.wb-audience):not(.contact) {
    width: min(100%, var(--public-layout-max));
    margin-inline: auto;
}

/* Place the ecosystem intro in the open space beside the diagram on desktop. */
@media (min-width: 821px) and (hover: hover) {
    .public-site .connected-ecosystem__intro {
        transform: translateY(50px);
    }
}

/* Header/footer backgrounds remain full-bleed. Only their content is bounded,
   preserving the existing header (5vw) versus section (6vw) inset convention. */
@media (min-width: 1600px) {
    .public-site {
        /* Root-defined tokens otherwise resolve before the body unit exists. */
        --section-eyebrow-size: clamp(
            1.15rem,
            calc(var(--public-layout-vw) * 1.05),
            1.6rem
        );
        --section-heading-size: clamp(
            3.25rem,
            calc(var(--public-layout-vw) * 4.15),
            5.35rem
        );
        --section-copy-size: clamp(
            1.18rem,
            calc(var(--public-layout-vw) * 1.2),
            1.46rem
        );
    }

    .public-site > .site-header > .site-header__inner {
        padding-inline: calc(
            max(0px, (100% - var(--public-layout-max)) / 2) +
                clamp(22px, calc(var(--public-layout-vw) * 5), 78px)
        );
    }
}

/* The header background is full-bleed; its inner content follows the same
   responsive bounds as .hero-shell and the other homepage compositions. */
@media (min-width: 1025px) {
    .public-site > .site-header > .site-header__inner {
        padding-inline: calc(
            var(--byc-content-gutter) +
                max(
                    var(--byc-content-gutter),
                    calc((100% - var(--byc-content-max)) / 2)
                )
        );
    }
}

@media (min-width: 1025px) and (max-width: 1180px) {
    .public-site > .site-header > .site-header__inner {
        padding-inline: clamp(22px, 6vw, 92px);
    }
}

@media (max-width: 1024px) {
    .public-site > .site-header > .site-header__inner {
        padding-inline: clamp(22px, 6vw, 92px);
    }
}

@media (max-width: 620px) {
    .public-site > .site-header > .site-header__inner {
        padding-inline: 16px;
    }
}

.public-site > .site-footer > .site-footer__inner {
    max-width: var(--public-layout-max);
}

.public-site > main > section.wb-hero,
.public-site > main > section.wb-capabilities,
.public-site > main > section.wb-audience {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.public-site > main > section.contact {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}