/* ==========================================================================
   Widget — Simple Hero (Page Title)
   Figma node 178:528. Eyebrow, heading and one line of copy on the foam field,
   with the wave pattern fading in from one edge.
   ========================================================================== */

.o-simple-hero {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Copy
   The shared heading block is centred and width-limited for a section heading;
   here it sits flush on the site grid with a measure that keeps a long
   supporting line from running the whole 1440.
   -------------------------------------------------------------------------- */
.o-section--simple-hero .o-section-heading {
	max-width: 48rem;
	margin-inline: 0;
	margin-bottom: 0;
}

/*
 * The measure above means the block has to move with the alignment, not just
 * the text inside it. The widget puts the chosen alignment on a class.
 */
.o-simple-hero--align-center .o-section-heading {
	margin-inline: auto;
}

.o-simple-hero--align-right .o-section-heading {
	margin-inline: auto 0;
}

/* The site's full-size label voice: 18px Inter Medium, wide tracking, orange. */
.o-section--simple-hero .o-eyebrow {
	font-size: var(--o-label-size);
	letter-spacing: var(--o-label-tracking);
}

/*
 * Medium, not bold. This is the quietest of the three heading weights the
 * comps use - a page being named, rather than a section making a claim.
 */
.o-section--simple-hero .o-section-heading__title {
	margin-top: 1rem; /* 16, per the comp */
	font-size: clamp(1.75rem, 1rem + 2.6vw, 3.375rem); /* 28 -> 54, per the comp */
	font-weight: var(--o-fw-medium);
	line-height: 1.074; /* 58 on 54 */
	text-transform: uppercase;
	text-wrap: balance;
}

/*
 * The ice scheme collapses --o-text-soft onto navy, because the feature split's
 * body copy is navy on this surface. Here the comp wants the supporting line
 * quieter than the heading, so it names the muted tone directly.
 */
.o-section--simple-hero .o-section-heading__intro {
	margin-top: 1rem; /* 16, per the comp */
	color: var(--o-ink-mist);
	line-height: 1.5; /* 27 on 18 */
}

/* --------------------------------------------------------------------------
   The wave pattern
   The shared .o-pattern (components.css) across the band, fading in from the
   chosen edge (o-pattern--from-right / --from-left in the markup). Pattern
   strength overrides the opacity.
   -------------------------------------------------------------------------- */
.o-simple-hero__pattern {
	opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Narrow
   The copy runs across the pattern rather than beside it, so the lines are
   knocked back to keep the supporting line comfortable. This multiplies with
   the pattern-strength control rather than replacing it.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.o-simple-hero__pattern::before {
		opacity: 0.55;
	}
}