/* ===========================================================================
   Greenhouse Comparison Table — TASK-1224
   Tokens extracted from the Globe asset (Tabla-Globe.webp) + high-fidelity ref.
   Theming via CSS custom properties / preset; no inline HEX. Per-column
   gradients are painted on <col> backgrounds (keeps <table> semantics for AT).
   Fonts per AXIS Figma (node 12479-18591): Poppins (headers), DM Sans (dim +
   cells), Montserrat (ribbon).
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,600;0,9..40,900&family=Montserrat:ital,wght@1,900&family=Poppins:wght@700&display=swap');

.gh-ct-wrap {
	/* ---- Globe preset tokens (default) — declared on the wrap so BOTH the
	   table AND the sibling corner-ribbon inherit them ---- */
	--gh-ct-radius: 36px; /* premium block — generous rounded corners */
	--gh-ct-crimson: #d11963; /* AXIS/Figma table header: saturated magenta-crimson */
	--gh-ct-amber-top: #ffad1b;
	--gh-ct-amber: #ffa300; /* Globe header: vivid warm orange (Figma #ffa300) */
	--gh-ct-aub-top: #3a022c; /* traditional body: deep wine top (Figma #36002e) */
	--gh-ct-aub-mid: #37103f; /* traditional body: deep purple transition (Figma #340c40) */
	--gh-ct-aub-bot: #341d4e; /* traditional body: deep indigo base (Figma #331c4f) */
	--gh-ct-globe-top: #f0804a; /* Globe body: warm orange/coral (Figma #ee7f49) */
	--gh-ct-globe-mid: #f1a892; /* peachier mid (Figma #f0ae9c) */
	--gh-ct-globe-bot: #e597a5; /* Globe body: rose-mauve base (Figma #e796a5) */
	--gh-ct-ribbon: #a233fa; /* AXIS Figma node 19209: bright violet (outer/hypotenuse) */
	--gh-ct-ribbon-dark: #6b08c2; /* deep violet (top-left apex) */
	--gh-ct-ribbon-fold: #2f0571; /* AXIS Figma nodes 19207/19208: dark fold tabs (the wrap) */
	--gh-ct-text: #ffffff;
	--gh-ct-text-soft: rgba(255, 255, 255, 0.88);
	--gh-ct-divider: rgba(255, 255, 255, 0.085); /* thin, soft, consistent */
	/* Proportional metrics locked to the Globe asset (cqw = % of table width),
	   with rem/px floors so narrow containers stay legible. The widget renders
	   as a faithful scaled copy of the reference at any width. */
	--gh-ct-pad-y: clamp(14px, 1.04cqw, 29px); /* balanced row rhythm, close to AXIS table */
	--gh-ct-pad-x: clamp(28px, 3.35cqw, 56px);
	--gh-ct-pad-top: clamp(13px, 0.9cqw, 24px);
	--gh-ct-check-bg: #ffffff;
	--gh-ct-check-fg: #b8466f;
	--gh-ct-cross-bg: #ffffff;
	--gh-ct-cross-fg: #c0405f;

	container-type: inline-size;
	width: 100%;
	max-width: 1100px; /* slightly smaller overall footprint; centered */
	margin-inline: auto;
	position: relative;
	padding-top: var(--gh-ct-pad-top); /* room for the best-option badge to straddle the top edge */
	isolation: isolate;
}

.gh-ct-surface {
	position: relative;
	z-index: 1; /* clips the table while allowing the ribbon fold to tuck behind */
	width: 100%;
	border-radius: var(--gh-ct-radius);
	overflow: hidden;
	clip-path: inset(0 round var(--gh-ct-radius));
	background: linear-gradient(180deg, var(--gh-ct-crimson) 0%, var(--gh-ct-aub-bot) 100%);
	box-shadow: 0 46px 100px -44px rgba(74, 12, 48, 0.5), 0 14px 40px -30px rgba(74, 12, 48, 0.32);
}

.gh-comparison-table {
	width: 100%;
	max-width: 100%;
	position: relative;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	color: var(--gh-ct-text);
	font-family: inherit;
}

/* Reset theme/Elementor table styles that would otherwise win specificity. */
.gh-comparison-table th,
.gh-comparison-table td {
	border: 0;
	background: transparent;
	box-sizing: border-box;
	margin: 0;
}

.gh-ct-wrap[data-preset='neutral'] {
	--gh-ct-crimson: #334155;
	--gh-ct-amber-top: #38bdf8;
	--gh-ct-amber: #0ea5e9;
	--gh-ct-aub-top: #1e293b;
	--gh-ct-aub-mid: #29364a;
	--gh-ct-aub-bot: #334155;
	--gh-ct-globe-top: #0ea5e9;
	--gh-ct-globe-mid: #2563eb;
	--gh-ct-globe-bot: #4f46e5;
	--gh-ct-ribbon: #0ea5e9;
	--gh-ct-ribbon-dark: #0284c7;
}

