/**
 * upcomer/comparison-table
 *
 * Two viewports of behaviour driven by the table's data-columns attribute:
 *   - data-columns="2" | "3": stacked-card mode on mobile (each <tr>
 *     becomes a vertical mini-card with data-label captions).
 *   - data-columns="4"–"10": horizontal-scroll mode at any breakpoint
 *     (table stays a table; the scroll container handles overflow). Each
 *     column count carries an intrinsic min-width so wide tables (8+
 *     columns) scroll on desktop too, not just on narrow viewports.
 *
 * Container width tokens match every other upcomer/* block so the table
 * aligns with the gamurs footer column at every viewport.
 */

.upcomer-block--comparison-table {
	--ct-surface-bg: #ffffff;
	--ct-surface-fg: inherit;
	--ct-surface-fg-muted: color-mix(in srgb, currentColor 62%, transparent);
	--ct-surface-fg-subtle: color-mix(in srgb, currentColor 78%, transparent);
	--ct-rule: color-mix(in srgb, currentColor 10%, transparent);
	--ct-divider: color-mix(in srgb, currentColor 6%, transparent);

	--ct-head-bg: #0f0f0f;
	--ct-head-fg: #ffffff;

	--ct-row-zebra: color-mix(in srgb, currentColor 2.5%, transparent);

	--ct-accent: #c81e1e;          /* primary CTA bg + active highlights */
	--ct-icon-yes: #0a7f5d;        /* semantic green — exclusive=yes */
	--ct-icon-no: color-mix(in srgb, currentColor 35%, transparent); /* muted neutral — exclusive=no */

	/* Badge tones */
	--ct-badge-positive-fg: #0a7f5d;
	--ct-badge-positive-bg: color-mix(in srgb, #0a7f5d 12%, transparent);
	--ct-badge-positive-border: color-mix(in srgb, #0a7f5d 30%, transparent);
	--ct-badge-neutral-fg:  color-mix(in srgb, currentColor 70%, transparent);
	--ct-badge-neutral-bg:  color-mix(in srgb, currentColor 6%, transparent);
	--ct-badge-neutral-border: color-mix(in srgb, currentColor 18%, transparent);
	--ct-badge-warning-fg:  #8a6608;
	--ct-badge-warning-bg:  color-mix(in srgb, #ffd84d 22%, transparent);
	--ct-badge-warning-border: color-mix(in srgb, #d4a90a 35%, transparent);
	--ct-badge-negative-fg: #c81e1e;
	--ct-badge-negative-bg: color-mix(in srgb, #c81e1e 9%, transparent);
	--ct-badge-negative-border: color-mix(in srgb, #c81e1e 28%, transparent);

	--ct-content-max: calc(1px * var(--wp--custom--bottom-nav--container--desktop--max-width, 1200));

	color: #0f0f0f;

	/* Outer vertical rhythm comes from --upcomer-block-rhythm in
	   assets/css/blocks-canvas.css. */
	padding-inline: 0;

	box-sizing: border-box;
}

.upcomer-block--comparison-table *,
.upcomer-block--comparison-table *::before,
.upcomer-block--comparison-table *::after {
	box-sizing: border-box;
}

.upcomer-block--comparison-table .upcomer-block__inner {
	max-width: var(--ct-content-max);
	margin-inline: auto;
}

@media (min-width: 992px) and (max-width: 1248px) {
	.upcomer-block--comparison-table .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--latpop--max-width, 1200));
	}
}

@media (max-width: 991px) {
	.upcomer-block--comparison-table .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--mobile--max-width, 720));
		padding-inline: 15px;
	}
}

/* ---- Optional panel wrap -------------------------------------------- */

.comparison-panel {
	background: var(--ct-surface-bg);
	border: 1px solid var(--ct-rule);
	padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 2.5vw, 1.5rem);
}

.comparison-panel__heading {
	margin: 0 0 clamp(0.875rem, 2vw, 1.25rem);
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 800;
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--ct-surface-fg);
}

/* ---- Scroll container (handles 4+ cols at any viewport) ------------- */

.comparison-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Visible focus ring when the scroll region is keyboard-focused (4+ column
   tables get role="region" + tabindex="0" from render.php). Reuses the
   existing accent token — no new colour. */
.comparison-table__scroll:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 2px;
}

/* ---- Table base ----------------------------------------------------- */

.comparison-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--ct-surface-fg);
}

