/**
 * Component: Hero Banner — styles
 * Scoped to .hero-banner (BEM root). No global/site-wide selectors.
 * Site-wide tokens consumed from style.css :root via var(--*).
 *
 * Structure: full-bleed dark section — CSS background photo + gradient overlay →
 * centered content column (H1 + subhead + waitlist form) → decorative UI-strip image.
 *
 * --hero-bg-url is injected as an inline CSS custom property by hero_banner.php
 * (value: url('...')) so PHP owns the URL resolution and CSS owns the background layer.
 */

/* ── Component-local custom properties ──────────────────────── */
/* Gradient is kept as a local var so it can be read in one place
   and referenced in the multi-layer background-image shorthand. */
.hero-banner {
	--hero-bg-gradient: linear-gradient(to bottom, transparent 40%, var(--color-bg) 95%);
}

/* ── Section root ────────────────────────────────────────────── */
.hero-banner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	padding-block-end: 4rem;
	isolation: isolate;

	/* Dark base — the ocean image sits on top at 20 % opacity (see ::before). */
	background-color: var(--color-bg);
}

/* ── Ocean photo at 20 % opacity (Figma: image fill opacity = 20 %) ──
   --hero-bg-url is injected inline by hero_banner.php as url('…').
   Sits above the dark base and below the gradient fade (::after). */
.hero-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--hero-bg-url);
	background-size: 105.776% 129.222%;
	background-position: -41.588px -152.66px;
	background-repeat: no-repeat;
	opacity: 0.2;
	pointer-events: none;
	z-index: 0;
}

/* ── Gradient fade (transparent → dark, bottom 60 % of section) ──
   Sits above the ocean image so it properly fades the photo into
   the section background rather than the page base colour. */
.hero-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--hero-bg-gradient);
	pointer-events: none;
	z-index: 1;
}

/* ── Inner container (1440 px centred; edge elements anchor here) ── */
.hero-banner__inner {
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
	position: relative;
	z-index: 2; /* above ::before (image) and ::after (gradient) */
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Content column ──────────────────────────────────────────── */
.hero-banner__content {
	max-width: 820px;
	width: 100%;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* No desktop padding-inline — 820px column is already narrow inside the 1440px container.
	   Side breathing room is added only at tablet/mobile breakpoints below where the viewport
	   is narrower than 820px and padding would otherwise let content touch viewport edges. */
	padding-block-start: clamp(6rem, 18vw, 17rem);
	/* Gap between content block and UI strip. */
	padding-block-end: clamp(4rem, 11.7vw, 10.5rem);
}

/* ── H1 title ────────────────────────────────────────────────── */
.hero-banner .hero-banner__title {
	font-family: var(--font-title);
	font-size: 60px;       /* no --text-* token covers 60 px — literal per spec */
	font-weight: 600;      /* SemiBold — Figma spec; base theme default is 700 */
	line-height: 1.2;
	letter-spacing: -2px;  /* no letter-spacing token — literal per spec */
	color: var(--color-text-pri);
	margin: 0;
	margin-block-end: var(--space-md); /* 0.75 rem ≈ 12 px H1 → subhead gap */
}

/* ── Subhead paragraph ───────────────────────────────────────── */
.hero-banner .hero-banner__subhead {
	font-family: var(--font-body);
	font-size: 20px;       /* no --text-* token covers 20 px — literal per spec */
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-text-sec);
	max-width: 694px;      /* matches Figma 693.97 px inner width of 820 px column */
	width: 100%;
	margin: 0;
	margin-block-end: var(--space-xl); /* 1.5 rem = 24 px subhead → form gap */
}

/* Bold lead phrase "Knot & Scales" — same colour, just heavier */
.hero-banner__subhead strong {
	font-weight: 700;
	color: var(--color-text-sec);
}

/* ── Waitlist form row ───────────────────────────────────────── */
.hero-banner__form {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-lg); /* 1 rem = 16 px email ↔ button gap */
	max-width: 680px;
	width: 100%;
	margin-inline: auto;
}

/* ── Email input ─────────────────────────────────────────────── */
.hero-banner .hero-banner__email {
	flex: 1;
	min-width: 0;           /* allows flex item to shrink below content width */
	height: 48px;
	padding-inline: var(--space-xl); /* 1.5 rem = 24 px */
	border-radius: var(--radius-6xl);
	background: var(--color-bg-3);
	border: 1px solid var(--color-bg-3);
	color: var(--color-text-pri);
	font-family: var(--font-body);
	font-size: var(--text-body); /* 1 rem = 16 px */
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease;
}

