/*
 * Landing Pad Asia: category hub component styles
 * Matches design/category-hub-mockup.html component-for-component, using the
 * same tokens. Hero, at-a-glance, section spacing, .lpa-faq and .lpa-compare-cta
 * are reused from product.css; .lpa-prose is reused from market.css.
 */

/* ---- Main content spacing ---- */

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

.lpa-empty-note { color: oklch(0.52 0.03 245.11); }

/* ---- Model list (the models this explainer covers) ---- */

.lpa-model-list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr;
}

.lpa-model-list li { margin: 0; }

.lpa-model-list a {
	display: block;
	padding: 16px 24px;
	border: 1px solid oklch(0.94 0.01 248.12);
	border-radius: 8px;
	background: #fff;
	font-weight: 600;
	color: oklch(0.25 0.04 245.54);
	text-decoration: none;
}

.lpa-model-list a:hover {
	border-color: oklch(0.5 0.15 251.66);
	color: oklch(0.5 0.15 251.66);
	text-decoration: underline;
}

.lpa-model-list a:focus-visible {
	outline: 3px solid oklch(0.5 0.15 251.66);
	outline-offset: 2px;
}

/* At a glance demoted to a freshness footer rather than a page header. */
.lpa-glance-compact { margin-top: 32px; }

.lpa-hub-outbound { margin: 16px 0 0; font-weight: 600; }

/* ---- Quick picks ---- */

.lpa-picks {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

.lpa-picks li {
	border: 1px solid oklch(0.94 0.01 248.12);
	border-left-width: 4px;
	border-left-color: oklch(0.5 0.15 251.66);
	border-radius: 8px;
	padding: 24px;
	background: #f7fafc;
}

.lpa-picks .lpa-for {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: oklch(0.52 0.03 245.11);
	font-weight: 700;
	margin: 0 0 2px;
}

.lpa-picks .lpa-who { font-weight: 800; color: oklch(0.25 0.04 245.54); margin: 0; }

/* Keep the pick name looking like the mockup text while remaining a link. */
.lpa-picks .lpa-who a { color: inherit; text-decoration: none; }
.lpa-picks .lpa-who a:hover { color: oklch(0.5 0.15 251.66); text-decoration: underline; }

/* ---- Responsive ---- */

@media (min-width: 640px) {
	.lpa-picks { grid-template-columns: repeat(3, 1fr); }
	.lpa-model-list { grid-template-columns: repeat(2, 1fr); }
	.lpa-glance-compact { grid-template-columns: repeat(2, max-content); }
}