/*
 * Core-template composition for effective CSS viewports at 2880 px and wider.
 * Full-bleed backgrounds remain full width; readable content uses calm shells.
 */

html {
    --us-ultra-shell: 2880px;
    --us-ultra-grid: 2640px;
    --us-ultra-detail: 2640px;
}

@media (min-width: 1440px) {
    html[data-understar-page-kind="home"] main [data-scroll-reveal-key="home-about"] > section:first-child > a[href="/about"] {
        transform: translateY(-20px);
    }
}

/* About: align section content while preserving the intentional wide surfaces. */
@media (min-width: 768px) {
    main[data-about-main="true"] > [data-header-safe-area-owner="true"] {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

@media (min-width: 1024px) {
    main[data-about-main="true"] [data-team-grid="true"] {
        --us-about-team-card: 245px;
        grid-template-columns: repeat(4, minmax(0px, min(var(--us-about-team-card), calc((100% - 36px) / 4)))) !important;
        justify-content: space-between;
    }

    main[data-about-main="true"] [data-team-grid="true"] > [data-person-card="team"] > :first-child {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    main[data-about-main="true"] [data-scroll-reveal-key="about-documents"] > div:first-child {
        margin-right: -32px;
        margin-left: -32px;
    }
}

@media (min-width: 1280px) {
    main[data-about-main="true"] [data-team-grid="true"] {
        --us-about-team-card: 311px;
    }

    main[data-about-main="true"] [data-scroll-reveal-key="about-documents"] > div:first-child {
        margin-right: -40px;
        margin-left: -40px;
    }
}

@media (min-width: 1920px) {
    main[data-about-main="true"] [data-principles-section="true"] {
        padding-right: 66px !important;
        padding-left: 66px !important;
    }

    main[data-about-main="true"] [data-team-grid="true"] {
        --us-about-team-card: 420px;
    }

    main[data-about-main="true"] [data-scroll-reveal-key="about-documents"] > div:first-child {
        margin-right: -56px;
        margin-left: -56px;
    }
}

@media (min-width: 2400px) and (max-width: 2879px) {
    html[data-understar-page-kind="child-detail"] main [data-child-reading="true"] {
        width: 100% !important;
        max-width: 1200px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="news-detail"] main [data-news-reading="true"],
    html[data-understar-page-kind="activity-detail"] main > [data-activity-reading="true"] {
        width: 100% !important;
        max-width: 1280px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

@media (min-width: 2880px) {
    html {
        --us-ultra-active: 1;
    }

    main[data-about-main="true"] {
        box-sizing: border-box;
        padding-right: max(100px, calc((100% - 2665px) / 2)) !important;
        padding-left: max(100px, calc((100% - 2665px) / 2)) !important;
    }

    header > div:first-child {
        padding-right: max(100px, calc((100vw - var(--us-ultra-shell)) / 2)) !important;
        padding-left: max(100px, calc((100vw - var(--us-ultra-shell)) / 2)) !important;
    }

    footer > div:first-child,
    footer > div:last-child {
        width: 100% !important;
        max-width: var(--us-ultra-shell) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    footer > div[class*="max-w-[1120px]"] {
        max-width: 1120px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="home"] main > div,
    html[data-understar-page-kind="home"] main > section:not([data-home-children-section="true"]):not([data-scroll-reveal-key="home-news"]) {
        width: 100% !important;
        max-width: var(--us-ultra-shell) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="home"] [data-home-children-section="true"] > *,
    html[data-understar-page-kind="home"] [data-scroll-reveal-key="home-news"] > * {
        width: 100% !important;
        max-width: var(--us-ultra-grid) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="home"] main [class*="lg:grid-cols-3"] {
        width: 100% !important;
        max-width: var(--us-ultra-grid) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="children-list"] main > section:not(#section-children),
    html[data-understar-page-kind="children-list"] #section-children > * {
        width: 100% !important;
        max-width: var(--us-ultra-shell) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="children-list"] #kids-table {
        width: 100% !important;
        max-width: var(--us-ultra-grid) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="child-detail"] [data-child-detail-layout="balanced-width"] {
        grid-template-columns: minmax(0, 1216px) 1120px !important;
        column-gap: 64px !important;
        justify-content: start !important;
        width: 100% !important;
        max-width: var(--us-ultra-detail) !important;
    }

    html[data-understar-page-kind="child-detail"] [data-children-detail-hero="true"] {
        padding-right: max(100px, calc((100vw - var(--us-ultra-shell)) / 2)) !important;
        padding-left: max(100px, calc((100vw - var(--us-ultra-shell)) / 2)) !important;
    }

    html[data-understar-page-kind="child-detail"] #kids-table {
        width: 100% !important;
        max-width: var(--us-ultra-grid) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="news-list"] main > section,
    html[data-understar-page-kind="news-detail"] main > section.us-news-detail-layout {
        width: 100% !important;
        max-width: var(--us-ultra-shell) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="news-list"] #section-news > div,
    html[data-understar-page-kind="news-list"] main [class*="lg:grid-cols-3"],
    html[data-understar-page-kind="news-detail"] main [class*="lg:grid-cols-3"] {
        width: 100% !important;
        max-width: var(--us-ultra-grid) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="news-detail"] main > section.us-news-detail-layout {
        max-width: var(--us-ultra-grid) !important;
    }

    html[data-understar-page-kind="activity-list"] main > section,
    html[data-understar-page-kind="activity-detail"] main > section {
        width: 100% !important;
        max-width: var(--us-ultra-shell) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="activity-list"] main [class*="lg:grid-cols-4"],
    html[data-understar-page-kind="activity-list"] main [class*="xl:grid-cols-5"],
    html[data-understar-page-kind="activity-detail"] main [class*="lg:grid-cols-3"] {
        width: 100% !important;
        max-width: var(--us-ultra-grid) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="child-detail"] main [data-child-reading="true"] {
        width: 100% !important;
        max-width: 1260px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-understar-page-kind="news-detail"] main [data-news-reading="true"],
    html[data-understar-page-kind="activity-detail"] main > [data-activity-reading="true"] {
        width: 100% !important;
        max-width: 1360px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

@media (min-width: 2880px) {
    html[data-understar-page-kind="home"] main [data-home-news-row="true"],
    html[data-understar-page-kind="home"] main [data-home-news-content="true"],
    html[data-understar-page-kind="home"] main [data-news-main-grid="true"] {
        box-sizing: border-box !important;
        width: min(100%, 2640px) !important;
        max-width: 2640px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}