/*
 * Gambit Hero Block — Mobile-First
 *
 * Two modes:
 * 1. Homepage: Deep Charcoal bg, typewriter cycling headline, star reviews
 * 2. CPT: Deep Charcoal bg with background image and gradient overlay
 *
 * Homepage desktop layout kicks in at 1100px (matches nav collapse breakpoint)
 * to ensure the longest headline ("erectile dysfunction") fits on one line
 * alongside the trust stats column.
 */

/* ==========================================================================
   CPT Mode (Program / Medication pages) — dark hero with background image
   ========================================================================== */

.gambit-hero--cpt {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 85vh;
	padding-top: 100px;
	padding-bottom: 48px;
	background-color: var(--deep-charcoal);
	overflow: hidden;
}

@media (min-width: 768px) {
	.gambit-hero--cpt {
		align-items: center;
		min-height: 80vh;
		padding-top: 120px;
		padding-bottom: 80px;
	}
}

@media (min-width: 1200px) {
	.gambit-hero--cpt {
		min-height: 90vh;
		max-height: 900px;
		padding-bottom: 100px;
	}
}

/* Background image */
.gambit-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	z-index: 0;
}

/* Gradient overlay */
.gambit-hero--cpt .gambit-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(26, 26, 30, 0.95) 0%,
		rgba(26, 26, 30, 0.75) 40%,
		rgba(26, 26, 30, 0.4) 100%
	);
}

.gambit-hero--cpt.gambit-hero--has-bg .gambit-hero__overlay {
	background: linear-gradient(
		to top,
		rgba(26, 26, 30, 0.92) 0%,
		rgba(26, 26, 30, 0.6) 50%,
		rgba(26, 26, 30, 0.3) 100%
	);
}

.gambit-hero--cpt .gambit-hero__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
}

.gambit-hero--cpt .gambit-hero__title {
	color: var(--warm-white);
}

.gambit-hero--cpt .gambit-hero__subtitle {
	color: var(--off-white);
	opacity: 0.8;
}

/* ==========================================================================
   Homepage Mode — Deep Charcoal bg, typewriter headline
   ========================================================================== */

.gambit-hero--homepage {
	background-color: var(--deep-charcoal);
	padding-top: calc(var(--top-offset) + 40px);
	padding-bottom: 4px;
}

@media (min-width: 1100px) {
	.gambit-hero--homepage {
		padding-top: calc(var(--top-offset) + 48px);
		padding-bottom: 40px;
	}
}

/* Two-column layout: text left, trust stats right (1100px+) */
.gambit-hero__layout {
	display: flex;
	flex-direction: column;
}

@media (min-width: 1100px) {
	.gambit-hero__layout {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}
}

.gambit-hero__left {
	flex: 1;
}

/* Remove subtitle bottom margin on desktop so flex-end aligns with text bottom */
@media (min-width: 1100px) {
	.gambit-hero__left .gambit-hero__subtitle {
		margin-bottom: 0;
	}
}

/* Right column — hidden below 1100px, visible on desktop */
.gambit-hero__right {
	display: none;
}

@media (min-width: 1100px) {
	.gambit-hero__right {
		display: block;
		flex-shrink: 0;
		text-align: left;
	}
}

.gambit-hero__right-label {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--off-white);
	opacity: 0.6;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
	display: block;
}

.gambit-hero__right-stats {
	display: flex;
	align-items: center;
	gap: 20px;
}

.gambit-hero__trust-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gambit-hero__trust-top {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gambit-hero__trust-top .gambit-hero__stars {
	font-size: clamp(20px, 2vw, 28px);
}

.gambit-hero__trust-value {
	font-family: var(--font-heading);
	font-size: clamp(24px, 2.5vw, 32px);
	font-weight: 700;
	color: var(--warm-white);
	line-height: 1.1;
}

.gambit-hero__trust-label {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--off-white);
	opacity: 0.65;
}

