/* -------------------------------------------------------------
 * Hero Section widget
 * Layout defaults only – colors/spacing are controlled from Elementor.
 * ---------------------------------------------------------- */

.hero-widget {
	width: 100%;
	padding: 32px 120px;
}

.hero-widget__inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 40px;
}

/* Image column: width is set by the "Image Column Width" control. */
.hero-widget__media {
	flex: 0 0 auto;
	width: 50%;
	max-width: 100%;
}

.hero-widget__media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Content column takes whatever is left. */
.hero-widget__content {
	flex: 1 1 0%;
	min-width: 0;
}

/* When stacked (flex-direction: column/column-reverse) both columns go full width. */
.hero-widget__inner[style*="flex-direction: column"] .hero-widget__media,
.hero-widget__inner[style*="flex-direction:column"] .hero-widget__media {
	width: 100%;
}

/* No image selected – content spans the full width. */
.hero-widget__inner--no-image .hero-widget__content {
	flex: 0 0 100%;
	width: 100%;
}

.hero-widget__title {
	margin: 0 0 16px;
	max-width: ;
}

.hero-widget__description {
	margin: 0 0 28px;
}

.hero-widget__description > *:last-child {
	margin-bottom: 0;
}

.hero-widget .hero-widget__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background-color: #2563eb;
	color: #ffffff;
	line-height: 1.2;
	text-decoration: none;
	border: none;
	border-radius: 4px;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.hero-widget .hero-widget__button:hover,
.hero-widget .hero-widget__button:focus {
	background-color: #1d4ed8;
	color: #ffffff;
	text-decoration: none;
}

.hero-widget__button-icon {
	display: inline-flex;
	align-items: center;
}

.hero-widget__button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Safety net: stack on small screens even if no mobile value was set. */
@media (max-width: 767px) {
	.hero-widget__inner {
		flex-wrap: wrap;
	}
	.hero-widget {
		width: 100%;
		padding: 24px 16px;
	}
}