/**
 * Elementor legacy section/column grid — compatibility shim.
 *
 * WHY THIS FILE EXISTS
 * The Energia theme + "Elementor Theme Core" plugin render Elementor sections
 * using the legacy DOM structure:
 *     .elementor-section > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap
 * The theme's own CSS (theme.css) styles .elementor-row / .elementor-column-wrap
 * (flex-wrap, justify-content, column widths) but relies on Elementor CORE to
 * provide the base `display:flex` on those wrappers.
 *
 * Newer Elementor (the site moved from 3.7.4 to 3.35.x) dropped the legacy
 * `.elementor-row` and `.elementor-column-wrap` rules from frontend.css because
 * modern Elementor makes columns direct flex children of .elementor-container and
 * no longer emits those wrappers. Result: every row fell back to display:block,
 * columns collapsed, and page content wrapped one character per line.
 *
 * This file restores ONLY the base grid rules Elementor removed. It does not set
 * flex-wrap / justify-content so the theme's own layout rules keep winning.
 * Remove this file if the site is ever migrated to Elementor Flexbox Containers.
 */

/* Base grid: make the legacy wrappers flex containers again. */
.elementor-row {
    width: 100%;
    display: flex;
}

.elementor-column-wrap {
    width: 100%;
    position: relative;
    display: flex;
}

.elementor-column {
    position: relative;
    min-height: 1px;
}

/* Column gap padding (legacy path is via .elementor-row, which modern core no longer targets). */
.elementor-column-gap-narrow > .elementor-row > .elementor-column > .elementor-element-populated {
    padding: 5px;
}

.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
    padding: 10px;
}

.elementor-column-gap-extended > .elementor-row > .elementor-column > .elementor-element-populated {
    padding: 15px;
}

.elementor-column-gap-wide > .elementor-row > .elementor-column > .elementor-element-populated {
    padding: 20px;
}

.elementor-column-gap-wider > .elementor-row > .elementor-column > .elementor-element-populated {
    padding: 30px;
}

/* Mobile: allow columns to stack. Elementor writes per-column responsive widths
   (width:100%) into the generated post CSS; without wrap the 100%-wide flex items
   would shrink side-by-side instead of stacking. */
@media (max-width: 767px) {
    .elementor-row {
        flex-wrap: wrap;
    }
}