/* Shared fluid gutters and desktop width for page-content containers. */
@media screen {
    :root {
        --fo-container-gutter: 16px;
        --fo-container-max-width: 1328px;
        --responsive--alignwide-width: min(
            calc(100% - 2 * var(--fo-container-gutter)),
            var(--fo-container-max-width)
        );
    }

    /* Explicit page wrappers also cover template-local and legacy width rules.
       Keep cards, form panels, modals and full-width section backgrounds independent. */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .wrap,
    .fo-new-header__top,
    .fo-new-header__category-nav > ul,
    .fo-footer-container,
    .hero-inner,
    .recommended-columns,
    .podcast_1 .post_content,
    .sr-dashboard-box,
    .woocommerce-notices-wrapper,
    .woocommerce-shop .entry-content,
    body.single .site-main > .post,
    body.single .fowednesday,
    body.single .fofeatures,
    .single-publications .publication-single {
        box-sizing: border-box;
        width: calc(100% - 2 * var(--fo-container-gutter)) !important;
        max-width: var(--fo-container-max-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* The outer wrapper supplies the gutter once; nested wrappers fill it. */
    :is(
        .container, .container-fluid, .container-sm, .container-md,
        .container-lg, .container-xl, .container-xxl, .wrap,
        .fo-new-header__top, .fo-new-header__category-nav > ul,
        .fo-footer-container, .hero-inner, .recommended-columns,
        .podcast_1 .post_content, .sr-dashboard-box,
        .woocommerce-notices-wrapper, .woocommerce-shop .entry-content,
        body.single .site-main > .post, body.single .fowednesday,
        body.single .fofeatures, .single-publications .publication-single
    ) :is(
        .container, .container-fluid, .container-sm, .container-md,
        .container-lg, .container-xl, .container-xxl, .wrap,
        .fo-new-header__top, .fo-new-header__category-nav > ul,
        .fo-footer-container, .hero-inner, .recommended-columns,
        .podcast_1 .post_content, .sr-dashboard-box,
        .woocommerce-notices-wrapper, .woocommerce-shop .entry-content,
        body.single .site-main > .post, body.single .fowednesday,
        body.single .fofeatures, .single-publications .publication-single
    ) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media screen and (width >= 480px) {
    :root {
        --fo-container-gutter: 32px;
    }
}

@media screen and (width >= 768px) {
    :root {
        --fo-container-gutter: 56px;
    }
}

@media screen and (width > 1440px) {
    :root {
        --fo-container-gutter: 0px;
    }
}

/* Keep the outer wrapper wide for Explore More and recommendation grids.
   Only reading content is capped; the outer wrapper supplies the desktop gutters. */
@media screen and (min-width: 769px) {
    body:is(.fo-article-layout, .single-fowednesday, .single-fofeatures)
        .site-main > article > :not(.content-row),
    body:is(.fo-article-layout, .single-fowednesday, .single-fofeatures)
        .entry-content-right > :not(.fo-article-related, .fo-spotlight-section) {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Event details share the normal article reading width inside the fluid wrap. */
@media screen {
    body.single-events .single-fo-events > article {
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    body.single-events .single-fo-events > article > :is(
        .singlevents-fo-top, .post-thumbnail, .single-featuring-author,
        .entry-content-right
    ) {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width: 769px) {
    body.single-events .single-fo-events > article {
        max-width: 720px;
    }
}