/**
 * JS Hero.
 *
 * The above-the-fold block: eyebrow, heading, description, CTA buttons and an
 * optional image. Two layouts off one markup tree — Split (copy beside the
 * image) and Stacked (copy above it) — so the widget covers both hero shapes
 * without a second template.
 *
 * The copy always comes first in the DOM. "Image Side: Left" reorders visually
 * with `order`, so the heading stays the first thing a screen reader or a
 * crawler meets whichever side the picture sits on.
 *
 * The button look is not defined here: the CTAs are the shared element from
 * JS_CTA_Trait and are styled by js-cta-button.css, which the widget pulls in
 * alongside this file.
 *
 * No outer padding is baked in — the Elementor container owns the gutters,
 * consistent with the Nav, Carousel and Footer Bottom.
 */

/* Fill the container even inside a flex parent that would shrink to content. */
.elementor-widget-js_hero {
	width: 100%;
}

.js-hero {
	--js-hero-gap: 64px;
	--js-hero-media-width: 45%;
	--js-hero-buttons-gap: 16px;

	display: flex;
	align-items: center;
	gap: var(--js-hero-gap);
	width: 100%;
	font-family: "Inter", sans-serif;
	box-sizing: border-box;
}

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

/* -------- Content column -------- */
.js-hero__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* Body Sm Semibold, uppercase — the label above the headline. It shares the
   brand highlight token with the heading's highlighted phrase, so the widget's
   Highlight Colour control moves both together unless the eyebrow is given a
   colour of its own. */
.js-hero__eyebrow {
	margin: 0 0 16px;
	color: var(--js-color-highlight, #b28b2c);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Display Md (48/56, 600, letter-spacing -0.5) from the design's type scale,
   stepping down to H1 (36/48) below the tablet breakpoint. */
.js-hero__heading {
	margin: 0 0 24px;
	color: var(--js-color-primary, #111827);
	font-size: var(--js-font-display-md-size, 48px);
	font-weight: var(--js-font-weight-semibold, 600);
	line-height: var(--js-font-display-md-line, 56px);
	letter-spacing: -0.5px;
}

.js-hero__description {
	margin: 0 0 32px;
	max-width: 560px;
	color: var(--js-color-text, #475569);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
}

.js-hero__description p {
	margin: 0;
}

.js-hero__description p + p {
	margin-top: 0.75em;
}

/* -------- Buttons -------- */
.js-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--js-hero-buttons-gap);
}

/* -------- Media column -------- */
.js-hero__media {
	flex: 0 0 var(--js-hero-media-width);
	max-width: var(--js-hero-media-width);
	min-width: 0;
}

.js-hero__image {
	display: block;
	width: 100%;
	height: auto;
}

/* -------- Layout: split -------- */
.js-hero--split {
	flex-direction: row;
}

/* Visual-only reorder: the copy keeps its place in the document. */
.js-hero--media-left .js-hero__media {
	order: -1;
}

/* -------- Layout: stacked -------- */
.js-hero--stacked {
	flex-direction: column;
	align-items: stretch;
}

.js-hero--stacked .js-hero__media {
	flex: 0 0 auto;
	max-width: 100%;
	width: 100%;
}

/* With no image the content column has the row to itself. */
.js-hero--no-media .js-hero__content {
	flex: 1 1 100%;
}

/* -------- Alignment -------- */
.js-hero--align-left .js-hero__content {
	align-items: flex-start;
	text-align: left;
}

.js-hero--align-center .js-hero__content {
	align-items: center;
	margin-inline: auto;
	text-align: center;
}

.js-hero--align-center .js-hero__description {
	margin-inline: auto;
}

.js-hero--align-center .js-hero__actions {
	justify-content: center;
}

.js-hero--align-center .js-hero__media {
	margin-inline: auto;
}

/* -------- Responsive -------- */

/* Below the tablet breakpoint a split hero has no room for two columns:
   stack it, image last, and let both columns run the full width. */
@media (max-width: 1024px) {
	.js-hero--split {
		flex-direction: column;
		align-items: stretch;
	}

	.js-hero--split .js-hero__media {
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
		order: 0;
	}
}

@media (max-width: 767px) {
	.js-hero {
		--js-hero-gap: 32px;
	}

	.js-hero__heading {
		font-size: var(--js-font-h1-size, 36px);
		line-height: var(--js-font-h1-line, 48px);
	}

	/* Full-width stacked buttons on mobile (opt-out via the widget control).
	   align-self is what makes it full width: the content column aligns its
	   children to the start (or centre), so the actions row would otherwise
	   shrink to the buttons and "100%" would mean 100% of nothing. */
	.js-hero--buttons-block-mobile .js-hero__actions {
		align-self: stretch;
		flex-direction: column;
		align-items: stretch;
	}

	.js-hero--buttons-block-mobile .js-hero__button {
		width: 100%;
		justify-content: center;
	}
}