/*
 * hub.css — the six cluster hubs, plus /start-here/.
 * Source: /design/category-pages.md
 *
 * A hub reads top-to-bottom as a guide and routes to its spokes at every
 * section boundary, so the layout is an article's measure with a rail bolted
 * on — not a card wall. The rail carries the TOC and nothing else; a 2,500 to
 * 4,000-word page needs wayfinding, and those jump links double as SERP
 * sitelink candidates.
 */

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.ait-hub__header {
	margin-bottom: var(--s-6);
}

.ait-hub__eyebrow {
	margin: 0 0 var(--s-3);
}

.ait-hub__title {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
}

.ait-hub__promise {
	margin: 0 0 var(--s-3);
	font-size: 1.125rem;
	line-height: var(--lh-body);
}

.ait-hub__updated {
	margin: 0;
	color: var(--c-ink-muted);
	font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------------
 * Layout — single column on mobile, rail from 1024px
 *
 * The rail is second in the DOM on purpose: on a phone the reader wants the
 * lead magnet and the prose, not a table of contents, and source order is what
 * a screen reader and a keyboard follow. `order` moves it visually on desktop
 * without disturbing either.
 * ------------------------------------------------------------------------ */

.ait-hub__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
}

.ait-hub__body {
	min-width: 0;
}

@media (min-width: 1024px) {
	.ait-hub__layout {
		grid-template-columns: var(--rail) minmax(0, 1fr);
		gap: var(--s-8);
	}

	.ait-hub__rail {
		order: -1;
		align-self: start;
		position: sticky;
		top: calc(var(--header-h-lg) + var(--s-4));
	}
}

/* ---------------------------------------------------------------------------
 * TOC
 * ------------------------------------------------------------------------ */

.ait-hub__toc {
	padding: var(--s-4);
	border: var(--border-hair);
	border-radius: var(--r-md);
	background: var(--c-surface);
}

.ait-hub__toc-summary {
	color: var(--c-primary);
	font-weight: 700;
	font-size: var(--fs-small);
	cursor: pointer;
}

.ait-hub__toc-summary:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.ait-hub__toc-list {
	margin: var(--s-3) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: ait-toc;
}

.ait-hub__toc-list > li {
	margin: 0 0 var(--s-2);
}

.ait-hub__toc-list > li::marker,
.ait-hub__toc-list > li::before {
	content: none;
}

.ait-hub__toc-list a {
	color: var(--c-ink);
	font-size: var(--fs-small);
	line-height: var(--lh-tight);
	text-decoration: none;
}

.ait-hub__toc-list a:hover {
	color: var(--c-primary);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Sections
 * ------------------------------------------------------------------------ */

.ait-hub__section {
	margin-top: var(--s-8);
}

.ait-hub__section-title {
	margin: 0 0 var(--s-5);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	scroll-margin-top: var(--scroll-margin);
}

.ait-hub__section-more {
	margin-top: var(--s-4);
	font-weight: 600;
}

.ait-hub__group-title {
	margin: var(--s-6) 0 var(--s-3);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

/* ---------------------------------------------------------------------------
 * "Every guide in this topic" — the completionist and crawler view
 *
 * Compact rows, no images. This list exists so linking rule 3 stays true at any
 * spoke count without the editorial sections above turning into a wall of
 * links, so it is styled to be skimmed, not browsed.
 * ------------------------------------------------------------------------ */

.ait-hub__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--border-hair);
}

.ait-hub__list-item {
	margin: 0;
	padding-block: var(--s-3);
	border-bottom: var(--border-hair);
}

.ait-hub__list-item::before {
	content: none;
}

.ait-hub__list-item > a {
	font-weight: 600;
}

.ait-hub__why {
	display: block;
	margin-top: 2px;
	color: var(--c-ink-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-tight);
}

.ait-hub__onward {
	padding-top: var(--s-6);
	border-top: var(--border-hair);
}

/* ---------------------------------------------------------------------------
 * /start-here/ — the same shell, a different content model
 * ------------------------------------------------------------------------ */

.ait-start__header {
	margin-bottom: var(--s-6);
}

.ait-start__title {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
}

.ait-start__promises {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ait-start__promises > li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0;
	font-size: var(--fs-small);
	font-weight: 600;
}

.ait-start__promises > li::before {
	content: none;
}

.ait-start__promises .ait-icon {
	flex: none;
	color: var(--c-primary-light);
}

.ait-start__section {
	margin-top: var(--s-8);
}

.ait-start__section-title {
	margin: 0 0 var(--s-5);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

/*
 * The starter-kit band. No product mention anywhere on this page — trust before
 * commerce for the most anxious segment on the site (category-pages.md §6) —
 * which is why this is the only boxed offer here.
 */
.ait-start__kit {
	margin-top: var(--s-8);
	padding: var(--s-6) var(--s-5);
	border-radius: var(--r-lg);
	background: var(--c-band);
}