/* =========================================================================
   LTF Hub Guide — [hub_guide] rendering

   Reuses the events-hub-shell theme's variables so it matches the app shell,
   with dark literal fallbacks for the Phase 3 case where the shortcode is
   pulled onto an event site that does not run this theme.

   Deliberately NOT accordions. Tiffany, 2026-07-27, on the current event
   sites: "the accordions are out of hand." Everything renders open.
   ========================================================================= */

.ltf-hub-guide {
	--ltfg-bg: var(--color-surface, #313131);
	--ltfg-text: var(--color-text, #FFFFFF);
	--ltfg-muted: var(--color-text-muted, #9A9A9E);
	--ltfg-border: var(--color-border, rgba(255, 255, 255, 0.10));
	--ltfg-radius: var(--radius-md, 12px);
	--ltfg-sp2: var(--space-2, 8px);
	--ltfg-sp3: var(--space-3, 16px);
	--ltfg-sp5: var(--space-5, 32px);

	font-family: var(--font-sans, inherit);
	color: var(--ltfg-text);
}

.ltf-hub-guide__section {
	margin-bottom: var(--ltfg-sp5);
}

.ltf-hub-guide__section-title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 var(--ltfg-sp3);
	color: var(--ltfg-text);
}

.ltf-hub-guide__item {
	background: var(--ltfg-bg);
	border-radius: var(--ltfg-radius);
	padding: var(--ltfg-sp3);
	margin-bottom: var(--ltfg-sp2);
}

.ltf-hub-guide__item-title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 var(--ltfg-sp2);
	color: var(--ltfg-text);
}

/* The facts an athlete scans for, before any prose. */
.ltf-hub-guide__facts {
	margin: 0 0 var(--ltfg-sp2);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ltf-hub-guide__fact {
	display: flex;
	gap: var(--ltfg-sp2);
	font-size: 13px;
	line-height: 1.4;
}

.ltf-hub-guide__fact dt {
	flex: 0 0 52px;
	color: var(--ltfg-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 10px;
	font-weight: 700;
	padding-top: 2px;
}

.ltf-hub-guide__fact dd {
	margin: 0;
	color: var(--ltfg-text);
	font-weight: 600;
}

.ltf-hub-guide__body {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ltfg-muted);
}

.ltf-hub-guide__body p {
	margin: 0 0 var(--ltfg-sp2);
}

.ltf-hub-guide__body p:last-child {
	margin-bottom: 0;
}

.ltf-hub-guide__link {
	margin: var(--ltfg-sp2) 0 0;
	font-size: 13px;
	font-weight: 700;
}

.ltf-hub-guide__link a {
	color: var(--ltfg-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ltf-hub-guide--empty {
	background: var(--ltfg-bg);
	border-radius: var(--ltfg-radius);
	padding: var(--ltfg-sp3);
	color: var(--ltfg-muted);
}

.ltf-hub-guide--empty p {
	margin: 0;
}