/* ==========================================================================
   Elementor Free compatibility overrides.
   Only loaded when Elementor is active. When a section is converted via
   inc/elementor-seed.php, Elementor renders its own wrapper markup
   (.elementor-container / .elementor-column) in place of the theme's
   original layout div (e.g. .sap-hero__inner) — the theme's CSS class is
   reapplied to the *section itself* (e.g. .sap-hero), but there is no
   equivalent hook to rename Elementor's own inner wrapper divs. These
   rules re-target Elementor's actual wrapper elements with the theme's
   original layout rules, so the visual result stays the same even
   though the DOM node they're attached to is Elementor's, not the
   theme's original hand-authored div.
   Add one block here per section as it gets converted — do not remove
   the section's original CSS elsewhere; both can coexist since this
   file only matches `.elementor-container`/`.elementor-column`, which
   only exist on converted sections.
   ========================================================================== */

/* ---- Homepage Hero ---- */
.sap-hero .elementor-container {
	max-width: var(--sap-container);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 3rem;
	align-items: center;
}

.sap-hero .elementor-column.elementor-col-50 {
	width: auto;
	max-width: none;
}

@media (max-width: 1024px) {
	.sap-hero .elementor-container {
		grid-template-columns: 1fr;
		text-align: center;
	}
}