/*
 * Slovník pojmov page glue. design/PAGE-STRUCTURE.md §8.
 *
 * The glossary control, the group and the hairline term grid are in
 * components/glossary.css. What is left here is the one page's layout: the head
 * row that puts the search beside the h1, the lede and the trailing link row.
 */

.sp-glossary__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
}

/* The prototype's glossary h1 is weight 800, not the 900 of a display heading. */
.sp-glossary-page .sp-heading--page .sp-heading__title {
	font-weight: 800;
}

.sp-glossary__lead {
	margin: var(--sp-4) 0 0;
	max-width: 640px;
	font-size: var(--sp-fs-base);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-55);
}

.sp-glossary__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	/* TODO token: link row gap clamp(30px,4vw,48px) / clamp(24px,3vw,36px). */
	margin-top: clamp(30px, 4vw, 48px);
	padding-top: clamp(24px, 3vw, 36px);
	border-top: 1px solid var(--sp-line);
}