/*
 * Content tweaks for pages migrated from the old Genesis theme.
 *
 * Classic-editor content uses floated .alignright / .alignleft images. In a
 * 645px column those floats crowd the text, and on a phone they squeeze it to
 * an unreadable ribbon. Give the floats room, cap their width, and drop the
 * float entirely on small screens.
 */

.wp-block-post-content .alignright,
.wp-block-post-content figure.alignright {
	float: right;
	max-width: 12rem;
	height: auto;
	margin: 0.4rem 0 1.25rem 1.75rem;
}

.wp-block-post-content .alignleft,
.wp-block-post-content figure.alignleft {
	float: left;
	max-width: 12rem;
	height: auto;
	margin: 0.4rem 1.75rem 1.25rem 0;
}

/* Headings should never start beside a float — it reads as a broken column. */
.wp-block-post-content h2,
.wp-block-post-content h3 {
	clear: both;
}

@media (max-width: 700px) {
	.wp-block-post-content .alignright,
	.wp-block-post-content .alignleft,
	.wp-block-post-content figure.alignright,
	.wp-block-post-content figure.alignleft {
		float: none;
		display: block;
		max-width: 100%;
		margin: 1.5rem auto;
	}
}

/* The wrapper is capped above; make the image and its caption follow it. */
.wp-block-post-content .alignright img,
.wp-block-post-content .alignleft img {
	width: 100%;
	height: auto;
}

.wp-block-post-content .wp-caption-text,
.wp-block-post-content figcaption {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast-2);
	margin-top: 0.4rem;
}

/*
 * Featured images: keep them to a banner rather than letting a tall portrait
 * photo fill the screen before the reader reaches any text.
 */
.wp-block-post-featured-image img {
	width: 100%;
	max-height: 24rem;
	object-fit: cover;
}