/*
 * Educational Resources (/educational-resources/, #176). Not on Squarespace: a new page in the style of the
 * blog's reading list (page-posts.css, #163). Cream page, black text, a 1000px column, the heading over a
 * dark line with round links to the page's three parts. Each part (Books and Articles, Websites, Videos
 * and Podcasts) is a Resource list block (plugins/sacred-roots-site/blocks/resource-list): its topics in a
 * crimson column on the left, like the blog's years, and the resources on the right with thin lines
 * between. On phones the topic goes above its resources.
 * The header is cream with the black logo (inc/header-color.php, from the page's first section).
 */
.sr-edu {
	--sr-edu-gutter: 3vw;
	--sr-edu-line: color-mix(in srgb, currentColor 22%, transparent);
	--sr-edu-topic-column: 240px;
	padding-block: 70px 120px;
	font-size: clamp(18.16px, 17.68px + 0.1234vw, 19.456px);
	line-height: 1.6;
}

.wp-site-blocks > main:has(.sr-edu) {
	margin-block-start: 0;
}

.sr-edu > * {
	box-sizing: content-box;
	max-width: 1000px;
	margin-inline: auto;
	padding-inline: var(--sr-edu-gutter);
}

.sr-edu > * + * {
	margin-block-start: 0;
}

.sr-edu :where(h1, h2, h3, h4, p) {
	text-wrap: wrap;
}

.sr-edu a {
	color: inherit;
	text-decoration: none;
}

/* Heading and the links to the three parts, over a dark line (as the blog's heading and filter buttons). */
.sr-edu .sr-edu__head > * {
	margin-block: 0;
}

.sr-edu .sr-edu__title {
	font-size: clamp(40px, 34.06px + 1.524vw, 56px);
	font-weight: 400;
	line-height: 1.2;
}

.sr-edu .sr-edu__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 22px;
	padding: 0 0 24px;
	border-block-end: 1px solid currentColor;
	list-style: none;
}

.sr-edu .sr-edu__jump li {
	margin: 0;
}

.sr-edu .sr-edu__jump a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 7px 16px;
	border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	border-radius: 999px;
	font-size: 16px;
	line-height: 24px;
}

.sr-edu .sr-edu__jump a:hover {
	border-color: currentColor;
}

/* A part of the page: its heading, then the list. Jump links land a little above the heading. */
.sr-edu .sr-edu__section {
	margin-block-start: 72px;
}

.sr-edu .sr-edu__section > * {
	margin-block: 0;
}

.sr-edu [id] {
	scroll-margin-block-start: 24px;
}

.sr-edu .sr-edu__kind {
	font-size: clamp(35.44px, 31.11px + 1.111vw, 47.104px);
	font-weight: 400;
	line-height: 1.2;
}

/* Links to each topic, under the part's heading. */
.sr-resources .sr-resources__topics ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: 1.5;
}

.sr-resources .sr-resources__topics li {
	margin: 0;
}

.sr-resources .sr-resources__topics a {
	color: var(--wp--preset--color--accent-1);
}

.sr-resources .sr-resources__topics a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* A topic: its name on the left, its resources on the right. */
.sr-resources {
	margin-block-start: 28px;
}

.sr-resources > * {
	margin-block: 0;
}

.sr-resources .sr-resources__group {
	display: grid;
	grid-template-columns: var(--sr-edu-topic-column, 240px) minmax(0, 1fr);
	align-items: start;
	margin-block-start: 28px;
	border-block-start: 1px solid var(--sr-edu-line, currentColor);
}

.sr-resources .sr-resources__topic {
	grid-column: 1;
	margin: 0;
	padding-block-start: 29px;
	padding-inline-end: 32px;
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--body);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
}

.sr-resources .sr-resources__list {
	grid-column: 2;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sr-resources .sr-resources__item {
	margin: 0;
	padding-block: 26px 28px;
}

.sr-resources .sr-resources__item + .sr-resources__item {
	border-block-start: 1px solid var(--sr-edu-line, currentColor);
}

.sr-resources .sr-resources__item > * {
	margin-block: 0;
}

.sr-resources .sr-resources__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.sr-resources .sr-resources__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.sr-resources .sr-resources__meta {
	margin-block-start: 6px;
	color: var(--wp--preset--color--accent-4);
	font-size: 15px;
	line-height: 1.4;
}

.sr-resources .sr-resources__meta > * + *::before {
	content: "·";
	margin-inline: 0.4em;
}

.sr-resources .sr-resources__description {
	margin-block-start: 12px;
	font-size: 17px;
	line-height: 1.55;
}

.sr-resources .sr-resources__description p {
	margin: 0;
}

.sr-resources .sr-resources__description p + p {
	margin-block-start: 0.7em;
}

.sr-resources .sr-resources__empty {
	margin-block-start: 28px;
	color: var(--wp--preset--color--accent-4);
}

@media (max-width: 767px) {
	.sr-edu {
		--sr-edu-gutter: 6vw;
		padding-block: 44px 80px;
	}

	.sr-edu .sr-edu__jump {
		margin-block-start: 24px;
	}

	.sr-edu .sr-edu__section {
		margin-block-start: 56px;
	}

	/* One topic link per line. */
	.sr-resources .sr-resources__topics ul {
		flex-direction: column;
	}

	.sr-resources .sr-resources__group {
		grid-template-columns: minmax(0, 1fr);
	}

	.sr-resources .sr-resources__topic,
	.sr-resources .sr-resources__list {
		grid-column: 1;
	}

	.sr-resources .sr-resources__topic {
		padding-block-start: 25px;
		padding-inline-end: 0;
		font-size: 22px;
	}

	.sr-resources .sr-resources__topic + .sr-resources__list > .sr-resources__item:first-child {
		padding-block-start: 16px;
	}

	.sr-resources .sr-resources__item {
		padding-block: 25px 28px;
	}

	.sr-resources .sr-resources__title {
		font-size: 23px;
		line-height: 1.25;
	}

	.sr-resources .sr-resources__description {
		font-size: 16px;
	}
}