.comparison-table__head-cell {
	background: var(--ct-head-bg);
	color: var(--ct-head-fg);
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: clamp(0.75rem, 1.75vw, 1rem) clamp(0.875rem, 2vw, 1.25rem);
	border: none;
	vertical-align: middle;
	white-space: nowrap;
}

.comparison-table__row {
	border-top: 1px solid var(--ct-divider);
}

.comparison-table__row:first-child {
	border-top: none;
}

.comparison-table__row:nth-child(even) {
	background: var(--ct-row-zebra);
}

.comparison-table__cell {
	padding: clamp(0.75rem, 1.75vw, 1rem) clamp(0.875rem, 2vw, 1.25rem);
	vertical-align: middle;
	border: none;
}

/* ---- Cell variants -------------------------------------------------- */

.comparison-table__cell--logo {
	width: 1px; /* shrink-to-fit */
	white-space: nowrap;
}

.comparison-table__logo {
	display: block;
	max-height: 2.25rem;
	max-width: 6rem;
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}

.comparison-table__rating {
	display: inline-flex;
	align-items: baseline;
	gap: 0.125rem;
	color: var(--ct-accent);
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: -0.01em;
}

.comparison-table__rating-num {
	font-size: 1.5rem;
}

.comparison-table__rating-divisor {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ct-surface-fg-muted);
	letter-spacing: 0;
}

.comparison-table__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
}

.comparison-table__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.comparison-table__icon--yes {
	color: var(--ct-icon-yes);
}

.comparison-table__icon--no {
	color: var(--ct-icon-no);
}

.comparison-table__pm-logos {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	align-items: center;
}

.comparison-table__pm-logo {
	display: block;
	max-height: 1.25rem;
	max-width: 2.5rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

.comparison-table__missing {
	color: var(--ct-surface-fg-muted);
}

/* ---- CTAs ----------------------------------------------------------- */

.comparison-table__cta--primary,
.comparison-table__cta--primary:link,
.comparison-table__cta--primary:visited,
.comparison-table__cta--primary:hover,
.comparison-table__cta--primary:focus,
.comparison-table__cta--primary:focus-visible,
.comparison-table__cta--primary:active {
	color: #ffffff;
	text-decoration: none;
}

.comparison-table__cta--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ct-accent);
	font-family: "Barlow", sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.5rem 0.875rem;
	min-height: 2.25rem;
	border: none;
	white-space: nowrap;
	transition: background-color 180ms ease, transform 120ms ease;
}

