/* Secondary (inline) article image — the alignright figure that
   wp.py::insert_image_into_content drops in after the second paragraph.

   This is the single, site-wide source of truth for how that image is laid
   out on single posts (tsai + scike). It overrides the inline
   width:50%/float:right/margin the publishing pipeline writes onto the figure,
   so the !important is required to win over those inline styles. Tweak spacing
   and breakpoints here — changes apply to every existing and future article.

   Below 1200px the image spans the full content column with no float, so text
   stacks above/below it. From 1200px up it floats right and breaks out past the
   right edge of the (~645px) content column, with text wrapping to its left.
   margin-top keeps it from sitting flush against the text above. */

@media (max-width: 1199px) {
	body.single .wp-block-post-content .wp-block-image.alignright {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 1em !important;
		margin-bottom: 1em !important;
	}

	body.single .wp-block-post-content .wp-block-image.alignright img {
		width: 100% !important;
		height: auto !important;
	}
}

@media (min-width: 1200px) {
	body.single .wp-block-post-content .wp-block-image.alignright {
		float: right !important;
		width: 560px !important;
		max-width: none !important;
		margin-left: 1.5em !important;
		margin-right: -240px !important;
		margin-top: 1em !important;
		margin-bottom: 1em !important;
	}

	body.single .wp-block-post-content .wp-block-image.alignright img {
		width: 100% !important;
		height: auto !important;
	}
}
