/* Every top-level content element owns the full viewport width. The element
   itself can therefore carry a background across the complete viewport, while
   its actual content stays aligned to the configured b2sme content grid. */
body.b2sme-theme main > .mod_article {
    --b2sme-element-gutter: max(1rem, calc((100vw - var(--b2sme-content)) / 2));
    overflow-x: clip;
}

body.b2sme-theme main > .mod_article > * {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-inline: var(--b2sme-element-gutter);
    box-sizing: border-box;
}

/* Native Contao forms are regular content, not full-bleed components. Keep
   the complete form, including its headline and submit button, on the same
   content grid as text and reader content. */
body.b2sme-theme main > .mod_article > :is(.content-form, .ce_form) {
    width: min(calc(100% - 2rem), var(--b2sme-content));
    max-width: var(--b2sme-content);
    margin-left: auto;
    margin-right: auto;
    padding-inline: 0;
}

body.b2sme-theme :is(.content-form, .ce_form) form {
    width: 100%;
    max-width: none;
}

body.b2sme-theme :is(.content-form, .ce_form) fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Components that already manage their own internal content grid must stay
   truly full-bleed at the outer level. */
body.b2sme-theme main > .mod_article > .content-b2sme-hero,
body.b2sme-theme main > .mod_article > .content-b2sme-teaser,
body.b2sme-theme main > .mod_article > .b2sme-splide,
body.b2sme-theme main > .mod_article > [class*="content-swiper"] {
    padding-inline: 0;
}

/* Normal hero and teaser variants keep their content on the standard grid. */
body.b2sme-theme .content-b2sme-hero > .b2sme-hero--split,
body.b2sme-theme .content-b2sme-hero > .b2sme-hero--centered,
body.b2sme-theme .content-b2sme-teaser > .b2sme-teaser:not(.b2sme-teaser--full-width) {
    width: min(calc(100% - 2rem), var(--b2sme-content));
    margin-inline: auto;
}

/* Cover heroes and full-width teasers stay full-bleed; only their actual
   content is constrained. */
body.b2sme-theme .content-b2sme-hero > .b2sme-hero--cover {
    width: 100%;
}

body.b2sme-theme .content-b2sme-hero > .b2sme-hero--cover .b2sme-hero__content {
    width: min(calc(100% - 2rem), var(--b2sme-content));
    margin-inline: auto;
}

/* Vertical inset now belongs to the outer element background. Structural
   b2sme components no longer add their own section padding on top of it. */
body.b2sme-theme main > .mod_article > [class*="content-b2sme-"] :is(
    .b2sme-hero,
    .b2sme-teaser,
    .b2sme-section,
    .b2sme-products,
    .b2sme-landing-content
) {
    padding-top: 0;
    padding-bottom: 0;
}

/* Optional element backgrounds. Padding is deliberately attached to the
   background class, so elements without a background do not gain extra space. */
body.b2sme-theme main > .mod_article > .b2sme-bg--soft,
body.b2sme-theme main > .mod_article > .b2sme-bg--primary,
body.b2sme-theme main > .mod_article > .b2sme-bg--secondary,
body.b2sme-theme main > .mod_article > .b2sme-bg--accent {
    padding-top: 70px;
    padding-bottom: 50px;
}

body.b2sme-theme .b2sme-bg--soft { background: var(--b2sme-surface-soft); }
body.b2sme-theme .b2sme-bg--primary { background: var(--b2sme-primary); }
body.b2sme-theme .b2sme-bg--secondary { background: var(--b2sme-secondary); }
body.b2sme-theme .b2sme-bg--accent { background: var(--b2sme-accent); }

body.b2sme-theme :is(.b2sme-bg--primary, .b2sme-bg--secondary),
body.b2sme-theme :is(.b2sme-bg--primary, .b2sme-bg--secondary) :is(h1, h2, h3, h4, h5, h6, p, li, span, strong) {
    color: #fff;
}

body.b2sme-theme :is(.b2sme-bg--primary, .b2sme-bg--secondary) a:not(.b2sme-button) {
    color: #fff;
}

body.b2sme-theme .b2sme-bg--accent,
body.b2sme-theme .b2sme-bg--accent :is(h1, h2, h3, h4, h5, h6, p, li, span, strong) {
    color: var(--b2sme-secondary);
}

@media (max-width: 48rem) {
    body.b2sme-theme main > .mod_article {
        --b2sme-element-gutter: 1rem;
    }

    body.b2sme-theme main > .mod_article > :is(.content-form, .ce_form) {
        width: calc(100% - 2rem);
    }
}