/*
 * Images, numbered lists and fourth-level headings inside pws/prose.
 *
 * The prose styles in global.css cover h2, h3, p, ul, a and strong, which was all the
 * privacy and accessibility pages needed. The long-form treatment pages folded in from
 * the previous site also carry photos and the odd numbered list, so they get the same
 * restrained treatment here. blocks/prose/render.php asks for this file only when the
 * section contains one of them.
 *
 * On the photos: every one of them came off the previous site as a tall portrait or a
 * square (970x1147, 951x900, 500x511). Left to fill the 46rem text column each was
 * about 870px tall, a full screen of stock photograph between two paragraphs, with the
 * rest of the container empty beside it. They are supporting pictures, not hero shots,
 * so a photo on its own sits in that empty space beside the writing, and a run of them
 * becomes one row. Nothing here crops a face: the whole frame is always shown.
 */
/* Keep a floated photo inside its own section, so it cannot push the next one down. */
.prose {
	display: flow-root;
}

.prose figure,
.prose .wp-block-image {
	margin: 1.75rem 0;
}

/*
 * A photo is matted rather than dropped straight onto the page.
 *
 * The imported pictures are stock photography on pale backgrounds, and against this
 * site's off-white they had no edge at all: they read as something pasted in rather
 * than placed. The near-black mat gives each one a border of its own, the same black
 * the buttons and the wordmark use, so a photograph looks framed and deliberate.
 */
.prose figure.wp-block-image {
	background: rgb(var(--color-primary));
	padding: 6px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.prose figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.prose figure.wp-block-image figcaption {
	margin-top: 0;
	padding: 0.5rem 0.4rem 0.15rem;
	color: rgb(var(--color-primary-fg) / 0.75);
	font-size: 0.82rem;
	line-height: 1.4;
}

.prose figcaption {
	margin-top: 0.6rem;
	font-size: 0.9rem;
	color: rgb(var(--color-muted));
}

/* A run of photos reads as one row of thumbnails rather than a column of billboards. */
.prose-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 1rem;
	margin: 1.75rem 0;
}

.prose-figures figure.wp-block-image {
	margin: 0;
	width: auto;
}

/*
 * Wide screens: a single photo moves out of the text's way.
 *
 * .prose is 46rem inside a container up to 1280px, so there is always empty space to
 * its right. The photo goes there, the writing wraps around it, and the next heading
 * clears it so a section never starts beside the tail of the previous one's picture.
 */
@media (min-width: 64rem) {
	.prose > figure.wp-block-image {
		float: right;
		margin: 0.35rem -4rem 1.25rem 2.5rem;
		shape-outside: margin-box;
		max-width: 17rem;
	}

	/*
	 * One height for every photo, whatever shape it arrived in. The imported pictures
	 * run from 0.85 to 1.06, and matching their heights rather than their widths keeps
	 * a section from being set by whichever photo happened to be the tallest.
	 */
	.prose > figure.wp-block-image img {
		width: auto;
		height: 13.5rem;
	}

	/*
	 * Only the section breaks clear. The smaller headings are left to flow, so a run of
	 * short sections wraps down one side of a photo instead of each one pushing past it
	 * and leaving a hole.
	 */
	.prose > h2,
	.prose > .prose-figures,
	.prose > .wp-block-embed {
		clear: both;
	}
}

/*
 * Narrow screens: the photo goes back in the flow, but capped, so it stays a picture
 * in an article rather than a screenful on its own.
 */
@media (max-width: 63.99rem) {
	.prose > figure.wp-block-image img {
		width: auto;
		max-width: 100%;
		max-height: 20rem;
		margin-inline: auto;
	}
}

.prose ol {
	list-style: decimal;
	padding-left: 1.25rem;
	margin-bottom: 1rem;
	display: grid;
	gap: 0.4rem;
}

.prose ol li {
	color: rgb(var(--color-muted));
	line-height: var(--leading-relaxed);
}

.prose h4 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.05rem;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}