/*
 * 2.16.77 — Actual Outer-Canvas Width Breakout & Full Desktop Expansion
 *
 * Intent:
 * - CSS only. No DOM reconstruction, cloning, moving, or image reassignment.
 * - Preserve the recovered catalog structure and model-row proportions.
 * - Override restrictive WordPress/theme content-width ancestors on Home Catalog.
 * - Make the ACTUAL catalog canvas wider on desktop, centered in the viewport.
 * - Keep a symmetric safety gutter and prevent horizontal overflow.
 */

body.slc-hc-21677-page {
    overflow-x: clip !important;
}

body.slc-hc-21677-page main,
body.slc-hc-21677-page .wp-site-blocks,
body.slc-hc-21677-page .wp-block-post-content,
body.slc-hc-21677-page .entry-content,
body.slc-hc-21677-page .is-layout-constrained,
body.slc-hc-21677-page .is-layout-flow {
    box-sizing: border-box !important;
}

/* Remove theme max-width authority from the chain that contains the catalog.
   This does not alter header/footer internals; it permits the catalog host to
   establish its own viewport-relative width. */
body.slc-hc-21677-page .wp-block-post-content,
body.slc-hc-21677-page .entry-content {
    max-width: none !important;
    width: 100% !important;
}

/* Known recovered catalog host: this is the desktop width authority. */
body.slc-hc-21677-page #slc21617-rehost {
    box-sizing: border-box !important;
    width: min(1540px, calc(100vw - 96px)) !important;
    max-width: min(1540px, calc(100vw - 96px)) !important;
    min-width: 0 !important;

    /* Break out of a narrower centered parent without changing the DOM. */
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
}

/* Freeze the recovered content geometry inside the newly wider canvas. */
body.slc-hc-21677-page #slc21617-rehost > *,
body.slc-hc-21677-page #slc21617-rehost .slc21617-live-root {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Model rows and known geometry owners may consume the full effective canvas. */
body.slc-hc-21677-page #slc21617-rehost .slc21621-model,
body.slc-hc-21677-page #slc21617-rehost .slc21620-row,
body.slc-hc-21677-page #slc21617-rehost .slc21621-authoritative-grid,
body.slc-hc-21677-page #slc21617-rehost .slc-grid2,
body.slc-hc-21677-page #slc21617-rehost .slc21626-gallery {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Never distort catalog imagery. */
body.slc-hc-21677-page #slc21617-rehost img {
    max-width: 100% !important;
    height: auto !important;
}

/* Keep the Linden construction gallery on the recovered 3x2 desktop geometry. */
@media (min-width: 821px) {
    body.slc-hc-21677-page #slc21617-rehost .slc21626-gallery {
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Full desktop expansion. 1540px is intentionally below the earlier
   aggressive 1510 + displaced-parent failure mode because this host is now
   centered against the viewport itself rather than inheriting the narrow
   theme content boundary. */
@media (min-width: 1600px) {
    body.slc-hc-21677-page #slc21617-rehost {
        width: min(1540px, calc(100vw - 112px)) !important;
        max-width: min(1540px, calc(100vw - 112px)) !important;
    }
}

@media (min-width: 1900px) {
    body.slc-hc-21677-page #slc21617-rehost {
        width: min(1600px, calc(100vw - 128px)) !important;
        max-width: min(1600px, calc(100vw - 128px)) !important;
    }
}

/* Do not force desktop breakout behavior onto tablets/phones. */
@media (max-width: 820px) {
    body.slc-hc-21677-page #slc21617-rehost {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

@media (max-width: 520px) {
    body.slc-hc-21677-page #slc21617-rehost {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}