/*
 * Landing Pad Asia: market overview component styles
 * Matches design/market-overview-mockup.html component-for-component, using the
 * same tokens. Hero, at-a-glance and section spacing are reused from product.css.
 */

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

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

/* ---- Section intro line under an h2 / hero ---- */

.lpa-section-intro {
	color: oklch(0.52 0.03 245.11);
	max-width: 65ch;
	margin: -8px 0 0;
}

/* ---- Editorial prose (about this market) ---- */

.lpa-prose { max-width: 68ch; }
.lpa-prose p { color: oklch(0.25 0.04 245.54); }
.lpa-prose p:last-child { margin-bottom: 0; }
/* Body-prose links carry a persistent underline so they are distinguishable from
 * surrounding text by shape, not colour alone (WCAG 1.4.1). The glossary term
 * (a.lpa-term, dotted) and external (a.lpa-link-external, arrow glyph) styles
 * already carry their own shape cue and are excluded so they are not overridden. */
.lpa-prose a:not(.lpa-term):not(.lpa-link-external) {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.lpa-prose h2 { margin: 48px 0 16px; }
.lpa-prose h3 { margin: 24px 0 12px; }
.lpa-prose ul, .lpa-prose ol { margin: 0 0 16px; padding-left: 1.25em; color: oklch(0.25 0.04 245.54); }
.lpa-prose li { margin-bottom: 8px; }

/* ---- Card grids (categories, popular products) ---- */

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

.lpa-card {
	border: 1px solid oklch(0.94 0.01 248.12);
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	color: oklch(0.25 0.04 245.54);
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s;
}

/* Hover affordance applies to the linked (live) cards only. */
a.lpa-card:hover {
	border-color: oklch(0.5 0.15 251.66);
	box-shadow: 0 1px 2px rgba(14, 36, 54, 0.04), 0 4px 16px rgba(14, 36, 54, 0.05);
	text-decoration: none;
}

.lpa-card .lpa-thumb {
	background: #f0f6fc;
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	color: oklch(0.5 0.15 251.66);
	border-bottom: 1px solid oklch(0.94 0.01 248.12);
}

.lpa-card .lpa-thumb svg { width: 76px; height: auto; }
.lpa-card .lpa-thumb img { width: 100%; height: 100%; object-fit: cover; }

.lpa-card .lpa-cbody {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.lpa-card h3 { color: oklch(0.25 0.04 245.54); }

.lpa-card .lpa-meta {
	color: oklch(0.52 0.03 245.11);
	font-size: 0.9rem;
	font-weight: 600;
}

.lpa-card .lpa-card-price {
	margin-top: auto;
	padding-top: 8px;
	font-weight: 800;
	color: oklch(0.25 0.04 245.54);
}

.lpa-card .lpa-card-price span {
	font-weight: 600;
	color: oklch(0.52 0.03 245.11);
	font-size: 0.85rem;
}

.lpa-card .lpa-soon {
	align-self: flex-start;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 700;
	color: oklch(0.52 0.03 245.11);
	border: 1px solid oklch(0.94 0.01 248.12);
	border-radius: 999px;
	padding: 2px 10px;
}

/* ---- Trust strip (how we rank) ---- */

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

.lpa-trust li {
	border: 1px solid oklch(0.94 0.01 248.12);
	border-radius: 8px;
	padding: 24px;
	background: #f7fafc;
}

.lpa-trust h3 { margin-bottom: 8px; }

.lpa-trust p {
	margin: 0;
	color: oklch(0.52 0.03 245.11);
	font-size: 0.95rem;
}

.lpa-how-method { margin-top: 16px; }

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

@media (min-width: 640px) {
	.lpa-cards { grid-template-columns: repeat(2, 1fr); }
	.lpa-trust { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	.lpa-cards-three { grid-template-columns: repeat(3, 1fr); }
}

/* Single-market card grid: one card renders as a single full-width column */
/* instead of being stranded in the 2-up/3-up track. Placed after the responsive */
/* rules so it overrides those tracks for the one-card case at every width. */
.lpa-cards-one { grid-template-columns: 1fr; }

/* ---- Editorial flag (prose) ----
 * A visibly distinct callout for a marked, dated Landing Pad Asia judgement
 * inside prose bodies, mirroring the comparison page's fact/opinion separation
 * with the .lpa-verdict tokens (surface-blue, 4px primary left border).
 */
.lpa-prose .lpa-editorial-flag {
	background: #f0f6fc;
	border-left: 4px solid oklch(0.5 0.15 251.66);
	border-radius: 8px;
	padding: 16px 24px;
	color: #004A8B;
	font-size: 0.95rem;
}