/**
 * Greenspage Countdown - "Launch Hero" pattern styles.
 *
 * Only affects the classes the Launch Hero pattern uses, so it is inert on
 * pages that don't include the pattern. Everything is a CSS custom property
 * so the whole look can be re-themed per client without touching this file.
 */

.gp-launch-hero {
	--gp-lh-bg: #fbf7ed;
	--gp-lh-ink: #162119;
	--gp-lh-muted: #5e6b62;
	--gp-lh-accent: #244d34;
	--gp-lh-pill-bg: #edf5ea;
	--gp-lh-card-bg: #ffffff;

	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--gp-lh-bg);
	color: var(--gp-lh-ink);
	padding: 40px 18px;
	text-align: center;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.gp-launch-hero .gp-launch-title {
	font-size: clamp(2.6rem, 7vw, 7rem);
	font-weight: 400;
	letter-spacing: -0.065em;
	line-height: 0.9;
	margin: 0 0 24px;
}

.gp-launch-hero .gp-launch-lead {
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	line-height: 1.6;
	color: var(--gp-lh-muted);
	max-width: 720px;
	margin: 0 auto;
}

/* The countdown block, styled to match the hero. */

.gp-launch-hero .wp-block-greenspage-countdown {
	max-width: 860px;
	margin: 34px auto 0;
	text-align: center;
}

.gp-launch-hero .gp-cd__units {
	justify-content: center;
	gap: 16px;
}

.gp-launch-hero .gp-cd__intro {
	display: inline-block;
	background: var(--gp-lh-pill-bg);
	color: var(--gp-lh-accent);
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 30px;
}

.gp-launch-hero .gp-cd--boxes .gp-cd__unit {
	padding: 26px 18px;
	border-radius: 26px;
	background: var(--gp-lh-card-bg);
	box-shadow: 0 18px 44px rgba(22, 33, 25, 0.09);
	min-width: 8.5em;
}

.gp-launch-hero .gp-cd__num {
	font-size: clamp(2.4rem, 5vw, 4.6rem);
	font-weight: 950;
	color: var(--gp-lh-accent);
}

.gp-launch-hero .gp-cd__label {
	font-weight: 900;
	letter-spacing: 0.1em;
	color: var(--gp-lh-muted);
}

@media ( prefers-color-scheme: dark ) {
	.gp-launch-hero {
		--gp-lh-bg: #12160f;
		--gp-lh-ink: #eef2e9;
		--gp-lh-muted: #9aa89b;
		--gp-lh-accent: #7fb98f;
		--gp-lh-pill-bg: rgba(127, 185, 143, 0.14);
		--gp-lh-card-bg: rgba(255, 255, 255, 0.05);
	}
}