/*
 * Blog: the /posts/ list, category and tag pages (templates home, category and tag, which share the
 * parts/posts-grid.html part) and single posts (templates/single-post.html).
 *
 * Sizes and spacing were measured on sacredrootscommunity.org/posts at 1440px and 390px wide; clamp()
 * scales linearly between the two, like Squarespace. Cream page, black text, crimson links, as on
 * Squarespace. The header keeps the site-wide crimson-deep (Squarespace's is cream on these pages).
 * Post bodies come from Squarespace (setup/data/posts.json); `sr-text-large`/`sr-text-small` are its
 * "large" and "small" paragraph styles.
 */
.sr-posts,
.sr-post {
	--sr-posts-meta: clamp(18.16px, 17.68px + 0.1234vw, 19.456px);
	--sr-posts-h1: clamp(48.4px, 41.18px + 1.851vw, 67.84px);
	--sr-posts-h2: clamp(35.44px, 31.11px + 1.111vw, 47.104px);
	--sr-posts-h3: clamp(28.96px, 26.07px + 0.7406vw, 36.736px);
	--sr-posts-large: clamp(21.4px, 20.2px + 0.3086vw, 24.64px);
	--sr-posts-gutter: 3vw;
	font-size: var(--sr-posts-meta);
	line-height: 1.6;
}

@media (max-width: 767px) {
	.sr-posts,
	.sr-post {
		--sr-posts-gutter: 6vw;
	}
}

/* The page runs straight on from the header, and the footer straight on from the page. */
.wp-site-blocks > .wp-block-template-part:has(> .sr-posts) {
	margin-block-start: 0;
}

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

/* Links don't change on hover (Squarespace). Text links in posts stay underlined, in crimson. */
.sr-posts a,
.sr-post a {
	color: inherit;
	text-decoration: none;
}

.sr-posts a:hover,
.sr-post a:hover {
	text-decoration: none;
}

/*
 * List: two columns (one on phones) of image, category and date, title, excerpt and "Read More".
 */
.sr-posts .wp-block-query {
	padding: 3vw var(--sr-posts-gutter);
}

.sr-posts .sr-posts__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 50px 30px;
	margin: 0;
	padding: 0;
}

.sr-posts .sr-posts__grid > .wp-block-post {
	margin: 0;
}

.sr-posts__grid > .wp-block-post > * {
	margin-block: 0;
}

@media (max-width: 767px) {
	.sr-posts .sr-posts__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 30px;
	}
}

.sr-posts .sr-posts__image img {
	display: block;
}

