/* ==========================================================================
   Gambit How It Works Block — Refined
   ========================================================================== */

/* Match the hero / product-application-details alignment by capping the
   inner container at --hero-max-width instead of inheriting --full's none. */
.gambit-how-it-works__inner.gambit-container {
	max-width: var(--hero-max-width);
}

/* Visual product page Section 8 ("It's Easy to Get Started") — same block
   on a slightly elevated surface to differentiate from Section 6 ("How to Use"). */
.gambit-how-it-works--surface-elevated {
	background: var(--surface-elevated);
}

/* ---------- Header ---------- */

.gambit-how-it-works__header {
	text-align: center;
	margin-bottom: 32px;
}

/* ---------- Eyebrow (kept for other pages using standalone mode) ---------- */

.gambit-how-it-works__eyebrow {
	font-family: var(--font-mono, monospace);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--signal-red, #c43d2f);
	margin: 0 0 12px;
}

/* ---------- Headline ---------- */

.gambit-how-it-works__headline {
	position: relative;
	font-family: var(--font-heading);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0 0 14px;
	padding-top: 24px;
	color: var(--off-white, #f5f5f5);
}

/* Small signal-red accent bar above the headline — section's visual starting beat */
.gambit-how-it-works__headline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 2px;
	background: var(--signal-red, #c43d2f);
	border-radius: 2px;
}

/* ---------- Subtext ---------- */

.gambit-how-it-works__subtext {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--off-white, #f5f5f5);
	opacity: 0.6;
	max-width: 620px;
	margin: 0 auto;
}

/* ---------- Steps container ---------- */

.gambit-how-it-works__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

/* ---------- Individual step wrapper ---------- */

.gambit-how-it-works__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ---------- Card ---------- */

.gambit-how-it-works__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: var(--radius-card, 24px);
	background: var(--warm-white-5, rgba(247, 245, 242, 0.05));
	border: 1px solid var(--warm-white-8, rgba(247, 245, 242, 0.08));
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	transition:
		transform 0.4s var(--ease-out-expo, cubic-bezier(0.23, 1, 0.32, 1)),
		border-color 0.4s var(--ease-out-expo, cubic-bezier(0.23, 1, 0.32, 1)),
		box-shadow 0.4s var(--ease-out-expo, cubic-bezier(0.23, 1, 0.32, 1));
}

.gambit-how-it-works__card:hover {
	transform: translateY(-4px);
	border-color: rgba(196, 61, 47, 0.28);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

/* ---------- Image wrap ---------- */

.gambit-how-it-works__image-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.gambit-how-it-works__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--ease-out-expo, cubic-bezier(0.23, 1, 0.32, 1));
}

.gambit-how-it-works__card:hover .gambit-how-it-works__image {
	transform: scale(1.04);
}

/* Subtle signal-red duotone wash — gives images a branded cast */
.gambit-how-it-works__image-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(196, 61, 47, 0.12);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}

/* Bottom gradient overlay — anchors the number badge against variable image content */
.gambit-how-it-works__image-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 18, 16, 0.6) 0%, rgba(20, 18, 16, 0) 45%);
	pointer-events: none;
	z-index: 2;
}

/* ---------- Step number (overlaid on image) ---------- */

