/*
 * Flagship comparison page.
 * Reuses .lpa-wrap, .lpa-section, .lpa-eyebrow, .lpa-lede, .lpa-crumbs and the
 * approved .lpa-verdict callout from global.css / product.css / market.css.
 * Colours are the theme.json tokens (primary oklch(0.5 0.15 251.66), primary-dark #004A8B,
 * ink oklch(0.25 0.04 245.54), muted oklch(0.52 0.03 245.11), hairline oklch(0.94 0.01 248.12), surface-blue #f0f6fc); spacing
 * uses the 4/8/12/16/24/32/48/64 scale and the 8/12 radius tokens.
 */

.lpa-comparison-page { padding-bottom: 64px; }

.lpa-cmp-head { margin-top: 24px; }
.lpa-cmp-head h1 { margin: 4px 0 12px; }

/* Small neutral note under section headings. */
.lpa-cmp-note {
	color: oklch(0.52 0.03 245.11);
	font-size: 0.95rem;
	max-width: 65ch;
	margin-bottom: 24px;
}

/* ---- Layer 1: factual spine ---- */

.lpa-cmp-group {
	font-size: 1.05rem;
	color: oklch(0.25 0.04 245.54);
	margin: 24px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid oklch(0.94 0.01 248.12);
}

.lpa-cmp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.lpa-cmp-card {
	border: 1px solid oklch(0.94 0.01 248.12);
	border-radius: 12px;
	padding: 24px;
	background: #ffffff;
}

.lpa-cmp-card-name { margin: 0 0 12px; font-size: 1.1rem; }
.lpa-cmp-card-name a { color: oklch(0.25 0.04 245.54); }
.lpa-cmp-card-name a:hover { color: oklch(0.5 0.15 251.66); }

.lpa-cmp-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0 0 12px;
}

.lpa-cmp-fact { display: flex; gap: 8px; align-items: baseline; }
.lpa-cmp-fact dt {
	flex: 0 0 128px;
	color: oklch(0.52 0.03 245.11);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.lpa-cmp-fact dd { margin: 0; color: oklch(0.25 0.04 245.54); }

.lpa-cmp-specs {
	list-style: none;
	margin: 0 0 12px;
	padding: 12px 0 0;
	border-top: 1px solid oklch(0.94 0.01 248.12);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}
.lpa-cmp-specs li { font-size: 0.9rem; color: oklch(0.25 0.04 245.54); }
.lpa-cmp-spec-label { color: oklch(0.52 0.03 245.11); }

.lpa-cmp-more { margin: 0; }

/* ---- Layer 2: editorial verdicts ----
 * The section carries the approved .lpa-verdict callout (border oklch(0.5 0.15 251.66),
 * 4px left, radius 12px, surface-blue background, 24px padding); only the
 * extra separation from the spine is added here.
 */

.lpa-cmp-verdicts { margin-top: 64px; }

.lpa-cmp-editorial-flag {
	font-size: 0.9rem;
	color: #004A8B;
	background: #f0f6fc;
	border: 1px solid oklch(0.94 0.01 248.12);
	border-radius: 8px;
	padding: 12px 16px;
	margin: 0 0 24px;
	max-width: 70ch;
}

.lpa-cmp-verdict {
	background: #ffffff;
	border: 1px solid oklch(0.94 0.01 248.12);
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 16px;
}
.lpa-cmp-verdict:last-of-type { margin-bottom: 0; }

.lpa-cmp-verdict-seg {
	margin: 0 0 8px;
	font-size: 1.05rem;
	color: #004A8B;
}
.lpa-cmp-verdict-pick {
	margin: 0 0 8px;
	font-weight: 600;
	color: oklch(0.25 0.04 245.54);
}
.lpa-cmp-verdict-text { margin: 0; color: oklch(0.25 0.04 245.54); }

.lpa-cmp-verdict-pending { color: oklch(0.52 0.03 245.11); }

.lpa-cmp-method { margin: 24px 0 0; }

/* ---- Responsive: two-up cards on wider viewports ---- */
@media (min-width: 640px) {
	.lpa-cmp-grid { grid-template-columns: repeat(2, 1fr); }
}