/*
 * Page Builder — minimal frontend layout CSS.
 *
 * The darealmop from-scratch theme (smart-headshop / smart-arcade) strips Magento's
 * default CSS, which INCLUDES Page Builder's frontend styles. Without them, PB content
 * (rows / columns) has no layout: `.pagebuilder-column-group` is `display:block`, so
 * columns stack full-width instead of sitting side by side. This ships the essential
 * PB layout rules so any PB document (e.g. the footer_content block that IS the footer)
 * renders correctly on the storefront. Mirrors Magento_PageBuilder
 * view/frontend/web/css/source/content-type/{row,column-group,column,html,...}.
 *
 * Scoped entirely to PB's own [data-content-type] / .pagebuilder-* markup, so it never
 * touches the theme's own elements. FPC-safe, no JS.
 */

[data-content-type='row'] {
    box-sizing: border-box;
}

[data-content-type='row'][data-appearance='contained'] {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--dm-content-max-width, 1440px);
}

[data-content-type='row'][data-appearance='contained'] > [data-element='inner'],
[data-content-type='row'][data-appearance='full-width'] > [data-element='inner'] {
    box-sizing: border-box;
}

.pagebuilder-column-group {
    display: flex;
}

.pagebuilder-column {
    box-sizing: border-box;
}

[data-content-type='html'],
[data-content-type='heading'],
div[data-content-type='text'] {
    word-wrap: break-word;
}

/* Stack columns on small screens, matching core Page Builder behaviour. */
@media (max-width: 768px) {
    .pagebuilder-column-group {
        flex-wrap: wrap;
    }

    .pagebuilder-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
        background-attachment: scroll !important;
    }
}