.gambit-how-it-works__number {
	position: absolute;
	bottom: 16px;
	left: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--signal-red, #c43d2f) 0%, var(--signal-red-hover, #a83327) 100%);
	color: var(--warm-white, #fff);
	font-family: var(--font-mono, monospace);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	z-index: 3;
	box-shadow:
		0 2px 10px rgba(196, 61, 47, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Standalone number (no image fallback) */
.gambit-how-it-works__number-standalone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: var(--warm-white-4, rgba(247, 245, 242, 0.04));
}

.gambit-how-it-works__number-standalone .gambit-how-it-works__number {
	position: static;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	font-size: 18px;
}

/* ---------- Content area ---------- */

.gambit-how-it-works__content {
	padding: 20px 20px 24px;
}

/* Step title */
.gambit-how-it-works__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0 0 10px;
	color: var(--off-white, #f5f5f5);
}

/* Step description */
.gambit-how-it-works__description {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--off-white, #f5f5f5);
	opacity: 0.7;
	margin: 0;
}

/* ---------- Step Note ---------- */

.gambit-how-it-works__note {
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--signal-red, #c43d2f);
	opacity: 0.85;
	margin: 10px 0 0;
}

/* ---------- Step Italic Kicker ---------- */
/* Single-line italic line under a step body — used for risk-reversal trust beats
   like the 95%-refund line on the testosterone get-started block. */

.gambit-how-it-works__kicker {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(247, 245, 242, 0.78);
	margin: 10px 0 0;
}

.gambit-how-it-works__kicker em {
	font-style: italic;
}

/* ---------- Connector arrow (between steps) ---------- */

.gambit-how-it-works__connector {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
	color: rgba(196, 61, 47, 0.5);
	/* Rotate arrow to point down on mobile */
	transform: rotate(90deg);
}

.gambit-how-it-works__connector svg {
	width: 20px;
	height: 20px;
}

/* ---------- Ongoing Care Callout ---------- */

.gambit-how-it-works__ongoing {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 48px;
	padding: 28px 24px;
	background:
		linear-gradient(135deg, rgba(196, 61, 47, 0.09) 0%, rgba(20, 18, 16, 0) 70%),
		var(--warm-white-3, rgba(247, 245, 242, 0.03));
	border: 1px solid rgba(196, 61, 47, 0.22);
	border-radius: var(--radius-card, 24px);
	text-align: left;
}

.gambit-how-it-works__ongoing-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(196, 61, 47, 0.14);
	color: var(--signal-red, #c43d2f);
	flex-shrink: 0;
	animation: gambit-ongoing-pulse 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes gambit-ongoing-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
	.gambit-how-it-works__card,
	.gambit-how-it-works__image,
	.gambit-how-it-works__cta {
		transition: none;
	}

	.gambit-how-it-works__card:hover,
	.gambit-how-it-works__card:hover .gambit-how-it-works__image {
		transform: none;
	}

	.gambit-how-it-works__ongoing-icon {
		animation: none;
	}
}

.gambit-how-it-works__ongoing-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gambit-how-it-works__ongoing-headline {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--warm-white, #fff);
	margin: 0;
}

.gambit-how-it-works__ongoing-body {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--off-white, #f5f5f5);
	opacity: 0.72;
	margin: 0;
}

/* ---------- CTA ---------- */

.gambit-how-it-works__cta-wrap {
	margin-top: 48px;
	text-align: center;
}

.gambit-how-it-works__cta {
	transition: transform 0.2s var(--ease-out-expo, cubic-bezier(0.23, 1, 0.32, 1));
}

.gambit-how-it-works__cta:active {
	transform: scale(0.98);
}

.gambit-how-it-works__cta:focus-visible {
	outline: 2px solid var(--signal-red, #c43d2f);
	outline-offset: 3px;
}

/* ==========================================================================
   Tablet: 768px+
   ========================================================================== */

@media (min-width: 768px) {
	.gambit-how-it-works__header {
		margin-bottom: 48px;
	}

	.gambit-how-it-works__steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.gambit-how-it-works__ongoing {
		flex-direction: row;
		align-items: flex-start;
		gap: 24px;
		margin-top: 56px;
		padding: 36px 44px;
	}

	.gambit-how-it-works__ongoing-icon {
		margin-top: 4px;
	}

	.gambit-how-it-works__ongoing-content {
		flex-direction: row;
		gap: 40px;
	}

	.gambit-how-it-works__ongoing-headline {
		flex: 0 0 38%;
		font-size: 22px;
	}

	.gambit-how-it-works__ongoing-body {
		flex: 1 1 auto;
	}

	.gambit-how-it-works__cta-wrap {
		margin-top: 56px;
	}

	/* On 2-col, connectors are hidden — they'd break the grid flow */
	.gambit-how-it-works__connector {
		display: none;
	}

	.gambit-how-it-works__content {
		padding: 24px 28px 32px;
	}
}

/* ==========================================================================
   Desktop: 1100px+
   ========================================================================== */

@media (min-width: 1100px) {
	.gambit-how-it-works__header {
		margin-bottom: 56px;
	}

	/* Default: 3-column grid */
	.gambit-how-it-works__steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}

	/* 4 steps → 1×4 strip (default). */
	.gambit-how-it-works__steps[data-step-count="4"] {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Maximus uses one sentence per step (no subheader). On the strip variant we
	   hide __description and treat __title as the sentence. Title typography
	   stays on the site's existing card-title style — only the subheader is
	   removed. Scoped to the strip modifier so other 4-step pages are unaffected. */
	.gambit-how-it-works--four-step-strip .gambit-how-it-works__description {
		display: none;
	}

	/* 5 steps: flex instead of grid so justify-content centers the 2 leftover items */
	.gambit-how-it-works__steps[data-step-count="5"] {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.gambit-how-it-works__steps[data-step-count="5"] > .gambit-how-it-works__step {
		flex: 0 0 calc(33.333% - 19px);
	}

	/* 6 steps → 3×2 grid (default grid handles it) */

	/* Show connectors as horizontal arrows between cards on desktop */
	.gambit-how-it-works__step {
		flex-direction: row;
		align-items: stretch;
	}

	.gambit-how-it-works__card {
		flex: 1 1 0;
	}

	.gambit-how-it-works__connector {
		display: flex;
		position: absolute;
		right: -20px;
		top: 50%;
		transform: translateY(-50%);
		padding: 0;
		z-index: 3;
	}

	/* Hide connectors on row-end items for multi-row layouts */
	.gambit-how-it-works__steps[data-step-count="5"] .gambit-how-it-works__step:nth-child(3n) .gambit-how-it-works__connector,
	.gambit-how-it-works__steps[data-step-count="6"] .gambit-how-it-works__step:nth-child(3n) .gambit-how-it-works__connector {
		display: none;
	}

	/* Maximus parity on the strip variant: CTA is hidden on desktop because the
	   next section is one scroll away and an interrupting CTA costs flow.
	   Mobile keeps the CTA (re-shown by default since this rule is scoped to ≥1100px). */
	.gambit-how-it-works--four-step-strip .gambit-how-it-works__cta-wrap {
		display: none;
	}

	.gambit-how-it-works__title {
		font-size: 20px;
	}

	.gambit-how-it-works__number {
		width: 48px;
		height: 48px;
		font-size: 16px;
	}

	.gambit-how-it-works__ongoing {
		margin-top: 64px;
		padding: 40px 48px;
	}

	.gambit-how-it-works__cta-wrap {
		margin-top: 64px;
	}
}

/* ==========================================================================
   Large desktop: 1400px+
   ========================================================================== */

@media (min-width: 1400px) {
	.gambit-how-it-works__steps {
		gap: 36px;
	}

	/* 5-step flex offset re-tuned for 36px gap (36 × 2/3 = 24) */
	.gambit-how-it-works__steps[data-step-count="5"] > .gambit-how-it-works__step {
		flex: 0 0 calc(33.333% - 24px);
	}

	.gambit-how-it-works__connector {
		right: -24px;
	}

	.gambit-how-it-works__content {
		padding: 28px 32px 36px;
	}
}

/* ==========================================================================
   Light-mode program overrides — opt-in via body class `.is-program-light`
   (set by gambit_get_light_program_slugs(), currently /weight-loss/).
   Block was authored dark-mode-first; these flip the surfaces + text only.
   Number badge, signal-red accents, and bar above the H2 work on either
   surface and stay as-is.
   ========================================================================== */

.is-program-light .gambit-how-it-works {
	background-color: var(--warm-white);
}

.is-program-light .gambit-how-it-works__headline,
.is-program-light .gambit-how-it-works__subtext,
.is-program-light .gambit-how-it-works__title,
.is-program-light .gambit-how-it-works__description,
.is-program-light .gambit-how-it-works__ongoing-headline,
.is-program-light .gambit-how-it-works__ongoing-body {
	color: var(--deep-charcoal);
}

.is-program-light .gambit-how-it-works__card {
	background: #ffffff;
	border-color: rgba(26, 26, 30, 0.08);
	box-shadow: 0 12px 32px rgba(26, 26, 30, 0.06);
}

.is-program-light .gambit-how-it-works__card:hover {
	border-color: rgba(196, 61, 47, 0.28);
	box-shadow: 0 18px 40px rgba(26, 26, 30, 0.10);
}

/* Drop the red multiply wash on light mode — it muddies images on white. */
.is-program-light .gambit-how-it-works__image-wrap::after {
	display: none;
}

/* Number badge sits on imagery; keep the bottom anchor gradient subtle on light. */
.is-program-light .gambit-how-it-works__image-overlay {
	background: linear-gradient(to top, rgba(20, 18, 16, 0.45) 0%, rgba(20, 18, 16, 0) 45%);
}

.is-program-light .gambit-how-it-works__number-standalone {
	background: rgba(26, 26, 30, 0.04);
}

.is-program-light .gambit-how-it-works__ongoing {
	background:
		linear-gradient(135deg, rgba(196, 61, 47, 0.06) 0%, rgba(247, 245, 242, 0) 70%),
		#ffffff;
	border-color: rgba(196, 61, 47, 0.22);
}

/* Light-mode: 4-step layout becomes 1×4 strip (matches the wider 1650 hero
   formula on /weight-loss/). Default 2×2 grid is too oversized when the
   inner container stretches to 1650px — descriptions stay visible (we don't
   borrow the `--four-step-strip` modifier because that variant hides them
   for Maximus parity). Connector after step 2 reappears so the row reads
   1→2→3→4 cleanly. */
@media (min-width: 1100px) {
	.is-program-light .gambit-how-it-works__steps[data-step-count="4"] {
		grid-template-columns: repeat(4, 1fr);
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.is-program-light .gambit-how-it-works__steps[data-step-count="4"] .gambit-how-it-works__step:nth-child(2) .gambit-how-it-works__connector {
		display: flex;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   MECHANISM variant — Maximus-parity 4-card grid for the weight-loss "How it
   works" section. Each card shows a single ↑/↓ arrow (1 up / 3 down asymmetry),
   title, body. No image, no number badge, no connectors. Light surface, signal-
   red arrow, deep-charcoal text. Used by Section 4 of the Dual-Action GLP-1 Pen
   page; gated by the `mechanism` variant on the medication block field group.
   ───────────────────────────────────────────────────────────────────────────── */
.gambit-how-it-works--mechanism {
	background: var(--warm-white, #F7F5F2);
	color: var(--deep-charcoal, #1A1A1E);
}

.gambit-how-it-works--mechanism .gambit-how-it-works__headline,
.gambit-how-it-works--mechanism .gambit-how-it-works__subtext {
	color: var(--deep-charcoal, #1A1A1E);
}

.gambit-how-it-works--mechanism .gambit-how-it-works__subtext {
	opacity: 0.72;
	max-width: 1500px;
	padding-bottom: 32px;
	margin-bottom: 0;
	position: relative;
}

/* Mechanism variant suppresses the default red bar above the headline — the
   bar below the subcopy is the only divider in this layout. Also removes the
   padding-top reservation that bar relied on. */
.gambit-how-it-works--mechanism .gambit-how-it-works__headline {
	padding-top: 0;
}

.gambit-how-it-works--mechanism .gambit-how-it-works__headline::before {
	display: none;
}

/* Signal-red divider below the subcopy — visually closes the header block
   before the card grid opens. */
.gambit-how-it-works--mechanism .gambit-how-it-works__subtext::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 2px;
	background: var(--signal-red, #C43D2F);
	border-radius: 2px;
}

/* Charcoal hairline below each card title — separates title from body.
   Spans the full card width (the card's padding sets the inset). The
   title's padding-bottom matches the card's flex gap so the gap above
   the line (text → line) equals the gap below (line → body copy). */
.gambit-how-it-works--mechanism .gambit-how-it-works__title {
	position: relative;
	padding-bottom: 18px;
	width: 100%;
}

.gambit-how-it-works--mechanism .gambit-how-it-works__title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(26, 26, 30, 0.25);
}

.gambit-how-it-works--mechanism .gambit-how-it-works__connector {
	display: none !important;
}

.gambit-how-it-works--mechanism .gambit-how-it-works__step {
	display: block;
	flex: none;
}

.gambit-how-it-works--mechanism .gambit-how-it-works__card {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 24px 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.gambit-how-it-works--mechanism .gambit-how-it-works__arrow {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--signal-red, #C43D2F);
}

.gambit-how-it-works--mechanism .gambit-how-it-works__arrow--up {
	color: var(--signal-red, #C43D2F);
}

.gambit-how-it-works--mechanism .gambit-how-it-works__arrow--down {
	color: var(--deep-charcoal, #1A1A1E);
	opacity: 0.85;
}

.gambit-how-it-works--mechanism .gambit-how-it-works__title {
	font-family: var(--font-heading, "General Sans", sans-serif);
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--deep-charcoal, #1A1A1E);
}

.gambit-how-it-works--mechanism .gambit-how-it-works__description {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 15px;
	line-height: 1.55;
	color: rgba(26, 26, 30, 0.78);
	/* margin-top matches the title's padding-bottom so the gap above the
	   separator line (title text → line) equals the gap below (line → body). */
	margin: 18px 0 0;
	max-width: 280px;
}

/* Title + description live inside a __content wrapper (not direct flex children
   of the card), so the card's flex gap doesn't control spacing between them.
   Reset the wrapper's default margins; description's margin-top above does the
   actual spacing work. */
.gambit-how-it-works--mechanism .gambit-how-it-works__content {
	width: 100%;
}

@media (max-width: 700px) {
	.gambit-how-it-works--mechanism .gambit-how-it-works__steps {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.gambit-how-it-works--mechanism .gambit-how-it-works__card {
		padding: 24px 12px;
	}

	/* Drop the per-card title underline on mobile — Maximus separates the
	   cards from each other instead of separating title-from-body. */
	.gambit-how-it-works--mechanism .gambit-how-it-works__title::after {
		display: none;
	}

	.gambit-how-it-works--mechanism .gambit-how-it-works__description {
		margin-top: 8px;
	}

	/* Hairline between cards only — no divider above the first or below the last. */
	.gambit-how-it-works--mechanism .gambit-how-it-works__step + .gambit-how-it-works__step .gambit-how-it-works__card {
		border-top: 1px solid rgba(26, 26, 30, 0.18);
	}
}

@media (min-width: 701px) and (max-width: 1099px) {
	.gambit-how-it-works--mechanism .gambit-how-it-works__steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
}

/* Match the Section 3 lifestyle-banner virtual container (1600px max-width / 92%
   wrap) — keeps the page's mechanism strip aligned with the band above it
   instead of clamping at the default --hero-max-width. */
.gambit-how-it-works--mechanism .gambit-how-it-works__inner.gambit-container {
	max-width: 1650px;
	width: 92%;
}

@media (min-width: 1100px) {
	.gambit-how-it-works--mechanism .gambit-how-it-works__steps[data-step-count="4"] {
		grid-template-columns: repeat(4, 1fr);
		max-width: none;
		margin: 0;
		gap: 48px;
	}

	.gambit-how-it-works--mechanism .gambit-how-it-works__description {
		max-width: 320px;
	}
}