/*
 * Magekit_CmsEngine — "Container" layout content type.
 *
 * Loaded on both the storefront and the admin PageBuilder stage so the editor
 * sees what the storefront renders. Shared from view/base so both areas resolve
 * the same file.
 *
 * The container stacks its children (typically Rows) in a flex column; the gap
 * between them is set as the `--magekit-row-gap` custom property on the inner
 * flex element (by the row-gap style converter) and applied here. Preset sizes
 * resolve to the tokens below; brands override these variables in their theme to
 * re-scale the spacing (and the boxed width) without touching this module. The
 * "md" default is 48px, matching the Figma spacing between page sections.
 */
:root {
    --magekit-row-gap-xs: 1rem;     /* 16px */
    --magekit-row-gap-sm: 1.5rem;   /* 24px */
    --magekit-row-gap-md: 3rem;     /* 48px — default */
    --magekit-row-gap-lg: 4rem;     /* 64px */
    --magekit-row-gap-xl: 6rem;     /* 96px */

    /* Max content width of the "Boxed" appearance. */
    --magekit-container-width: 90rem; /* 1440px */
}

/*
 * The flex stack that holds the children. The container element's inline style
 * (set by the content type) already provides `display: flex; flex-direction:
 * column` plus the `--magekit-row-gap` custom property; these declarations are a
 * safety net so the layout holds even if the inline style is absent in some
 * context (e.g. older saved markup).
 *
 * In the admin stage the same wrapper also carries the `.element-children` class.
 */
.magekit-container-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--magekit-row-gap, 0px);
}

/* The children (Rows) always fill the container width; never shrink them. */
.magekit-container-inner > * {
    width: 100%;
    max-width: 100%;
}

/*
 * Boxed appearance: constrain the content to a centered max width. Full width is
 * the default flow (no max width), so it needs no rule. The selector matches both
 * the storefront master markup (inner is a direct child) and the admin stage
 * (the children wrapper is nested), hence the descendant combinator.
 */
[data-content-type="magekit_container"][data-appearance="boxed"] .magekit-container-inner {
    max-width: var(--magekit-container-width);
    margin-inline: auto;
    width: 100%;
}

/*
 * Admin stage only: render "Boxed" at full width so the editor has room to work
 * with the Rows inside (the centered max-width is a storefront presentation
 * detail, and at the wide stage it otherwise shrinks the nested Rows). The
 * storefront, which has no `.pagebuilder-stage` ancestor, keeps the boxed width.
 */
.pagebuilder-stage [data-content-type="magekit_container"][data-appearance="boxed"] .magekit-container-inner {
    max-width: none;
}

/*
 * Admin stage only: make each child content-type wrapper fill the container, so
 * nested Rows render at the container's full width instead of their intrinsic
 * (shrunk) size.
 */
.pagebuilder-stage .magekit-container .element-children > .pagebuilder-content-type-wrapper {
    width: 100%;
}