/**
 * Hero Section — structural styles.
 * Content-only widget — no background/overlay here by design. Place it
 * inside an Elementor Section/Container and use Elementor's own native
 * Background + Background Overlay controls for the image/overlay.
 *
 * Colors, padding, min-height, alignment, and typography are all controlled
 * dynamically via Elementor's generated CSS (see 'selectors' in the widget
 * PHP) — this file only handles layout that doesn't change per-instance.
 */

.tdb-hero-wrap {
	position: relative;
	width: 100%;
	min-height: 480px; /* fallback if the control isn't set */
	display: flex;
}

.tdb-hero-content {
	position: relative;
	width: 100%;
	display: flex;
	padding: 96px 24px; /* fallback */
	box-sizing: border-box;
}

.tdb-hero-inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 680px; /* fallback */
	width: 100%;
}

.tdb-hero-heading {
	margin: 0 !important;
	color: #36b679; /* fallback if no color control is set */
	text-wrap: balance;
	font-size: 56px; /* beats theme's bare `h1{font-size:2.5rem}` via class specificity */
	font-weight: 800 !important;
	/* font-weight forced with !important because Elementor's Global
	   Typography link emits its own font-weight via a CSS variable
	   (var(--e-global-typography-primary-font-weight)) at higher
	   specificity than a plain class rule — !important is required to
	   reliably win regardless of what that global preset's weight is set
	   to. font-family still comes from the Heading Typography control. */
}

@media (max-width: 1024px) {
	.tdb-hero-heading { font-size: 40px; }
}
@media (max-width: 767px) {
	.tdb-hero-heading { font-size: 30px; }
}

.tdb-hero-desc,
.tdb-hero-desc p {
	color: rgba(255,255,255,0.92); /* fallback if no color control is set */
	font-size: 18px;
	/* same reasoning as above — explicit fallback beats theme defaults */
}

@media (max-width: 767px) {
	.tdb-hero-desc,
	.tdb-hero-desc p { font-size: 16px; }
}

.tdb-hero-desc p { margin: 0 0 14px !important; }
.tdb-hero-desc p:last-child { margin-bottom: 0 !important; }

/* Side padding fallback tightens on small screens even if the user
   hasn't customized the responsive padding controls */
@media (max-width: 767px) {
	.tdb-hero-content { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 480px) {
	.tdb-hero-content { padding-left: 16px; padding-right: 16px; }
}