/*
 * 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 band carries the group's illustration, its name and its size.
 * dev-073: the band itself (spacing + the bottom rule) lives on the row
 * wrapper so the rule spans the image and the heading alike; the `<h2>` keeps
 * its own flex row for name + count. The count is the number of cards the
 * section actually renders, recomputed on every request.
 */
.kl-disease-groups__head {
	display: flex;
	align-items: center;
	gap: var(--kl-space-4);
	margin: 0 0 var(--kl-space-5);
	padding-bottom: var(--kl-space-3);
	border-bottom: 1px solid var(--kl-border);
}

/*
 * The group illustration: natural 16:10, drawn small and never cropped -
 * `height: auto` keeps the delivered ratio (the card media's crop capsule is
 * deliberately not reused here, so no part of the drawing is cut off).
 */
.kl-disease-groups__media {
	flex: 0 0 auto;
	width: clamp(96px, 18vw, 176px);
	margin: 0;
	overflow: hidden;
	border-radius: var(--kl-radius-card);
	background: var(--kl-paper-alt);
}

.kl-disease-groups__media img {
	display: block;
	width: 100%;
	height: auto;
}

.kl-disease-groups__heading {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--kl-space-3);
	min-width: 0;
	margin: 0;
}

.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 when its own anchor is targeted - no
 * decoration, no numbering: the heading is a landmark, not a counter. dev-073
 * moved the band onto the row wrapper, so the selector follows it (descendant
 * instead of direct child); the class is unique inside its own section, so the
 * highlight behaves exactly as before.
 */
.kl-disease-groups__section:target .kl-disease-groups__head {
	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);
	}

	/* dev-073: at 390 the illustration takes its clamp minimum (96px), so the
	   row tightens its gap to keep the title readable beside it. */
	.kl-disease-groups__head {
		gap: var(--kl-space-3);
	}
}