/**
 * IES Landing Page Hero — nested two-column shell.
 * Background presets + teal flare mirror Content + Icon Cards controls.
 */

/*
 * Elementor always wraps widgets in a Container (and sometimes a second one).
 * Neutralize those wrappers so the hero background can go edge-to-edge.
 */
.e-con:has( > .e-con-inner > .elementor-element.elementor-widget-ies-landing-page-hero ),
.e-con:has( > .e-con-inner > .e-con > .e-con-inner > .elementor-element.elementor-widget-ies-landing-page-hero ),
.elementor-element.elementor-widget-ies-landing-page-hero {
	--padding-top: 0px !important;
	--padding-right: 0px !important;
	--padding-bottom: 0px !important;
	--padding-left: 0px !important;
	--margin-top: 0px !important;
	--margin-right: 0px !important;
	--margin-bottom: 0px !important;
	--margin-left: 0px !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

.e-con:has( > .e-con-inner > .elementor-element.elementor-widget-ies-landing-page-hero ) > .e-con-inner,
.e-con:has( > .e-con-inner > .e-con > .e-con-inner > .elementor-element.elementor-widget-ies-landing-page-hero ) > .e-con-inner,
.e-con:has( > .e-con-inner > .e-con > .e-con-inner > .elementor-element.elementor-widget-ies-landing-page-hero )
	> .e-con-inner
	> .e-con
	> .e-con-inner {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	gap: 0 !important;
}

.elementor-widget-ies-landing-page-hero > .elementor-widget-container {
	padding: 0 !important;
	max-width: 100%;
}

.ies-lp-hero {
	position: relative;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	color: var(--ies-white, #fff);
	/*
	 * Lock horizontal gutters to the site system (homepage Elementor boxed
	 * containers use 30px). Vertical padding stays on the Elementor control.
	 */
	padding-left: var(--ies-site-gutter, 30px) !important;
	padding-right: var(--ies-site-gutter, 30px) !important;
}

.ies-lp-hero *,
.ies-lp-hero *::before,
.ies-lp-hero *::after {
	box-sizing: border-box;
}

/* Background layouts (Content tab → Background layout) */
.ies-lp-hero--bg-gradient {
	background: var(--purples-grad, linear-gradient(89deg, #4d4285 0%, #5d43de 70%, #a4a2e6 100%));
}

.ies-lp-hero--bg-custom {
	/* Color comes from the Background color control selector */
	background-color: #4d4285;
}

.ies-lp-hero--bg-none {
	background: transparent;
	color: var(--ies-navy, #11294b);
}

/* Shared .teal-flare (theme style.css) paints ::after — keep content above it */
.ies-lp-hero.teal-flare > .ies-lp-hero__inner,
.ies-lp-hero.teal-flare > .ies-lp-hero__column-labels {
	position: relative;
	z-index: 1;
}

.ies-lp-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--ies-site-max-width, 1280px);
	margin: 0 auto;
	/* Same content width token as Elementor --container-max-width */
}

.ies-lp-hero__columns {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
	align-items: start;
	gap: 80px;
	width: 100%;
}

/* Child containers (nested drop zones) */
.ies-lp-hero__columns > .e-con,
.ies-lp-hero__col {
	min-width: 0;
	width: 100%;
}

/*
 * Kill Elementor kit/container default padding (often 10px) on drop columns
 * so left content aligns with the site gutter / logo.
 */
.ies-lp-hero__columns > .e-con,
.ies-lp-hero__col {
	--padding-top: 0px !important;
	--padding-right: 0px !important;
	--padding-bottom: 0px !important;
	--padding-left: 0px !important;
}

.ies-lp-hero__columns > .e-con:first-child,
.ies-lp-hero__col--left {
	padding: 0 !important;
}

.ies-lp-hero__columns > .e-con > .e-con-inner,
.ies-lp-hero__col > .e-con-inner {
	--padding-top: 0px !important;
	--padding-right: 0px !important;
	--padding-bottom: 0px !important;
	--padding-left: 0px !important;
	padding: 0 !important;
}

/*
 * Left column: light type on gradient / custom dark backgrounds.
 *
 * :where() keeps these as defaults (enough to beat theme heading/body
 * colors) without outranking Elementor widget Style-tab selectors, so
 * Heading / Icon List / Text Editor colors can still be changed in the editor.
 */
.ies-lp-hero:not(.ies-lp-hero--bg-none) :where(
	.ies-lp-hero__columns > .e-con:first-child,
	.ies-lp-hero__col--left
) {
	color: var(--ies-white, #fff);
}

.ies-lp-hero:not(.ies-lp-hero--bg-none) :where(
	.ies-lp-hero__columns > .e-con:first-child,
	.ies-lp-hero__col--left
) :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
	font-family: var(--ies-font-display, Onest, sans-serif);
}

.ies-lp-hero:not(.ies-lp-hero--bg-none) :where(
	.ies-lp-hero__columns > .e-con:first-child,
	.ies-lp-hero__col--left
) :where(p, li, span, i) {
	color: inherit;
}

.ies-lp-hero:not(.ies-lp-hero--bg-none) :where(
	.ies-lp-hero__columns > .e-con:first-child,
	.ies-lp-hero__col--left
) :where(a:not(.ies-btn):not(.elementor-button)) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Editor: keep empty drop zones usable */
.elementor-editor-active .ies-lp-hero__columns > .e-con {
	min-height: 120px;
}

@media (max-width: 1024px) {
	.ies-lp-hero__columns {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 767px) {
	.ies-lp-hero {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}