/*** Module: Hero — Style: simple ***/

.module.hero.style-simple {
	padding-block: calc(var(--header-clearance) + var(--module-spacing-xlarge)) var(--module-spacing-large);
}

/* No eyebrow — the heading leads, so pull the top gap back to large. Still gated on
   a painted bg (not on the header), matching the pre-token behaviour. */
.module.hero.style-simple:is(.bg-parchment, .bg-parchment-inset, .bg-white, .bg-digital-blue, .bg-orange, .glow):has(.container > :is(.heading-1, .heading-2):first-child) {
	padding-top: calc(var(--header-clearance) + var(--module-spacing-large));
}

.module.hero.style-simple.bg-parchment {
	background: var(--parchment);
}

.module.hero.style-simple.bg-white {
	background: var(--white);
}

/* Over-sized gradient layers give the euphoria-drift animation room to pan. */
.module.hero.style-simple.bg-digital-blue {
	background: var(--euphoric-blue);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
	color: var(--white);
}

/* Heading reads lavender so the white .highlight phrase carries the emphasis (Figma 1624:6233). */
.module.hero.style-simple.bg-digital-blue :is(.heading-1, .heading-2) {
	color: var(--lavender);
}

.module.hero.style-simple.bg-orange .bg-field {
	background: var(--orange-gradient);
}

.module.hero.style-simple.bg-parchment-inset .bg-field {
	background: var(--parchment);
}

/* Deeper, symmetric band — bottom matches the xlarge top (header clearance stays
   on top via the overlay rule above). */
.module.hero.style-simple.bg-parchment-inset {
	padding-bottom: var(--module-spacing-xlarge);
}

.module.hero.style-simple .grid {
	gap: 0;
}

.module.hero.style-simple .eyebrow,
.module.hero.style-simple .heading-1,
.module.hero.style-simple .heading-2,
.module.hero.style-simple .large-text,
.module.hero.style-simple .buttons {
	grid-column: 2 / -2;
	text-align: center;
}

/* Display heading spans the full 12-col grid; body copy stays inset (2 / -2). */
.module.hero.style-simple .heading-1,
.module.hero.style-simple .heading-2 {
	grid-column: 1 / -1;
}

.module.hero.style-simple .buttons {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-medium);
	justify-content: center;
}

.module.hero.style-simple .callout {
	grid-column: 3 / span 8;
	position: relative;
	text-align: center;
}

.module.hero.style-simple :is(.heading-1, .heading-2, .large-text) + .callout {
	margin-top: 82px;
}

/* Button straddles the callout's bottom dashed border (pulled up half its own
   height onto the line); z-index keeps the solid button over the border. */
.module.hero.style-simple .callout + .buttons {
	margin-block: 0 calc(56px / -2);
	position: relative;
	transform: translateY(-50%);
	z-index: 1;
}

/** Left-aligned variant **/

/* Constrain the measure like body content; widens to full at 950 (MQ below). */
.module.hero.style-simple.align-left :is(.eyebrow, .heading-1, .heading-2, .large-text, .callout, .buttons) {
	grid-column: 1 / span 10;
	text-align: left;
}

.module.hero.style-simple.align-left .buttons {
	justify-content: flex-start;
}

.module.hero.style-simple .eyebrow + .heading-1,
.module.hero.style-simple .eyebrow + .heading-2,
.module.hero.style-simple .eyebrow + .large-text {
	margin-top: var(--text-spacing-xsmall);
}

.module.hero.style-simple .heading-1 + .large-text,
.module.hero.style-simple .heading-2 + .large-text {
	margin-top: var(--text-spacing-xsmall);
}

.module.hero.style-simple .heading-1 + .buttons,
.module.hero.style-simple .heading-2 + .buttons,
.module.hero.style-simple .large-text + .buttons {
	margin-top: var(--text-spacing-large);
}

/** Glow — top-center radial, toggled by .glow **/

.module.hero.style-simple.glow {
	isolation: isolate;
	overflow-x: clip;
	position: relative;
}

.module.hero.style-simple.glow::before {
	background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--orange) 35%, transparent) 0%, transparent 70%);
	content: "";
	height: 480px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	transform-origin: center top;
	z-index: -1;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1100 - Mobile Header / Nav */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1100rem / 16)) {

	/* --header-clearance is 0 on a plain hero, header-height on an overlaid one, so
	   the base selector covers both without scoping to the bg variants. */
	.module.hero.style-simple {
		padding-top: calc(var(--header-clearance) + var(--module-spacing-large));
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.hero.style-simple.align-left :is(.eyebrow, .heading-1, .heading-2, .large-text, .callout, .buttons) {
		grid-column: 1 / -1;
	}

	.module.hero.style-simple .callout {
		grid-column: 1 / -1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	/* Base align-items:center keeps the centred hero's stack centred. */
	.module.hero.style-simple .buttons {
		flex-direction: column;
	}

	.module.hero.style-simple.align-left .buttons {
		align-items: flex-start;
	}

	.module.hero.style-simple :is(.heading-1, .heading-2, .large-text) + .callout {
		/*margin-top: var(--module-spacing-large);*/
	}

}

@media (prefers-reduced-motion: no-preference) {

	.module.hero.style-simple.bg-digital-blue {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

	.module.hero.style-simple.glow::before {
		animation: hero-glow-breathe 8s ease-in-out infinite;
	}

	/* Spin only the lettering ring; the circle + center "P" stay put. fill-box
	   origin keeps the rotation centered on the ring (≈ the badge center). */
	.module.hero.style-simple .spin-badge .lettering {
		animation: spin-badge 16s linear infinite;
		transform-box: fill-box;
		transform-origin: center;
	}

}

@keyframes spin-badge {
	to {
		rotate: 360deg;
	}
}