/* ---- column widths + gradient regions painted on <col> ---- */
.gh-ct-col--dim { width: 22%; }
.gh-ct-col--a { width: 39%; }
.gh-ct-col--b { width: 39%; }

.gh-ct-col--dim,
.gh-ct-col--a {
	/* Fallback behind tbody. The real body gradient is painted on <tbody> so
	   it starts below the header, matching the AXIS/Figma table. */
	background: linear-gradient(
		180deg,
		var(--gh-ct-aub-top) 0%,
		var(--gh-ct-aub-top) 22%,
		var(--gh-ct-aub-mid) 62%,
		var(--gh-ct-aub-bot) 100%
	);
}
.gh-ct-col--b {
	/* AXIS/Figma table gradient: orange/coral body drifting into a soft
	   rose-mauve base under the solid amber Globe header. */
	background: linear-gradient(
		180deg,
		var(--gh-ct-globe-top) 0%,
		var(--gh-ct-globe-top) 24%,
		var(--gh-ct-globe-mid) 58%,
		var(--gh-ct-globe-bot) 100%
	);
}

.gh-comparison-table tbody {
	background:
		linear-gradient(
			180deg,
			var(--gh-ct-aub-top) 0%,
			var(--gh-ct-aub-top) 18%,
			var(--gh-ct-aub-mid) 58%,
			var(--gh-ct-aub-bot) 100%
		) left top / 61% 100% no-repeat,
		linear-gradient(
			180deg,
			var(--gh-ct-globe-top) 0%,
			var(--gh-ct-globe-top) 18%,
			var(--gh-ct-globe-mid) 58%,
			var(--gh-ct-globe-bot) 100%
		) right top / 39% 100% no-repeat;
}

/* ---- caption: visually hidden, available to screen readers ---- */
.gh-ct-caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.gh-ct-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- best-option corner ribbon (AXIS Figma reference) ----
   This version is owned by the Globe header cell itself. Its origin is the
   header's top-left corner, so it is structurally attached to the table seam. */
