/*
 * Layer: templates. The article page (kit pages/article.html .page/.article): meta, title with
 * the red full stop, the prose column, tags and "More from". Prose, media and the password form
 * are global components (components/prose.css, media.css, forms.css); rows are rows.css.
 */
@layer templates {

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

	.nd-single {
		padding-block: 32px 120px;
	}

	.nd-article > *,
	.nd-article__head > * {
		margin-block: 0;
	}

	/* Head (kit .article__head). */
	.nd-article__head {
		margin-block-end: 40px;
	}

	/* Kit .nd-meta: categories above the title, the date below it. */
	.nd-article__head .nd-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 14px;
		color: var(--wp--preset--color--ink-muted);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 400;
		line-height: 1.4;
	}

	.nd-article__head .nd-meta > * {
		margin: 0;
		color: inherit;
		font-size: inherit;
	}

	.nd-article__head .nd-meta a {
		color: var(--wp--preset--color--brand-deep);
		text-decoration: none;
	}

	.nd-article__head .nd-meta a:hover {
		color: var(--wp--preset--color--brand);
	}

	/* Kit: "25 Mar 2024 · by Lonny Jarrett" — the separator is decorative. */
	.nd-article__head .nd-byline::before {
		content: "·" / "";
		margin-inline-end: 14px;
	}

	.nd-article__head .nd-article__title {
		margin-block: 18px 20px;
		text-wrap: balance;
	}

	/* Course items: the parent course in the categories' place, with a back arrow. */
	.nd-article__head .nd-course-back a::before {
		content: "←" / "";
		margin-inline-end: 8px;
	}

	.nd-article__head .nd-course-back:empty {
		display: none;
	}

	/* Tags (kit .article__tags + .tag, drawn as .nd-tag). */
	.nd-article__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-block-start: 32px;
	}

	/* More from (kit .article__foot). */
	.nd-article > .nd-more {
		margin-block-start: 72px;
	}

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

	/* Kit .article__foot .nd-display-s is 36px at desktop (the display-s preset is 30–40). */
	.nd-more .nd-more__title {
		margin-block: 56px 8px;
		font-size: min(36px, var(--wp--preset--font-size--display-s));
		text-wrap: balance;
	}

	.nd-more .nd-more__cta {
		margin-block-start: 28px;
	}

	@media (max-width: 1100px) {

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