.sr-posts .sr-posts__meta {
	gap: 0;
	margin-block-start: clamp(20px, 8.49px + 2.952vw, 51px);
	font-size: var(--sr-posts-meta);
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.sr-posts .sr-posts__meta > *,
.sr-post .sr-post__meta > *,
.sr-post .sr-post__tags {
	margin: 0;
	font-size: var(--sr-posts-meta);
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.sr-posts .sr-posts__meta > .wp-block-post-terms + .wp-block-post-date::before,
.sr-post .sr-post__meta > * + *::before {
	content: "•";
	margin-inline: 0.75em;
}

.sr-posts .sr-posts__title {
	margin-block: clamp(7.8px, -3.05px + 2.781vw, 37px) 30px;
	font-size: var(--sr-posts-h3);
	font-weight: 400;
	line-height: 1.4;
}

.sr-posts .sr-posts__excerpt,
.sr-posts .sr-posts__excerpt p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

.sr-posts .sr-posts__more {
	display: inline-block;
	padding-block-start: clamp(7.8px, -3.05px + 2.781vw, 37px);
	color: var(--wp--preset--color--accent-1);
	font-size: 16px;
	line-height: 1.6;
}

.sr-posts a.sr-posts__more {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sr-posts .sr-posts__pagination {
	margin-block-start: 50px;
	font-size: var(--sr-posts-meta);
}

/*
 * Single post: date and author, title, body, tags, author, then links to the newer and older posts.
 */
.sr-post .sr-post__article {
	box-sizing: content-box;
	max-width: 677px;
	margin: 0 auto;
	padding: clamp(23.4px, 16.05px + 1.886vw, 43.2px) var(--sr-posts-gutter) 0;
}

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

.sr-post .sr-post__meta {
	gap: 0;
	font-size: var(--sr-posts-meta);
	line-height: 1.2;
	letter-spacing: 0.02em;
}

/* "Written By <name>" on one line. */
.sr-post .sr-post__meta .wp-block-post-author {
	display: block;
	margin: 0;
}

.sr-post .sr-post__meta .wp-block-post-author__content {
	display: inline;
}

.sr-post .sr-post__meta .wp-block-post-author :is(.wp-block-post-author__byline, .wp-block-post-author__name) {
	display: inline;
	margin: 0;
	font-size: inherit;
}

.sr-post .sr-post__meta .wp-block-post-author__byline::after {
	content: " ";
}

.sr-posts .sr-posts__meta > *,
.sr-post .sr-post__meta > *,
.sr-post .sr-post__tags {
	color: inherit;
	font-weight: 400;
}

.sr-post .sr-post__title {
	margin-block: clamp(19px, 13.8px + 1.333vw, 33px) 50px;
	font-size: var(--sr-posts-h1);
	font-weight: 400;
	line-height: 1.4;
}

/* Body. */
.sr-post .sr-post__content > * {
	margin-block: 16px;
}

.sr-post .sr-post__content > :first-child {
	margin-block-start: 0;
}

.sr-post .sr-post__content :is(p, h2, h3, h4) {
	white-space: pre-wrap; /* As on Squarespace: double spaces and tabs in the text show. */
}

.sr-post .sr-post__content p {
	font-size: var(--sr-posts-meta);
	line-height: 1.6;
}

.sr-post .sr-post__content p.sr-text-large {
	font-size: var(--sr-posts-large);
}

.sr-post .sr-post__content p.sr-text-small {
	font-size: 16px;
}

.sr-post .sr-post__content :is(h2, h3, h4) {
	margin-block: 2rem;
	font-weight: 400;
}

.sr-post .sr-post__content h2 {
	font-size: var(--sr-posts-h2);
	line-height: 1.3;
}

.sr-post .sr-post__content h3 {
	font-size: var(--sr-posts-h3);
	line-height: 1.4;
}

.sr-post .sr-post__content h4 {
	font-size: var(--sr-posts-meta);
	line-height: 1.4;
}

.sr-post .sr-post__content > :is(h2, h3, h4):first-child {
	margin-block-start: 0;
}

.sr-post .sr-post__content > .wp-block-image {
	margin-block: 34px;
}

.sr-post .sr-post__content > .wp-block-image:first-child {
	margin-block-start: 0;
}

.sr-post .sr-post__content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.sr-post .sr-post__content .wp-block-quote {
	margin: 1em 40px;
	padding: 0;
	border: 0;
	font-size: var(--sr-posts-meta);
	font-style: normal;
	font-weight: 400;
}

.sr-post .sr-post__content .wp-block-quote > p {
	margin-block: 16px;
}

.sr-post .sr-post__content .wp-block-quote > :first-child {
	margin-block-start: 0;
}

.sr-post .sr-post__content .wp-block-quote > :last-child {
	margin-block-end: 0;
}

.sr-post .sr-post__content :is(ul, ol) {
	margin-block: 1em;
	padding-inline-start: 40px;
}

.sr-post .sr-post__content li {
	margin-block: 0.5em;
}

.sr-post .sr-post__content .wp-block-separator {
	margin-block: 34px;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 1;
}

.sr-post .sr-post__content a {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}

.sr-post .sr-post__tags {
	margin-block-start: clamp(10px, -8.57px + 4.762vw, 30px);
	font-size: var(--sr-posts-meta);
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.sr-post .sr-post__tags .wp-block-post-terms__separator {
	white-space: pre;
}

.sr-post .sr-post__author {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-block-start: clamp(20px, 2.57px + 4.762vw, 43.2px);
}

.sr-post .sr-post__author .wp-block-post-author__avatar {
	margin: 0;
	padding-block-start: 16px;
}

.sr-post .sr-post__author .wp-block-post-author__avatar img {
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.sr-post .sr-post__author .wp-block-post-author__content {
	flex-basis: auto;
}

.sr-post .sr-post__author .wp-block-post-author__name {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.6;
}

/* Newer post on the left, older on the right, each with a thin chevron. */
.sr-post .sr-post__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 44px;
	margin-block-start: clamp(34px, 14.69px + 4.952vw, 86px);
	padding: 3vw var(--sr-posts-gutter);
}

.sr-post .sr-post__nav > * {
	flex: 1 1 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--sr-posts-h3);
	line-height: 1;
}

.sr-post .sr-post__nav a {
	display: flex;
	align-items: center;
	gap: 25px;
}

.sr-post .sr-post__older {
	text-align: right;
}

.sr-post .sr-post__older a {
	justify-content: flex-end;
}

.sr-post .sr-post__nav a::before,
.sr-post .sr-post__older a::after {
	content: "";
	flex: none;
	width: 18px;
	height: 32px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 32'%3E%3Cpath d='M16 2 3 16l13 14' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 32'%3E%3Cpath d='M16 2 3 16l13 14' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sr-post .sr-post__older a::before {
	content: none;
}

.sr-post .sr-post__older a::after {
	transform: scaleX(-1);
}