/**
 * Ultimate specification comparison table chrome. Lives under Modules/Compare; enqueued for mobile/bike compare UIs via {@see \Core\Bootstrap\FrontendAssets\UltimateComparisonTableAssets::enqueueStyles()}.
 *
 * @package NewTechPrice
 */

/* Winner column tint — emerald accent mixed with page bg (override: --ntp-compare-win) */
.ntp-compare-spec-winner {
	--ntp-compare-win: #10b981;
	background: linear-gradient(
		120deg,
		color-mix(in srgb, var(--ntp-compare-win) 14%, var(--ntp-bg-color, #ffffff)),
		color-mix(in srgb, var(--ntp-compare-win) 9%, var(--ntp-bg-color, #ffffff))
	);
	box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--ntp-compare-win) 22%, transparent);
}

[data-theme='dark'] .ntp-compare-spec-winner {
	--ntp-compare-win: #34d399;
	background: linear-gradient(
		120deg,
		color-mix(in srgb, var(--ntp-compare-win) 20%, var(--ntp-bg-color, #0f172a)),
		color-mix(in srgb, var(--ntp-compare-win) 12%, var(--ntp-bg-color, #0f172a))
	);
	box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--ntp-compare-win) 20%, transparent);
}

/* Full-width spec table on sm+; fluid min-width above phone triple mode */
.ntp-mobile-compare-spec {
	min-width: min(100%, 36rem);
}

/**
 * Pair picker: visible only under 640px (replaces Tailwind `hidden max-[639px]:flex …` in markup).
 */
.ntp-compare-mobile-pair-tabs {
	display: none;
}

/**
 * Three-device comparisons under 640px: exactly two device columns visible;
 * third is swapped via pair tabs + horizontal swipe (no page-level horizontal overflow).
 */
@media (max-width: 639px) {
	.ntp-compare-mobile-pair-tabs {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.ntp-compare--triple.ntp-compare-mobile-narrow .ntp-mobile-compare-spec,
	.ntp-compare--triple.ntp-compare-mobile-narrow .ntp-compare-metrics {
		min-width: 0;
		width: 100%;
		table-layout: fixed;
	}

	/* Contain scroll to the compare module — no document sideways drift */
	.ntp-compare--triple.ntp-compare-mobile-narrow .ntp-compare-spec-scroll {
		overflow-x: hidden;
		overflow-y: visible;
		overscroll-behavior-x: contain;
		touch-action: pan-y;
	}

	.ntp-compare--triple.ntp-compare-mobile-narrow .ntp-mobile-compare-spec th:first-child,
	.ntp-compare--triple.ntp-compare-mobile-narrow .ntp-mobile-compare-spec td:first-child {
		width: 32%;
		min-width: 0;
		max-width: 10rem;
	}

	.ntp-compare--triple.ntp-compare-mobile-narrow .ntp-mobile-compare-spec th[data-ntp-compare-dcol],
	.ntp-compare--triple.ntp-compare-mobile-narrow .ntp-mobile-compare-spec td[data-ntp-compare-dcol] {
		min-width: 0;
		width: 34%;
		vertical-align: top;
		word-break: break-word;
	}

	.ntp-compare--triple.ntp-compare-mobile-narrow.ntp-compare-pair--01 [data-ntp-compare-dcol='2'],
	.ntp-compare--triple.ntp-compare-mobile-narrow.ntp-compare-pair--12 [data-ntp-compare-dcol='0'],
	.ntp-compare--triple.ntp-compare-mobile-narrow.ntp-compare-pair--02 [data-ntp-compare-dcol='1'] {
		display: none !important;
	}

	/* Pair picker: scroll-snap for fast thumb access */
	.ntp-compare-mobile-pair-tabs .no-scrollbar {
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0.25rem;
	}

	.ntp-compare-mobile-pair-tabs [data-ntp-compare-pair] {
		scroll-snap-align: start;
	}
}