/* ==========================================================================
   Gambit Comparison Table — Tabs on mobile, table on desktop
   ========================================================================== */

.gambit-comparison-table {
}

.gambit-comparison-table .gambit-container {
	max-width: var(--hero-max-width);
}

/* Eyebrow
   ========================================================================== */

.gambit-comparison-table__eyebrow {
	font-family: var(--font-mono, monospace);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--signal-red);
	text-align: center;
	margin: 0 0 16px;
}

/* Headline
   ========================================================================== */

.gambit-comparison-table__headline {
	font-family: var(--font-heading);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	text-align: center;
	color: var(--warm-white);
	margin: 0 0 16px;
	line-height: 1.2;
}

/* Subtext
   ========================================================================== */

.gambit-comparison-table__subtext {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--off-white);
	opacity: 0.75;
	text-align: center;
	max-width: 600px;
	margin: 0 auto 48px;
}

/* ==========================================================================
   Mobile Tab View (default — below 768px)
   ========================================================================== */

.gambit-comparison-table__desktop {
	display: none;
}

/* Eyebrow above the segmented tabs — frames the block as a comparison UX
   without making any clinical claim. */
.gambit-comparison-table__tabs-eyebrow {
	font-family: var(--font-mono, monospace);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--signal-red);
	text-align: center;
	margin: 0 0 12px;
}

/* Tab list — segmented-control surface so the three options read as one
   comparison group rather than free-floating pills. */
.gambit-comparison-table__tabs {
	display: flex;
	flex-direction: column;
	background: var(--surface-elevated);
	border: 1px solid var(--warm-white-8);
	border-radius: var(--radius-card);
	overflow: hidden;
	margin-bottom: 24px;
}

.gambit-comparison-table__tab {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	padding: 16px 20px;
	border: none;
	border-bottom: 1px solid var(--warm-white-6);
	border-radius: 0;
	background: transparent;
	color: rgba(237, 237, 235, 0.5);
	cursor: pointer;
	transition: background-color 0.2s var(--ease-out-expo), color 0.2s var(--ease-out-expo);
}

/* Last row owns no divider; row above the active row hides its divider so the
   active fill reads as one continuous block. */
.gambit-comparison-table__tab:last-child,
.gambit-comparison-table__tab--active,
.gambit-comparison-table__tab:has(+ .gambit-comparison-table__tab--active) {
	border-bottom-color: transparent;
}

/* Active tab — recommended variant */
.gambit-comparison-table__tab--active.gambit-comparison-table__tab--recommended {
	background: var(--signal-red);
	color: var(--warm-white);
}

/* Active tab — non-recommended variant */
.gambit-comparison-table__tab--active:not(.gambit-comparison-table__tab--recommended) {
	background: var(--warm-white);
	color: var(--deep-charcoal);
}

/* Panel */
.gambit-comparison-table__panel {
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, var(--signal-red-8), transparent 60%),
		var(--surface-elevated);
	border: 1px solid var(--warm-white-8);
	border-radius: var(--radius-card);
	padding: 8px 0;
}

.gambit-comparison-table__panel[hidden] {
	display: none;
}

/* Row */
.gambit-comparison-table__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--warm-white-6);
}

.gambit-comparison-table__row:last-child {
	border-bottom: none;
}

/* Label */
.gambit-comparison-table__label {
	font-family: var(--font-mono, monospace);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(237, 237, 235, 0.4);
}

/* Value */
.gambit-comparison-table__value {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--warm-white);
}

/* ==========================================================================
   Desktop Table (768px+)
   ========================================================================== */