.comparison-table__cta--primary:hover {
	background: color-mix(in srgb, var(--ct-accent) 86%, #000);
}

.comparison-table__cta--primary:focus-visible {
	background: color-mix(in srgb, var(--ct-accent) 86%, #000);
	outline: 2px solid var(--ct-accent);
	outline-offset: 3px;
}

.comparison-table__cta--primary:active {
	background: color-mix(in srgb, var(--ct-accent) 78%, #000);
	transform: translateY(1px);
}

.comparison-table__cta--secondary,
.comparison-table__cta--secondary:link,
.comparison-table__cta--secondary:visited,
.comparison-table__cta--secondary:hover,
.comparison-table__cta--secondary:focus,
.comparison-table__cta--secondary:focus-visible,
.comparison-table__cta--secondary:active {
	color: var(--ct-surface-fg-subtle);
	text-decoration: none;
}

.comparison-table__cta--secondary {
	display: inline-flex;
	align-items: center;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.25rem 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.comparison-table__cta--secondary:hover {
	border-bottom-color: color-mix(in srgb, currentColor 70%, transparent);
}

/* ---- Badges (freeform mode) ----------------------------------------- */

.comparison-table__badge {
	display: inline-flex;
	align-items: center;
	font-family: "Barlow", sans-serif;
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.25rem 0.5rem;
	border: 1px solid;
	border-radius: 999px;
	line-height: 1.2;
	white-space: nowrap;
}

.comparison-table__badge--positive {
	color: var(--ct-badge-positive-fg);
	background: var(--ct-badge-positive-bg);
	border-color: var(--ct-badge-positive-border);
}

.comparison-table__badge--neutral {
	color: var(--ct-badge-neutral-fg);
	background: var(--ct-badge-neutral-bg);
	border-color: var(--ct-badge-neutral-border);
}

.comparison-table__badge--warning {
	color: var(--ct-badge-warning-fg);
	background: var(--ct-badge-warning-bg);
	border-color: var(--ct-badge-warning-border);
}

.comparison-table__badge--negative {
	color: var(--ct-badge-negative-fg);
	background: var(--ct-badge-negative-bg);
	border-color: var(--ct-badge-negative-border);
}

/* ---- Mobile stacked mode (≤3 columns only) -------------------------- */

@media (max-width: 720px) {
	.comparison-table[data-columns="2"],
	.comparison-table[data-columns="3"] {
		display: block;
	}

	.comparison-table[data-columns="2"] thead,
	.comparison-table[data-columns="3"] thead {
		position: absolute;
		left: -9999px;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		width: 1px;
		overflow: hidden;
	}

	.comparison-table[data-columns="2"] tbody,
	.comparison-table[data-columns="3"] tbody {
		display: block;
	}

	.comparison-table[data-columns="2"] .comparison-table__row,
	.comparison-table[data-columns="3"] .comparison-table__row {
		display: block;
		background: var(--ct-surface-bg);
		border: 1px solid var(--ct-rule);
		padding: 0;
		margin-bottom: 0.75rem;
	}

	.comparison-table[data-columns="2"] .comparison-table__row:nth-child(even),
	.comparison-table[data-columns="3"] .comparison-table__row:nth-child(even) {
		background: var(--ct-surface-bg);
	}

	.comparison-table[data-columns="2"] .comparison-table__cell,
	.comparison-table[data-columns="3"] .comparison-table__cell {
		display: grid;
		grid-template-columns: minmax(8rem, 30%) 1fr;
		gap: 1rem;
		align-items: center;
		padding: 0.75rem 0.875rem;
		border-top: 1px solid var(--ct-divider);
		text-align: left !important; /* override inline text-align in stacked mode */
	}

	.comparison-table[data-columns="2"] .comparison-table__cell:first-child,
	.comparison-table[data-columns="3"] .comparison-table__cell:first-child {
		border-top: none;
	}

	.comparison-table[data-columns="2"] .comparison-table__cell::before,
	.comparison-table[data-columns="3"] .comparison-table__cell::before {
		content: attr(data-label);
		font-family: "Barlow", sans-serif;
		font-weight: 700;
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--ct-surface-fg-muted);
	}

	.comparison-table[data-columns="2"] .comparison-table__logo,
	.comparison-table[data-columns="3"] .comparison-table__logo {
		margin: 0;
	}
}

/* ---- Horizontal scroll (4+ columns, any breakpoint) ------------------
   4+ column tables never stack. Each column count carries an intrinsic
   min-width so the table overflows its .comparison-table__scroll
   container — which then scrolls — exactly when the viewport can't fit
   it. No breakpoint gating: 4–7 columns overflow only on narrower
   screens, while 8–10 columns overflow the ~1200px desktop container
   too. Roughly ~10rem per column keeps every cell legible. */

.comparison-table[data-columns="4"]  { min-width: 44rem; }
.comparison-table[data-columns="5"]  { min-width: 52rem; }
.comparison-table[data-columns="6"]  { min-width: 60rem; }
.comparison-table[data-columns="7"]  { min-width: 70rem; }
.comparison-table[data-columns="8"]  { min-width: 80rem; }
.comparison-table[data-columns="9"]  { min-width: 90rem; }
.comparison-table[data-columns="10"] { min-width: 100rem; }

/* Scroll-hint shadows on the left/right edges so readers know columns
   are out of view. The paired local/scroll gradient layers self-hide
   when nothing overflows, so applying this at every breakpoint (and to
   every non-stacked column count) is safe. */
.upcomer-block--comparison-table .comparison-table__scroll:has(.comparison-table:not([data-columns="2"]):not([data-columns="3"])) {
	background:
		linear-gradient(to right, var(--ct-surface-bg) 30%, color-mix(in srgb, var(--ct-surface-bg) 0%, transparent)) 0 0 / 2rem 100% no-repeat,
		linear-gradient(to right, color-mix(in srgb, currentColor 6%, transparent), color-mix(in srgb, currentColor 0%, transparent) 2rem),
		linear-gradient(to left, var(--ct-surface-bg) 30%, color-mix(in srgb, var(--ct-surface-bg) 0%, transparent)) 100% 0 / 2rem 100% no-repeat,
		linear-gradient(to left, color-mix(in srgb, currentColor 6%, transparent), color-mix(in srgb, currentColor 0%, transparent) 2rem);
	background-attachment: local, scroll, local, scroll;
}

/* When the table is panel-wrapped, drop its own outer border (the
   panel supplies it). */
.upcomer-block--comparison-table--panelled .comparison-table {
	border: none;
}