.gambit-hero__review-divider {
	width: 1px;
	align-self: stretch;
	background-color: var(--warm-white-15);
}

/* ==========================================================================
   Title
   ========================================================================== */

.gambit-hero__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(32px, 7vw, 56px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

.gambit-hero--homepage .gambit-hero__title {
	color: var(--warm-white);
}

@media (min-width: 1100px) {
	.gambit-hero__title {
		/* Scale with viewport so longest headline fits alongside trust stats.
		   At 1440px: 3.2vw = 46px. At 1920px: 3.2vw = 61px → clamped to 60px. */
		font-size: clamp(40px, 3.2vw, 60px);
		margin-bottom: 20px;
	}
}

/* Cycling word wrapper — new line below 1100px to prevent layout shift */
.gambit-hero__cycling-wrap {
	display: block;
}

@media (min-width: 1100px) {
	.gambit-hero__cycling-wrap {
		display: inline;
	}
}

/* Cycling link + text — Signal Red like Maximus uses primary blue */
.gambit-hero__cycling-link {
	color: var(--signal-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	font-family: var(--font-heading);
	font-weight: 500;
	font-style: italic;
	transition: text-decoration-thickness 0.15s ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.gambit-hero__cycling-link:hover {
		text-decoration-thickness: 3px;
	}
}

.gambit-hero__cycling-link:focus-visible {
	outline: 2px solid var(--signal-red);
	outline-offset: 3px;
	border-radius: 2px;
}

.gambit-hero__cycling-link:active {
	opacity: 0.85;
}

.gambit-hero__cycling-text {
	color: inherit;
}

/* Blinking cursor */
.gambit-hero__cursor {
	font-weight: 300;
	color: var(--signal-red);
	animation: gambit-cursor-blink 0.8s step-end infinite;
}

@keyframes gambit-cursor-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* ==========================================================================
   Subtitle
   ========================================================================== */

.gambit-hero__subtitle {
	font-size: clamp(16px, 2.5vw, 20px);
	line-height: 1.6;
	margin: 0 0 8px;
	max-width: none;
}

.gambit-hero--homepage .gambit-hero__subtitle {
	color: var(--warm-white);
	opacity: 0.8;
}

@media (min-width: 1100px) {
	.gambit-hero__subtitle {
		max-width: none;
		margin-bottom: 36px;
	}
}

/* ==========================================================================
   Actions (CTA)
   ========================================================================== */

.gambit-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

@media (min-width: 576px) {
	.gambit-hero__actions {
		flex-direction: row;
		align-items: center;
		gap: 24px;
	}
}

.gambit-hero__cta {
	font-size: clamp(15px, 2vw, 16px);
	padding: 14px 36px;
	min-height: 52px;
}

/* ==========================================================================
   Review Stars & Stats (used in hero right column)
   ========================================================================== */

.gambit-hero__stars {
	font-size: 16px;
	color: #f4b740;
	letter-spacing: 2px;
}


/* ==========================================================================
   Entrance Animation — subtle fade-in with stagger
   ========================================================================== */

.gambit-hero--homepage .gambit-hero__title {
	animation: gambit-fadein 0.6s var(--ease-out-expo) both;
}

.gambit-hero--homepage .gambit-hero__subtitle {
	animation: gambit-fadein 0.6s var(--ease-out-expo) 0.08s both;
}

.gambit-hero--homepage .gambit-hero__right {
	animation: gambit-fadein 0.6s var(--ease-out-expo) 0.16s both;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gambit-hero__cursor {
		animation: none;
		opacity: 1;
	}

	/* Disable entrance animations */
	.gambit-hero--homepage .gambit-hero__title,
	.gambit-hero--homepage .gambit-hero__subtitle,
	.gambit-hero--homepage .gambit-hero__right {
		animation: none;
	}

	/* Show static text instead of typewriter */
	.gambit-hero__cycling-text {
		/* JS will not animate; shows first word statically */
	}
}