/* ============================================================
   TBP Reach — dedicated hub page (place/topic/person/org archives)
   Clean, local, no map. Replaces the old term_description-based badge.
   Enqueued only on a live hub tag's archive (tbp_reach_hub_assets(),
   includes/hub-render.php); rendered by tbp_reach_render_hub_page().

   Uses the theme's own tokens (tokens.css/app.css) where they exist,
   each falling back to the approved mock's own values so the page still
   reads correctly if loaded standalone. Logical (inline/start-end)
   properties throughout so the layout holds up under both LTR and RTL
   (html[dir]) — flex/grid row order already follows the inline axis
   automatically; only the Urdu text nodes need an explicit dir="rtl".
   ============================================================ */

.tbp-reach-hubpage {
	max-width: 860px;
	margin-inline: auto;
	padding-inline: 20px;
	padding-block: var(--s-8, 32px) var(--s-16, 64px);
	color: var(--ink-900, #17140f);
	font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* ── Header ─────────────────────────────────────────────── */
.tbp-reach-hub-kick {
	font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--red, #b0070f);
	text-transform: uppercase;
	font-weight: 600;
}
.tbp-reach-hub-title {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin: 8px 0 0;
}
.tbp-reach-hub-title h1 {
	font-family: var(--font-display, "Source Serif 4", Georgia, "Times New Roman", serif);
	font-size: clamp(28px, 4vw, 40px);
	margin: 0;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--ink-900, #17140f);
}
.tbp-reach-hub-ur {
	font-family: var(--font-urdu, "Noto Naskh Arabic", "Noto Sans Arabic", serif);
	font-size: 27px;
	color: var(--ink-700, #3b352b);
}
.tbp-reach-hub-rule {
	height: 3px;
	width: 52px;
	background: var(--red, #b0070f);
	margin: 14px 0 16px;
	border-radius: 2px;
}
.tbp-reach-hub-lead {
	font-family: var(--font-display, "Source Serif 4", Georgia, "Times New Roman", serif);
	font-size: 20px;
	line-height: 1.5;
	color: var(--ink-800, #2b261e);
	max-width: 64ch;
	margin: 0 0 6px;
	font-weight: 400;
}
.tbp-reach-hub-lead-ur {
	font-family: var(--font-urdu, "Noto Naskh Arabic", "Noto Sans Arabic", serif);
	font-size: 19px;
	line-height: 1.9;
}

/* ── Facts strip — skipped entirely in markup when empty ──── */
.tbp-reach-hub-facts {
	display: flex;
	flex-wrap: wrap;
	border-block: 1px solid var(--tbp-line, #e7e3da);
	margin-top: 20px;
}
.tbp-reach-hub-facts > div {
	padding: 12px 18px;
	border-inline-end: 1px solid var(--tbp-line, #e7e3da);
	font-size: 13.5px;
	color: var(--ink-700, #3d382e);
}
.tbp-reach-hub-facts > div:last-child { border-inline-end: 0; }
.tbp-reach-hub-facts b {
	display: block;
	font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 9.5px;
	letter-spacing: .11em;
	color: var(--ink-500, #8a8478);
	text-transform: uppercase;
	margin-bottom: 3px;
	font-weight: 600;
}

/* ── Body / section heads ───────────────────────────────── */
.tbp-reach-hub-body { padding-top: 22px; }
.tbp-reach-hub-sechead {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 6px;
}
.tbp-reach-hub-sechead h2 {
	font-family: var(--font-display, "Source Serif 4", Georgia, "Times New Roman", serif);
	font-size: 16px;
	margin: 0;
	font-weight: 600;
}
.tbp-reach-hub-line { flex: 1; height: 1px; background: var(--tbp-line, #e7e3da); }

/* ── Reading list — "Latest from {name}" ────────────────── */
.tbp-reach-hub-list a {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 18px;
	align-items: baseline;
	padding: 16px 0;
	border-top: 1px solid var(--tbp-line, #e7e3da);
	text-decoration: none;
	color: inherit;
}
.tbp-reach-hub-list a:first-of-type { border-top: 0; }
.tbp-reach-hub-list h3 {
	font-family: var(--font-display, "Source Serif 4", Georgia, "Times New Roman", serif);
	font-size: 19px;
	margin: 0 0 5px;
	line-height: 1.25;
	color: var(--ink-900, #17140f);
}
.tbp-reach-hub-list a:hover h3 { color: var(--red, #b0070f); }
.tbp-reach-hub-list p {
	margin: 0;
	color: var(--ink-600, #635d51);
	font-size: 13px;
	line-height: 1.5;
	max-width: 70ch;
}
.tbp-reach-hub-k {
	font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--red, #b0070f);
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 4px;
}
.tbp-reach-hub-d {
	font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 11px;
	color: var(--ink-500, #8a8478);
	white-space: nowrap;
}

/* ── Related chips (tbp_reach_related_rail() output — markup unchanged
   from the old enrichment path, just restyled as pills here) ────────── */
.tbp-reach-related {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
}
.tbp-reach-related a {
	display: inline-block;
	border: 1px solid var(--tbp-line-2, var(--tbp-line, #d8d3c8));
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 13px;
	color: var(--ink-700, #453f34);
	background: var(--paper, #fff);
	text-decoration: none;
}
.tbp-reach-related a:hover { border-color: var(--red, #b0070f); color: var(--red, #b0070f); }

@media (max-width: 700px) {
	.tbp-reach-hub-title h1 { font-size: 28px; }
	.tbp-reach-hub-facts > div { flex: 1 1 45%; }
	.tbp-reach-hub-list a { grid-template-columns: 1fr; gap: 4px; }
	.tbp-reach-hub-d { order: -1; }
}