.hero-banner .hero-banner__email::placeholder {
	color: var(--color-text-ter);
	opacity: 1; /* normalise Firefox which reduces placeholder opacity by default */
}

.hero-banner .hero-banner__email:focus-visible {
	outline: 3px solid var(--color-brand);
	outline-offset: 2px;
	border-color: var(--color-brand);
}

/* ── Submit button ───────────────────────────────────────────── */
.hero-banner .hero-banner__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);  /* 0.5 rem = 8 px label ↔ icon gap */
	height: 48px;
	padding: 0 var(--space-xl); /* 0 24 px */
	border-radius: var(--radius-6xl);
	background: var(--color-cta);
	color: var(--color-text-inv);
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--font-body);
	font-size: var(--text-body); /* 1 rem = 16 px */
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background-color 0.15s ease;
}

.hero-banner .hero-banner__submit:hover,
.hero-banner .hero-banner__submit:active {
	background: var(--color-cta-hover);
	color: var(--color-text-inv);
}

.hero-banner .hero-banner__submit:focus-visible {
	outline: 3px solid #004ad9;
	outline-offset: 3px;
}

/* ── Submit button icon (chevron SVG, inlined by PHP) ────────── */
.hero-banner__submit-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 10px;
	height: auto;
}

.hero-banner__submit-icon svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ── UI strip wrapper ────────────────────────────────────────── */
.hero-banner__ui-strip-wrap {
	width: 100%;
}

/* ── UI strip decorative image ───────────────────────────────── */
.hero-banner__ui-strip {
	display: block;
	width: 100%;
	height: auto;
	/* Fade left/right edges so the strip dissolves into the background. */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
	pointer-events: none; /* purely decorative */
}

/* ── Tablet ≤900px ───────────────────────────────────────────── */
@media (max-width: 900px) {
	.hero-banner__content {
		padding-inline: var(--space-2xl); /* 2 rem = 32 px — tighter tablet gutters */
	}

	.hero-banner__title {
		font-size: clamp(2rem, 5vw, 3.75rem);
		letter-spacing: -1px; /* ease tight tracking as size reduces */
	}

	/* subhead stays at its desktop 20px/1.6 — Figma's Desktop-1440 and Mobile-375
	   frames both spec 20px for this text, so it doesn't shrink at any breakpoint. */

	/* Stack email + button each full-width on tablet */
	.hero-banner__form {
		flex-direction: column;
		align-items: stretch;
		max-width: 100%;
		gap: var(--space-md); /* 0.75 rem ≈ 12 px — relax gap when stacked */
	}

	.hero-banner__submit {
		width: 100%;
		justify-content: center;
	}
}

/* ── Mobile ≤480px ───────────────────────────────────────────── */
@media (max-width: 480px) {
	.hero-banner__content {
		padding-inline: 1.25rem; /* 20 px — no exact token between --space-lg (16) and --space-xl (24) */
		padding-block-start: clamp(7rem, 20vw, 10rem); /* min 7rem (112px) clears the fixed header (~92px) */
	}

	.hero-banner__title {
		font-size: 2.5rem; /* 40px — Figma Mobile-375 H1 spec (fixed, not fluid, at this width) */
		letter-spacing: -0.5px; /* further ease at smallest sizes */
	}

	.hero-banner__subhead {
		max-width: 100%; /* fill the column — Figma 694 px max no longer helpful */
		/* font-size stays at desktop's 20px/1.6 — Figma Mobile-375 keeps it unchanged */
	}

	/* UI strip is decorative and becomes illegibly cramped below 480 px — hide it */
	.hero-banner__ui-strip {
		display: none;
	}

	/* Strip hidden — no gap needed before the next section */
	.hero-banner {
		padding-block-end: 0;
	}
}

/* ── Entrance animations (CSS-only, fires on page load) ─────── */
@media (prefers-reduced-motion: no-preference) {
	.hero-banner__title    { animation: apt-fade-up 0.65s ease-out 0.10s both; }
	.hero-banner__subhead  { animation: apt-fade-up 0.65s ease-out 0.25s both; }
	.hero-banner__form     { animation: apt-fade-up 0.65s ease-out 0.40s both; }
	.hero-banner__ui-strip { animation: apt-fade-up 0.80s ease-out 0.55s both; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.hero-banner .hero-banner__submit,
	.hero-banner .hero-banner__email {
		transition: none;
	}
}