/**
 * Layout for the plugin-registered PTSA page templates.
 *
 * ChromeNews caps .container-wrapper at 1280px. Catch Box caps #page.site at
 * 1000px (740px in one-column) and .entry-content at 660px — that is the
 * grey-gutter squash on lwptsa.net/calendar. These rules widen both themes.
 */

body.ptsa-template #content.container-wrapper {
    max-width: min(1680px, calc(100vw - 96px));
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* Catch Box: #page.site is the centered column (not .container-wrapper). */
body.ptsa-template #page.site,
body.ptsa-template.one-column #page.site,
body.ptsa-template.no-sidebar #page.site,
body.ptsa-template.one-column.no-sidebar #page.site {
    width: min(1680px, calc(100vw - 48px));
    max-width: none;
}

/* Catch Box #main is content-box with 30px padding. width:100% without
 * border-box makes the grey bar and inner column wider than #branding. */
body.ptsa-template #page.site,
body.ptsa-template #page > #main,
body.ptsa-template #primary,
body.ptsa-template #content,
body.ptsa-template #main.site-main {
    box-sizing: border-box;
}

/* width:auto fills the padded content box. width:100% + theme padding
 * overflows to the right only (left stays flush with the nav). */
body.ptsa-template #page > #main.clearfix,
body.ptsa-template #page > #main #primary,
body.ptsa-template #page > #main #content,
body.ptsa-template #main.site-main {
    width: auto;
    max-width: 100%;
    float: none;
}

body.ptsa-template .entry-header,
body.ptsa-template .entry-content,
body.ptsa-template .entry-content-wrap,
body.ptsa-template .entry-summary,
body.ptsa-template .hentry,
body.ptsa-template.no-sidebar .entry-header,
body.ptsa-template.no-sidebar .entry-content,
body.ptsa-template.no-sidebar .entry-summary,
body.ptsa-template.no-sidebar .hentry {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

body.ptsa-template .azure-calendar-container {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

body.ptsa-template #main.site-main {
    padding: 28px 12px 40px;
    box-sizing: border-box;
}

body.ptsa-template-full-width #primary,
body.full-width-content.ptsa-template-full-width #primary {
    width: auto;
    max-width: 100%;
    float: none;
    padding: 0;
    margin-bottom: 20px;
}

/* ChromeNews "boxed" content mode is for articles: it centers
 * .entry-content at 670px. That leaves the exec board grid and org
 * chart as a skinny island in the middle of this wider template. */
body.ptsa-template.page.single-content-mode-boxed main.site-main :is(.entry-content, .entry-header, .entry-footer),
body.ptsa-template.page.single-content-mode-boxed.full-width-content main.site-main :is(.entry-content, .entry-header, .entry-footer) {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* The /ptsa org-chart shortcode still carries width="1000px". Beat
 * that inline max-width so the D3 chart can measure the real column. */
body.ptsa-template .pta-org-chart-container {
    max-width: none !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ptsa-template .pta-leadership-structure,
body.ptsa-template .pta-roles-directory {
    max-width: none;
    width: 100%;
}

body.ptsa-template-sidebar .ptsa-sidebar-row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

body.ptsa-template-sidebar.full-width-content #primary,
body.ptsa-template-sidebar #primary {
    width: auto;
    flex: 1 1 0;
    float: none;
    padding: 0;
    margin-bottom: 0;
    min-width: 0;
}

body.ptsa-template-sidebar #secondary {
    flex: 0 0 300px;
    width: 300px;
    max-width: 32%;
    float: none;
    display: block;
    padding-left: 0;
}

@media (max-width: 900px) {
    body.ptsa-template #content.container-wrapper {
        max-width: calc(100vw - 32px);
        padding-left: 16px;
        padding-right: 16px;
    }

    body.ptsa-template #page.site,
    body.ptsa-template.one-column #page.site,
    body.ptsa-template.one-column.no-sidebar #page.site {
        width: calc(100vw - 24px);
    }

    body.ptsa-template-sidebar .ptsa-sidebar-row {
        flex-direction: column;
    }

    body.ptsa-template-sidebar #secondary {
        width: 100%;
        max-width: none;
        flex-basis: auto;
    }
}