/*
 * Home: Hero — static, final composition.
 *
 * This file describes the hero as everyone sees it at rest (and as no-JS /
 * STATIC_ACCESSIBLE visitors always see it). The intro choreography lives
 * separately in intro.css and only ever animates TOWARD this state.
 */

/* Home sections are full-bleed scenes; they manage their own vertical spacing. */
.gb-main--home {
	padding-block: 0;
}

.gb-hero {
	/* Dark scene: switch the focus ring to the light token so it stays visible. */
	--gb-focus: var(--gb-focus-inverse);

	position: relative;
	overflow: hidden;
	padding-block: var(--gb-space-2xl);
	background-color: var(--gb-scene-bg);
	/* Static glow, centred so it needs no RTL/LTR variant. Never animated. */
	background-image: radial-gradient(60% 55% at 50% 45%, var(--gb-scene-glow), transparent 70%);
	color: var(--gb-scene-text);
}

.gb-hero__inner {
	display: grid;
	/* Intrinsic two-zone layout: stacks (content first) when there is no room. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	align-items: center;
	gap: var(--gb-space-l);
	/*
	 * Hero = at least one full viewport (inner + the section's block padding).
	 * Besides the cinematic framing, this keeps the Growth Journey fully below the
	 * fold on load, so the journey can switch to its tall sticky layout without
	 * moving anything the visitor can see (no CLS).
	 */
	min-block-size: calc(100vh - var(--gb-space-2xl) * 2);
	min-block-size: calc(100svh - var(--gb-space-2xl) * 2);
}

.gb-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gb-space-s);
}

.gb-hero__title {
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-6);
	line-height: var(--gb-leading-heading);
	color: var(--gb-scene-text);
}

/* Profile tagline under the name: turquoise, the brand's primary colour. */
.gb-hero__tagline {
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-2);
	color: var(--gb-primary);
}

.gb-hero__lead {
	max-inline-size: 36ch;
	font-size: var(--gb-step-1);
	color: var(--gb-scene-text-muted);
}

/* Temporary copy is visibly flagged during review (never shipped as-is). */
[data-gb-placeholder] {
	text-decoration-line: underline;
	text-decoration-style: dashed;
	text-decoration-color: var(--gb-placeholder-mark);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.4em;
}

.gb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-space-s);
	margin-block-start: var(--gb-space-xs);
}

/* ---------- Visual (growth point → Growth Line → temporary mark) ---------- */

.gb-hero__visual {
	justify-self: center;
	inline-size: min(100%, clamp(15rem, 34vw, 30rem));
	/* Reserves space before the SVG paints: no layout shift. */
	aspect-ratio: 400 / 440;
}

.gb-hero__art {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
}

/* The growth point's resting look lives in components/growth-point.css (shared with the Growth Journey). */

/* The intro's skip button now lives with the entrance (components/entrance/, D-105). */

/* ---------- Transition cue toward the Growth Journey ---------- */

/* Centred with margin-inline: auto, so it is direction-neutral. */
.gb-hero__cue {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	inline-size: 2px;
	block-size: var(--gb-space-xl);
	margin-inline: auto;
	background-image: linear-gradient(to bottom, transparent, var(--gb-growth-line-color));
}