.gh-ct-corner-ribbon {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: clamp(80px, 6.65cqw, 126px);
	aspect-ratio: 1;
	pointer-events: none;
	filter: drop-shadow(3px 4px 8px rgba(40, 5, 80, 0.34));
}
.gh-ct-corner-ribbon-face,
.gh-ct-corner-ribbon-fold {
	position: absolute;
	display: block;
}
.gh-ct-corner-ribbon-face {
	inset: 0;
	z-index: 2;
	background: linear-gradient(135deg, var(--gh-ct-ribbon) 0%, var(--gh-ct-ribbon-dark) 100%);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.gh-ct-corner-ribbon-fold {
	z-index: 1;
	background: var(--gh-ct-ribbon-fold);
	opacity: 0.95;
}
.gh-ct-corner-ribbon-fold--top {
	top: 0;
	left: 0;
	width: 100%;
	height: 16%;
	clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
.gh-ct-corner-ribbon-fold--left {
	top: 0;
	left: 0;
	width: 16%;
	height: 100%;
	clip-path: polygon(0 0, 100% 16%, 100% 84%, 0 100%);
}
.gh-ct-corner-ribbon-label {
	position: absolute;
	/* centered inside the triangular face, along the hypotenuse */
	left: 0;
	top: 0;
	width: 74%;
	height: 74%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.04em;
	transform: rotate(-44deg);
	transform-origin: center;
	font-family: 'Montserrat', sans-serif; /* AXIS Figma: Montserrat Black Italic */
	font-style: italic;
	font-weight: 900;
	font-size: clamp(0.5rem, 0.82cqw, 1rem);
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--gh-ct-text);
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(33, 4, 66, 0.4);
	word-spacing: 100vw; /* force BEST / OPTION onto two lines (editable text) */
}

/* ---- header bands (paint over the col gradient) ---- */
.gh-comparison-table .gh-ct-head {
	padding: clamp(22px, 2.4cqw, 60px) var(--gh-ct-pad-x); /* taller header band */
	font-family: 'Poppins', 'DM Sans', sans-serif; /* AXIS Figma: Poppins Bold */
	font-weight: 700;
	font-size: clamp(1.35rem, 2.62cqw, 2.95rem); /* bigger/heavier headers */
	letter-spacing: 0.01em;
	vertical-align: middle;
}
.gh-comparison-table .gh-ct-head--dim,
.gh-comparison-table .gh-ct-head--a {
	background: var(--gh-ct-crimson);
}
.gh-comparison-table .gh-ct-head--dim {
	text-align: left;
}
.gh-comparison-table .gh-ct-head--a {
	text-align: center;
	text-transform: uppercase;
}
.gh-comparison-table .gh-ct-head--b {
	background: linear-gradient(180deg, var(--gh-ct-amber-top), var(--gh-ct-amber));
	text-align: center;
	position: relative;
}
.gh-ct-head-b-inner {
	display: inline-block;
	line-height: 0;
}
.gh-comparison-table .gh-ct-logo {
	width: clamp(180px, 16cqw, 380px); /* Wordmark SVGs do not expose width/height attrs reliably.
	                 Keep an explicit responsive width so the brand mark reads as the header hero.
	                 Scoped bajo .gh-comparison-table para ganar a la regla img de Elementor. */
	height: auto;
	max-width: 92%;
	display: inline-block;
	vertical-align: middle;
}

/* ---- body cells ---- */
.gh-comparison-table .gh-ct-dim {
	text-align: left;
	padding: var(--gh-ct-pad-y) var(--gh-ct-pad-x);
	font-family: 'DM Sans', sans-serif; /* AXIS Figma: DM Sans Black */
	font-weight: 900;
	font-size: clamp(1.05rem, 2.08cqw, 2.3rem);
	border-top: 1px solid var(--gh-ct-divider);
	vertical-align: middle;
}
.gh-comparison-table .gh-ct-cell {
	padding: var(--gh-ct-pad-y) var(--gh-ct-pad-x);
	border-top: 1px solid var(--gh-ct-divider);
	vertical-align: middle;
	font-family: 'DM Sans', sans-serif; /* AXIS Figma: DM Sans SemiBold */
	font-weight: 600;
	font-size: clamp(0.98rem, 1.56cqw, 1.74rem);
	line-height: 1.5; /* more air between lines */
}
.gh-comparison-table .gh-ct-cell--a {
	color: var(--gh-ct-text-soft);
	text-align: center;
	border-left: 1px solid var(--gh-ct-divider);
	padding-left: clamp(18px, 1.6cqw, 38px);
	padding-right: clamp(18px, 1.6cqw, 38px);
}
.gh-comparison-table .gh-ct-cell--b {
	color: var(--gh-ct-text);
	position: relative;
	padding-left: calc(var(--gh-ct-pad-x) + clamp(54px, 5.2cqw, 104px)); /* check + text breathing */
	font-size: clamp(0.94rem, 1.42cqw, 1.58rem);
	line-height: 1.45;
	font-weight: 600;
}
.gh-comparison-table td.gh-ct-cell.gh-ct-cell--b:last-child {
	padding-right: var(--gh-ct-pad-x);
}
.gh-ct-cell-text {
	display: block;
}

/* ---- check / cross icon (colored circle, white glyph) ---- */
.gh-ct-ico {
	width: clamp(34px, 2.7cqw, 58px);
	height: clamp(34px, 2.7cqw, 58px);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-shadow: 0 2px 6px rgba(53, 11, 61, 0.18);
}
.gh-ct-ico svg {
	width: 62%;
	height: 62%;
}
.gh-ct-ico--check {
	background: var(--gh-ct-check-bg);
	color: var(--gh-ct-check-fg);
}
.gh-ct-ico--cross {
	background: var(--gh-ct-cross-bg);
	color: var(--gh-ct-cross-fg);
}
.gh-comparison-table .gh-ct-cell--b .gh-ct-ico {
	position: absolute;
	left: var(--gh-ct-pad-x);
	top: calc(var(--gh-ct-pad-y) + 0.78em);
	transform: translateY(-50%);
}
.gh-comparison-table .gh-ct-cell--a .gh-ct-ico {
	margin-right: 10px;
	vertical-align: -7px;
}

/* ===========================================================================
   Responsive reflow — card per dimension (no second image asset)
   =========================================================================== */
@container (max-width: 720px) {
	.gh-ct-wrap {
		padding-top: 0;
	}
	.gh-ct-corner-ribbon {
		display: none;
	}
	.gh-ct-surface {
		border-radius: 0;
		overflow: visible;
		clip-path: none;
		background: transparent;
		box-shadow: none;
	}
	.gh-comparison-table {
		table-layout: auto;
		display: block;
	}
	.gh-comparison-table colgroup,
	.gh-comparison-table thead {
		display: none;
	}
	.gh-comparison-table tbody,
	.gh-comparison-table tr,
	.gh-comparison-table th,
	.gh-comparison-table td {
		display: block;
		width: auto;
	}
	.gh-comparison-table tbody {
		background: transparent;
	}
	.gh-comparison-table tr {
		border-radius: 24px;
		overflow: hidden;
		margin-bottom: 22px;
		box-shadow: 0 26px 60px -34px rgba(74, 12, 48, 0.5);
	}
	.gh-comparison-table .gh-ct-dim {
		background: var(--gh-ct-crimson);
		border-top: 0;
		font-size: 1.25rem;
		padding: 18px 24px;
		text-align: left;
	}
	.gh-comparison-table .gh-ct-cell {
		border-top: 0;
		padding: 20px 24px;
		text-align: left;
		line-height: 1.5;
	}
	.gh-comparison-table .gh-ct-cell--a {
		background: linear-gradient(180deg, var(--gh-ct-aub-top), var(--gh-ct-aub-bot));
		border-left: 0;
		text-align: left;
	}
	.gh-comparison-table .gh-ct-cell--b {
		background: linear-gradient(180deg, var(--gh-ct-globe-mid), var(--gh-ct-globe-bot));
		padding-left: 76px;
	}
	.gh-ct-cell::before {
		content: attr(data-label);
		display: block;
		font-size: 0.7rem;
		font-weight: 800;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		opacity: 0.7;
		margin-bottom: 8px;
	}
	.gh-comparison-table .gh-ct-cell--b .gh-ct-ico {
		top: calc(50% + 8px);
	}
}

/* ===========================================================================
   Microinteractions (TASK-1224) — motion as accent, enterprise-restrained.
   All compositor-only (transform/opacity), all behind prefers-reduced-motion.
   Analyzed with motion-design + microinteractions-auditor skills.
   =========================================================================== */

/* ---- (1) Cursor-glow: soft spotlight following the pointer over the surface.
   Compositor-only sprite (fixed circle translated via CSS vars set by JS),
   soft-light blend so it lifts the gradients without washing the text. JS only
   attaches on fine pointers + no-reduced-motion (assets/js/comparison-table.js). */
.gh-ct-glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 460px;
	height: 460px;
	margin: -230px 0 0 -230px; /* center the sprite on the translate point */
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 45%, transparent 70%);
	mix-blend-mode: soft-light;
	opacity: 0;
	transform: translate(var(--gh-ct-mx, 0px), var(--gh-ct-my, 0px));
	transition: opacity 220ms ease;
	pointer-events: none;
	z-index: 3;
	will-change: transform, opacity;
}
.gh-ct-surface.is-glow .gh-ct-glow {
	opacity: 1;
}

