/*
 * Disease archive, `/diseases/` + `/zh/diseases/` (dev-066).
 *
 * The archive renders one section per body system. The rules here are the
 * section rhythm and the jump bar; the cards keep the standing `.kl-card` /
 * `.kl-card-list` styles in style.css, so the two listings stay one component.
 *
 * Written against the tokens in assets/css/tokens.css - no literal colour or
 * spacing values - and scoped under `.kl-archive--diseases`, so no other page
 * can be affected. Loaded by `archive-kl_disease.php`, after `style.css`.
 */

/* ----------------------------------------------------------- Jump bar --- */

/*
 * Two rows of chips would push the first section past the fold, so the row
 * scrolls sideways at narrow widths (the pattern the directory facets already
 * use) and wraps when there is room for it.
 */
.kl-archive--diseases .kl-disease-groups__jump {
	margin: 0 0 var(--kl-space-7);
}

.kl-archive--diseases .kl-disease-groups__jump .kl-chips {
	flex-wrap: wrap;
}

.kl-archive--diseases .kl-disease-groups__jump .kl-chip {
	gap: var(--kl-space-2);
}

.kl-archive--diseases .kl-disease-groups__jump .kl-chip .kl-num {
	color: var(--kl-slate);
	font-size: var(--kl-text-xs);
}

.kl-archive--diseases .kl-disease-groups__jump .kl-chip:hover .kl-num {
	color: inherit;
}

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

.kl-disease-groups__section + .kl-disease-groups__section {
	margin-top: var(--kl-space-8);
}

/*
 * The heading carries the group's name and its size. The count is the number
 * of cards the section actually renders, recomputed on every request.
 */
.kl-disease-groups__heading {
	display: flex;
	align-items: baseline;
	gap: var(--kl-space-3);
	margin: 0 0 var(--kl-space-5);
	padding-bottom: var(--kl-space-3);
	border-bottom: 1px solid var(--kl-border);
}

.kl-disease-groups__name {
	font-size: var(--kl-text-xl);
	font-weight: var(--kl-weight-semibold);
	line-height: var(--kl-leading-tight);
}

.kl-disease-groups__count {
	color: var(--kl-slate);
	font-size: var(--kl-text-sm);
}

/*
 * Colour the section heading band on hover of its own anchor only - no
 * decoration, no numbering: the heading is a landmark, not a counter.
 */
.kl-disease-groups__section:target > .kl-disease-groups__heading {
	border-bottom-color: var(--kl-accent-ring);
}

/* --------------------------------------------------------- Card rhythm --- */

/*
 * test-001 (B28): the archive adds the ICD-10 line (dev-061 v2) and the
 * specialty line (dev-066) above the alias chips, and at 1280 those lines run
 * to one or two lines from card to card - the overview then started 22px
 * apart inside one grid row. The dev-048 rhythm reserves the title's two
 * lines and the chip cloud's two rows; these two lines reserve their own
 * two-line height here (measured 22px per line at the current type scale), so
 * every card in a row starts its overview on the same line again.
 * `/zh/diseases/` shares the template and keeps the same rhythm.
 */
.kl-archive--diseases .kl-card__icd,
.kl-archive--diseases .kl-card__meta {
	min-height: 44px;
}

@media (max-width: 640px) {
	.kl-archive--diseases .kl-disease-groups__jump {
		margin-bottom: var(--kl-space-6);
	}

	.kl-disease-groups__section + .kl-disease-groups__section {
		margin-top: var(--kl-space-7);
	}
}