@media (min-width: 768px) {
	.gambit-comparison-table__mobile {
		display: none;
	}

	.gambit-comparison-table__desktop {
		display: block;
		margin-top: 32px;
	}

	/* Surface card — elevated container */
	.gambit-comparison-table__surface {
		background:
			radial-gradient(ellipse 80% 60% at 50% 40%, var(--signal-red-8), transparent 70%),
			var(--surface-elevated);
		border: 1px solid var(--warm-white-8);
		border-radius: var(--radius-card);
		overflow: hidden;
	}

	.gambit-comparison-table__desktop table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
	}

	/* Column header inner (flex column for badge + name) */
	.gambit-comparison-table__col-header-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	/* Header cells */
	.gambit-comparison-table__desktop th {
		font-family: var(--font-heading);
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		padding: 24px 24px 20px;
		border-bottom: 1px solid var(--warm-white-8);
		color: var(--warm-white);
		vertical-align: bottom;
	}

	.gambit-comparison-table__feature-header {
		text-align: left;
		width: 28%;
	}

	/* Recommended column header — red-tinted background */
	.gambit-comparison-table__col-header.gambit-comparison-table__col--recommended {
		background: var(--signal-red-8);
	}

	/* Body cells */
	.gambit-comparison-table__desktop td {
		font-family: var(--font-body);
		font-size: 16px;
		padding: 18px 24px;
		text-align: center;
		border-bottom: 1px solid var(--warm-white-6);
		color: var(--warm-white);
		line-height: 1.5;
		transition: background-color 0.15s var(--ease-out-expo);
	}

	/* Last row — no bottom border */
	.gambit-comparison-table__desktop tbody tr:last-child td {
		border-bottom: none;
	}

	/* Feature name column */
	.gambit-comparison-table__feature-name {
		text-align: left;
		color: var(--warm-white);
		opacity: 1;
		font-family: var(--font-heading);
		font-weight: 600;
		font-size: 15px;
		letter-spacing: 0.01em;
	}

	/* Recommended column highlight — red band */
	.gambit-comparison-table__cell--recommended {
		background: var(--signal-red-8);
		font-weight: 500;
	}

	/* Row hover */
	.gambit-comparison-table__desktop tbody tr:hover td {
		background-color: var(--warm-white-4);
	}

	.gambit-comparison-table__desktop tbody tr:hover .gambit-comparison-table__cell--recommended {
		background-color: var(--signal-red-10);
	}
}

/* ==========================================================================
   Desktop Large (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {
	.gambit-comparison-table__desktop th {
		font-size: 18px;
		padding: 28px 32px 24px;
	}

	.gambit-comparison-table__desktop td {
		font-size: 16px;
		padding: 20px 32px;
	}
}

/* ==========================================================================
   Headline "vs." accent
   ========================================================================== */

.gambit-comparison-table__vs {
	color: var(--signal-red);
	font-style: italic;
	font-weight: 700;
}

/* ==========================================================================
   Feature subline (under the criterion label)
   ========================================================================== */

.gambit-comparison-table__feature-label {
	display: block;
}

.gambit-comparison-table__feature-subline {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(237, 237, 235, 0.78);
	letter-spacing: 0;
	text-transform: none;
	margin-top: 6px;
	max-width: 38ch;
	opacity: 1;
}

@media (min-width: 1200px) {
	.gambit-comparison-table__feature-subline {
		font-size: 14px;
		max-width: 42ch;
	}
}

/* Mobile subline — shown beneath the uppercase label inside each panel row */
.gambit-comparison-table__label-subline {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(237, 237, 235, 0.78);
	letter-spacing: 0;
	text-transform: none;
	margin-top: 6px;
}

/* ==========================================================================
   Cell value tones — ✓ / ✗ / typed word / empty
   ========================================================================== */

.gambit-comparison-table__cell-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}

/* ✓ — solid filled disc with a white check */
.gambit-comparison-table__cell--is-yes .gambit-comparison-table__cell-value {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--warm-white);
	color: var(--deep-charcoal);
	font-size: 18px;
	font-weight: 700;
}

.gambit-comparison-table__cell--recommended.gambit-comparison-table__cell--is-yes .gambit-comparison-table__cell-value {
	background: var(--signal-red);
	color: var(--warm-white);
}

/* ✗ — outlined muted disc */
.gambit-comparison-table__cell--is-no .gambit-comparison-table__cell-value {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: rgba(247, 245, 242, 0.06);
	color: rgba(237, 237, 235, 0.45);
	border: 1px solid var(--warm-white-8);
	font-size: 16px;
	font-weight: 600;
}

/* Typed-word win for the comparator (e.g. "Weekly", "High", "Moderate") */
.gambit-comparison-table__cell--is-text .gambit-comparison-table__cell-value {
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--off-white);
	letter-spacing: 0.01em;
}

/* Override the legacy 0.55 dim for cells that are intentionally typed words —
   the typed word IS the comparator's win and should read as a clinical readout,
   not as a faded leftover. */
@media (min-width: 768px) {
	.gambit-comparison-table__desktop td.gambit-comparison-table__cell--is-yes,
	.gambit-comparison-table__desktop td.gambit-comparison-table__cell--is-no,
	.gambit-comparison-table__desktop td.gambit-comparison-table__cell--is-text {
		opacity: 1;
	}
}

/* ==========================================================================
   CTA below the table (always visible — independent of mobile tab state)
   ========================================================================== */

.gambit-comparison-table__action {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.gambit-comparison-table__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	min-width: 220px;
}

@media (min-width: 768px) {
	.gambit-comparison-table__action {
		margin-top: 40px;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.gambit-comparison-table__tab,
	.gambit-comparison-table__desktop td {
		transition: none;
	}
}