/* ===========================================================================
   FS - SECTIONS
   Section-level composition. Primitives live in components.css; the Trace
   lives in trace.css. Tokens only - no raw values.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   HERO - "The Live Trace"

   Deliberately NOT 100vh. A full-viewport hero hides the fact that a site
   continues; 88vh leaves the next section peeking above the fold, which is
   what actually gets people scrolling.

   Deliberately NOT centred. Centred heroes read as marketing; left-aligned
   editorial type reads as a product company.
   --------------------------------------------------------------------------- */

.fs-hero {
	position: relative;
	isolation: isolate;
	padding-block: 72px;

	/* The canvas bleeds past the container on wide screens; clip it here so a
	   bleed can never produce a horizontal scrollbar. */
	overflow: hidden;
}

.fs-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fs-space-xl);
	align-items: center;
	inline-size: 100%;
}

/* Trace field: the motif continuing quietly behind the content. One of only
   three permitted backgrounds in the system. */
.fs-hero__field {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	z-index: 0;
	color: var(--fs-rose);
	opacity: 0.05;
	pointer-events: none;
}

/* --- Type side ------------------------------------------------------------ */

.fs-hero__title {
	font-size: var(--fs-t-display);
	font-weight: var(--fs-weight-bold);
	line-height: 1.05;
	letter-spacing: var(--fs-track-display);
	max-inline-size: 20ch;
	margin: 0 0 var(--fs-space-md);
}

/* #e53566 is 4.17:1 on white - below AA for body text, comfortably above the
   3:1 required at this size. Display type is the one place the brand rose can
   carry text directly. */
.fs-hero__title-accent {
	display: block;
	color: var(--fs-rose);
}

.fs-hero__sub {
	max-inline-size: 48ch;
	margin: 0 0 var(--fs-space-lg);
	font-size: var(--fs-t-lede);
	line-height: 1.6;
	color: var(--fs-muted);
}

.fs-hero__proof {
	margin: var(--fs-space-lg) 0 0;
	font-family: var(--fs-font-mono);
	font-size: var(--fs-t-mono);
	letter-spacing: 0.02em;
	color: var(--fs-muted);
}

/* --- Canvas side ---------------------------------------------------------- */

.fs-hero__canvas {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fs-space-sm);
}

.fs-hero__canvas .fs-trace-ticker {
	inline-size: 100%;
	max-inline-size: 560px;
}

/* Three purpose-drawn densities. Only one is ever displayed; the hidden ones
   never intersect, so trace.js does no work for them. */
.fs-hero__canvas-full,
.fs-hero__canvas-compact {
	display: none;
}

.fs-hero__canvas-mobile {
	display: block;
	inline-size: 100%;
	max-inline-size: 340px;
}

/* --- 768px: stacked, compact four-route canvas ---------------------------- */

@media (min-width: 768px) {
	.fs-hero__canvas-mobile {
		display: none;
	}

	.fs-hero__canvas-compact {
		display: block;
		inline-size: 100%;
		max-inline-size: 560px;
	}
}

/* --- 1024px: 7/5 split ---------------------------------------------------- */

@media (min-width: 1024px) {
	.fs-hero {
		display: flex;
		align-items: center;
		min-block-size: min(88vh, 920px);
		padding-block: var(--fs-space-xl);
	}

	.fs-hero__inner {
		grid-template-columns: 7fr 5fr;
		gap: var(--fs-space-l);
	}
}

/* In the 1024-1279 band the canvas sits in a five-column slot, so the SVG
   scales down and its labels would render around 9px. Compensating in user
   units keeps them legible instead of shrinking a diagram past readability -
   the same principle behind having a separate mobile drawing at all. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.fs-hero__canvas .fs-trace__label {
		font-size: 15px;
	}

	.fs-hero__canvas .fs-trace__engine-label {
		font-size: 14px;
	}

	.fs-hero__canvas .fs-trace__engine-sub {
		font-size: 12px;
	}
}

/* --- 1280px: full six-route canvas, bleeding toward the edge -------------- */

@media (min-width: 1280px) {
	.fs-hero__canvas-compact {
		display: none;
	}

	.fs-hero__canvas-full {
		display: block;
		inline-size: 100%;
		max-inline-size: 560px;
	}

	/* No edge bleed on the canvas.

	   The spec asks for the canvas to run past the container so the system
	   reads as continuing beyond the frame. Measured at 1280-1600px that
	   pushed the trailing outcome label ("Follow-up scheduled") past the
	   viewport edge, where .fs-hero's overflow clipped it. An unreadable
	   node label breaks the rule the whole motif rests on - every node
	   carries a real, legible name.

	   The "continues past the frame" idea is carried by .fs-hero__field
	   instead, whose routes already run off both edges. */
}

/* ---------------------------------------------------------------------------
   NEXT-SECTION PEEK
   A marker that the page continues. Used by the preview to show the hero
   handing off.
   --------------------------------------------------------------------------- */

.fs-hero + .fs-section {
	border-block-start: 1px solid var(--fs-border);
}