/* ============================================================
   HERO SECTION — .hero
   Figma source: node 52:373  (content frame)
                 node 52:371  (full section with bg image)
   ============================================================ */

/* ----------------------------------------------------------
   Base (mobile-first)
---------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	height: 90vh;
	min-height: 450px;
	max-height: 850px;
	overflow: hidden;
	background-color: var(--color-dark); /* fallback while image loads */
}

/* Background image — set via inline CSS custom property --hero-bg */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--hero-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: brightness(0.75) saturate(0.6);
	z-index: 0;
}

/* Visually hidden <img> for SEO/accessibility alt text */
.hero__bg-img {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Dark overlay — multiply blend
---------------------------------------------------------- */

.hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-dark);   /* #111820 — deep navy (not pure black, so multiply has range) */
	opacity: 0.55;
	mix-blend-mode: multiply;
	z-index: 1;
}

/* Inner content
---------------------------------------------------------- */

.hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);         /* 24px — Figma confirmed itemSpacing */
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--space-10);
	padding-inline: var(--container-pad);
}

/* Eyebrow badge
   Figma: bg --color-primary, white, 15px Bold 700, UPPERCASE, radius 8px, pad 8/16px
---------------------------------------------------------- */

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	background: var(--color-primary);
	color: var(--color-text-light);
	font-size: 0.875rem;               /* 14px */
	font-weight: var(--weight-bold);   /* 700  — Figma confirmed */
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	line-height: 1;
	padding: var(--space-2) var(--space-4); /* 8/16px — Figma confirmed */
	border-radius: var(--radius-lg);        /* 8px   — Figma confirmed */
	margin: 0;
}

/* Hero title
   Figma: white, 105px, Bold 700, lineHeight 126px
---------------------------------------------------------- */

.hero__title {
	font-size: clamp( 2.5rem, 6vw, 6rem ); /* 40px → 96px */
	font-weight: var(--weight-bold);   /* 700 — Figma confirmed */
	color: var(--color-text-light);
	line-height: 1.2;                  /* 126/105 = 1.2 — Figma confirmed */
	margin: 0;
	max-width: 12ch;
}

/* Hero description
   Figma: white, 24px, Regular 400, lineHeight 38px
---------------------------------------------------------- */

.hero__description {
	font-size: clamp( var(--size-base), 2vw, var(--size-lg) ); /* 16px → 24px */
	font-weight: var(--weight-regular); /* 400 — Figma confirmed */
	color: var(--color-text-light);
	line-height: 1.45;
	margin: 0;
	max-width: 70%;
}

/* CTA button — hero variant
   Figma: bg --color-primary-dark, white, 16px Medium 500, pad 8/40px, radius 8px, h 56px
---------------------------------------------------------- */

.btn--hero {
	background: var(--color-primary-dark);  /* #A30513 — Figma confirmed */
	font-size: var(--size-base);            /* 16px    — Figma confirmed */
	font-weight: var(--weight-medium);      /* 500     — Figma confirmed */
	padding: var(--space-2) var(--space-7); /* 8/40px  — Figma confirmed */
	min-height: 56px;                       /* 56px    — Figma confirmed */
	display: inline-flex;
	align-items: center;
}

.btn--hero:hover,
.btn--hero:focus-visible {
	background: var(--color-primary);
}

/* ----------------------------------------------------------
   Desktop (≥ 992px)
---------------------------------------------------------- */

/* Accent span — last line of title ("Made Simple.")
   Figma: --color-primary-tint (#FFDAD6)
---------------------------------------------------------- */

.hero__title-accent {
	color: var(--color-primary-tint);
}

@media (max-width: 767px) {

	.hero__description {
		max-width: 100%;
	}

}

@media (min-width: 992px) {

	.hero {
		height: 90vh;
	}

	.hero__inner {
		padding-block: var(--space-12); /* generous desktop breathing room */
	}

}