/*
 * Layer: components. Index pages (kit pages/library.html + courses.html .page): the head
 * (eyebrow, title with the red full stop, lead) and the toolbar with the labelled search.
 * Shared by templates/library.css (home, archive, search) and templates/archive-courses.css.
 */
@layer components {

	/* Kit .page: the column runs straight into the footer. */
	.wp-site-blocks > .nd-index,
	.wp-site-blocks > .nd-index + * {
		margin-block-start: 0;
	}

	.nd-index {
		padding: 32px var(--wp--style--root--padding-right) 120px var(--wp--style--root--padding-left);
	}

	.nd-index > *,
	.nd-index__head > * {
		margin-block: 0;
	}

	/* Kit .index-head. */
	.nd-index__head {
		max-width: 820px;
		margin: 24px 0 56px;
	}

	/* The kit's eyebrow is inline-flex, so it sits in a body-height line box. */
	.nd-index__head .nd-eyebrow {
		padding-block: 8px 6px;
	}

	.nd-index__title {
		margin: 18px 0 22px;
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--display-page);
		font-weight: 500;
		line-height: var(--wp--custom--line-height--display-l);
		letter-spacing: var(--wp--custom--tracking--display);
		text-wrap: balance;
	}

	.nd-index__lead,
	.nd-index__lead p {
		margin: 0;
		color: var(--wp--preset--color--ink-soft);
		font-size: var(--wp--preset--font-size--lead);
		line-height: var(--wp--custom--line-height--body);
		text-wrap: pretty;
	}

	/* Kit .toolbar: the left side (chips or a note) and the 320px search. */
	.nd-toolbar {
		display: flex;
		gap: 24px;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;
	}

	.nd-toolbar > * {
		margin-block: 0;
	}

	.nd-toolbar__note {
		color: var(--wp--preset--color--ink-soft);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
	}

	/* Core search with no button: the input is base.css's .nd-input; the label is screen-reader text. */
	/* The kit's 320px input shrinks beside a long chip row. */
	.nd-search {
		flex: 0 1 320px;
		min-width: 225px;
	}

	.nd-search .wp-block-search__inside-wrapper {
		padding: 0;
		border: 0;
	}

	.nd-search .wp-block-search__input {
		width: 100%;
		margin: 0;
	}

	/* The kit's one breakpoint. */
	@media (max-width: 1100px) {

		.nd-index {
			padding-block: 16px 80px;
		}

		.nd-toolbar {
			flex-direction: column;
			align-items: stretch;
		}

		.nd-search {
			flex-basis: auto;
			min-width: 0;
		}
	}
}