/* Theme layout bridge for listing, residential board, and project detail pages.
   Keeps page-specific spacing in one place and avoids legacy scattered overrides. */

body.theme-layout-v2 {
    --theme-panel-bg: var(--surface);
    --theme-panel-border: var(--section-border);
}

/* Wider but controlled shells for project/listing/detail pages on large displays. */
body.theme-layout-v2.page-full-bleed,
body.theme-layout-v2.project-detail-page {
    --container-width: var(--layout-width-manager, clamp(1100px, 86vw, 1420px));
}

@media (min-width: 1600px) {
    body.theme-layout-v2.page-full-bleed,
    body.theme-layout-v2.project-detail-page {
        --container-width: min(1480px, calc(100vw - 5rem));
        --page-padding: clamp(1.25rem, 2vw, 2.75rem);
    }
}

@media (min-width: 1920px) {
    body.theme-layout-v2.page-full-bleed,
    body.theme-layout-v2.project-detail-page {
        --container-width: min(1680px, calc(100vw - 7rem));
        --page-padding: clamp(1.5rem, 2.2vw, 3rem);
    }
}

/* Full-width shell for listing/residential pages only on mobile/tablet. */
@media (max-width: 900px) {
    body.theme-layout-v2.page-full-bleed {
        --page-shell-width: 100%;
        --page-padding: 0;
        --page-padding-wide: 0;
    }
}

/* Project detail mobile gutter: one clear side gap layer only. */
@media (max-width: 900px) {
    body.theme-layout-v2.project-detail-page {
        --project-mobile-gutter: clamp(18px, 5vw, 26px);
    }

    body.theme-layout-v2.project-detail-page main {
        width: 100%;
        max-width: 100%;
        padding-inline: var(--project-mobile-gutter);
        box-sizing: border-box;
    }

    body.theme-layout-v2.project-detail-page .container,
    body.theme-layout-v2.project-detail-page .content-layout,
    body.theme-layout-v2.project-detail-page .headbar-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding-inline: 0;
        box-sizing: border-box;
    }

    body.theme-layout-v2.project-detail-page .hero-media-panel {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}