/* Hero with the violet wave — mirrors the live site's Header.png section (DESIGN.md → Components → Hero).
   The wave outline is traced from the original PNG into assets/images/hero-wave.svg and used as a mask,
   so it crops exactly like the old background (cover, anchored to the bottom centre). */

.wv-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	/* Height follows the content; the bottom padding is the same wave zone on every page (owner, 2026-10-19). */
	min-height: 0;
	padding-top: calc(var(--wv-header-h) + 5.5rem) !important;
	padding-bottom: clamp(9rem, 6rem + 12vw, 14rem) !important;
	text-align: center;
	color: var(--wp--preset--color--surface);
}

/* The violet shape itself, behind the content */
.wv-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(38% 42% at 27% 92%, #250061 0%, rgba(37, 0, 97, 0) 100%),
		radial-gradient(34% 40% at 67% 96%, #6600b6 0%, rgba(102, 0, 182, 0) 100%),
		radial-gradient(55% 55% at 50% 60%, #4b00ae 0%, rgba(75, 0, 174, 0) 100%),
		#4200c6;
	-webkit-mask: url("../images/hero-wave.svg") center bottom / cover no-repeat;
	mask: url("../images/hero-wave.svg") center bottom / cover no-repeat;
}

.wv-hero > * { position: relative; max-width: min(100%, 900px); margin-inline: auto; }

.wv-hero h1, .wv-hero .wp-block-heading {
	color: var(--wp--preset--color--surface);
	font-size: clamp(2.25rem, 1.1rem + 4.6vw, 5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-block: 0;
}

.wv-hero p {
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.25;
	max-width: 880px;
	margin-block: clamp(1rem, 0.5rem + 1.5vw, 1.75rem) 0;
}

.wv-hero .wp-block-buttons { margin-top: 2rem; justify-content: center; }

/* Hero CTA keeps the live look: indigo pill, white small caps, soft shadow (owner decision) */
.wv-hero .wp-block-button__link {
	background: var(--wp--preset--color--indigo-action);
	color: var(--wp--preset--color--surface);
	padding: 14px 38px;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	box-shadow: 0 20px 30px rgba(20, 0, 60, 0.3);
}
.wv-hero .wp-block-button__link:hover { background: var(--wp--preset--color--indigo-action-deep); }

@media (min-width: 1024px) {
	.wv-hero { padding-top: calc(var(--wv-header-h) + 0.75rem) !important; }
	.wv-hero p { line-height: 1.85; margin-top: 1.25rem; }
	.wv-hero .wp-block-buttons { margin-top: 1.75rem; }
}

/* When a page starts with a hero, the (fixed) header lies on it, transparent until scrolled.
   No negative margin needed: the header is out of the flow and the hero pads its content below it. */
.wp-site-blocks:has(:is(.wp-block-post-content, main) > .wv-hero:first-child) .wv-nav:not(.is-scrolled):not(.is-panel-open) {
	background: transparent;
	box-shadow: none;
}
.wp-site-blocks:has(:is(.wp-block-post-content, main) > .wv-hero:first-child) > main {
	padding-top: 0 !important;
	margin-top: 0 !important;
}