/*
 * SECTION:  Hero (home page)
 * File:     assets/css/sections/sol-hero.css
 * Used by:  Elementor container with CSS class "sol-hero" (home page template)
 * To remove: delete this file and its line in inc/assets.php (handle "sol-hero").
 */
/*
 * Background (gradient, color or image) is NOT set here. Set it in
 * Elementor: select the hero container > Style > Background.
 * Structure expected in the template:
 *   container.sol-hero
 *     container.sol-hero__text   heading, text, buttons
 *     container.sol-hero__media  image widget
 */

.e-con.sol-hero {
	padding: clamp(32px, 6vw, 72px) var(--sol-gutter);
	color: #F1EDE3;
}

.sol-hero > .e-con-inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
	max-width: calc(var(--sol-container) - var(--sol-gutter) * 2);
	margin-inline: auto;
}

.e-con.sol-hero__text {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	gap: 12px;
}

.sol-hero__text > .elementor-widget-heading,
.sol-hero__text > .elementor-widget-text-editor {
	flex: 0 0 100%;
}

.e-con.sol-hero .elementor-widget {
	margin-block-end: 0;
}

/* Hero text stays light in both themes: the hero background is dark. */
.sol-hero .elementor-widget-heading .elementor-heading-title {
	color: #F1EDE3 !important;
	font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.25rem);
}

.sol-hero .elementor-heading-title em {
	color: var(--sol-accent);
}

.sol-hero .elementor-widget-text-editor {
	max-width: 46ch;
	color: #cfc8b8;
	font-size: var(--sol-text-lg);
}

.sol-hero .sol-btn-wrap--ghost .elementor-button {
	color: #F1EDE3;
}

.e-con.sol-hero__media {
	align-items: center;
	justify-content: center;
}

.sol-hero__media img {
	width: auto;
	max-width: 100%;
	max-height: 240px;
}

@media (min-width: 860px) {
	.sol-hero > .e-con-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
	}

	.e-con.sol-hero__text {
		flex: 1 1 52%;
	}

	.e-con.sol-hero__media {
		flex: 1 1 40%;
	}

	.sol-hero__media img {
		max-height: 420px;
	}
}