/* Row — frontend + editor shared structural styles. Visual styles come from
 * generated per-block CSS in render.php. Keep this file lightweight. */

.wp-block-boldpost-layout-row {
    display: flex;
    flex-direction: row;
    flex-wrap: inherit;
    gap: 20px;
    /* Mirror the gap default for the calc() in column widths. If we don't set this,
     * an empty `gap` attribute lets --bp-gap fall back to 0 while the actual rendered
     * gap is still 20px — causing columns to overflow the row and wrap. */
    --bp-gap: 20px;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;

    .boldpo-layout-row__inner {
        display: flex;
        flex-wrap: inherit;
        flex-direction: inherit;
        gap: inherit;
        align-items: inherit;
        justify-content: inherit;
        align-content: inherit;
        width: 100%;
        box-sizing: border-box;
    }

    &.is-content-boxed > .boldpo-layout-row__inner {
        max-width: var(--boldpo-layout-row-max-width, 1200px);
        margin-left: auto;
        margin-right: auto;
    }

    &.is-content-full > .boldpo-layout-row__inner {
        max-width: none;
    }

    &.is-equal-height > .boldpo-layout-row__inner > .boldpo-column {
        display: flex;
        flex-direction: column;
    }

    &.is-stretch > .boldpo-layout-row__inner > .boldpo-column {
        align-self: stretch;
    }

    &.is-valign-top > .boldpo-layout-row__inner    { align-items: flex-start; }
    &.is-valign-middle > .boldpo-layout-row__inner { align-items: center; }
    &.is-valign-bottom > .boldpo-layout-row__inner { align-items: flex-end; }
}

@media (max-width: 767px) {
    .boldpo-layout-row > .boldpo-layout-row__inner > .boldpo-column {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}