/* ---- (2) Row hover (desktop / fine pointer only): subtle tint + the Globe
   check grows and gains a soft ring → confirms the active row. */
@media (hover: hover) and (pointer: fine) {
	.gh-comparison-table tbody tr td,
	.gh-comparison-table tbody tr th {
		transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1);
	}
	.gh-comparison-table tbody tr:hover td,
	.gh-comparison-table tbody tr:hover th {
		box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.05);
	}
	.gh-comparison-table .gh-ct-cell--b .gh-ct-ico {
		transition: transform 160ms cubic-bezier(0.2, 0, 0, 1), box-shadow 160ms ease;
	}
	.gh-comparison-table tbody tr:hover .gh-ct-cell--b .gh-ct-ico {
		transform: translateY(-50%) scale(1.12);
		box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16), 0 4px 10px rgba(53, 11, 61, 0.3);
	}
}

/* ---- (3) Entrance cascade + (4) check pop — scroll-driven, per-element view()
   timeline (natural stagger as each row enters). @supports-guarded so browsers
   without scroll-driven animations show content statically (never hidden). */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.gh-comparison-table tbody tr {
			animation: gh-ct-row-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 42%;
		}
		.gh-comparison-table .gh-ct-cell--b .gh-ct-ico {
			animation: gh-ct-check-pop linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 56%;
		}
	}

	/* Ribbon sheen: a restrained diagonal light sweep every 6s, clipped to the
	   triangular face by its clip-path. Draws the eye to the differentiator. */
	.gh-ct-corner-ribbon-face::after {
		content: '';
		position: absolute;
		inset: -12%;
		background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
		transform: translateX(-130%);
		animation: gh-ct-ribbon-sheen 6s ease-in-out 1.4s infinite;
		pointer-events: none;
	}
}

@keyframes gh-ct-row-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes gh-ct-check-pop {
	0% { opacity: 0; transform: translateY(-50%) scale(0.4); }
	70% { transform: translateY(-50%) scale(1.12); }
	100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes gh-ct-ribbon-sheen {
	0% { transform: translateX(-130%); }
	16% { transform: translateX(130%); }
	100% { transform: translateX(130%); }
}