/*
 * The Snippet block, aligned left or right: a float beside the text (divb-hq#198,
 * which absorbed divb-hq#195).
 *
 * Core already turns `align: left|right` into a float — `.is-layout-constrained >
 * .alignleft { float: left; margin-inline: 0 2em }` in the global styles. Three things it
 * does not do, and each one was measured on a live draft before it was written here:
 *
 * 1. Keep the float in the text column. The post content is `alignfull` on this theme,
 *    so the container is the whole viewport and core floats the snippet to ITS edge —
 *    252px left of where the text starts, at 1512px. The column offset below puts it
 *    back on the column's edge.
 * 2. Give it a width. A float is as wide as its content, so a snippet with one long
 *    paragraph would take the column and leave the text two words a line.
 * 3. End it, and drop it on a narrow screen — see the two rules at the bottom.
 *
 * **Why the layout class is in every selector:** this sheet loads before the global
 * styles, so a rule of core's specificity loses to core's own. `:is(…) > .block.align`
 * is one class more, and it is the same parent core itself keys on.
 */

.wp-block-mf-snippet.alignleft,
.wp-block-mf-snippet.alignright {
	max-width: min(22rem, 50%);

	/*
	 * Core gives a float the block gap above and nothing below. A heading that clears it
	 * loses its own top margin to the clearance, so without this it sat flush against
	 * the snippet — measured 0px, now the page's ordinary 19px gap.
	 */
	margin-block-end: var(--wp--style--block-gap, 1.2rem);
}

/*
 * Two more widths an author can choose (divb-hq#205). Named steps rather than a number,
 * because what matters is the text left beside the snippet, and every step keeps the
 * double cap — absolute AND relative — so none of them grows with a wider container, and
 * the narrow-screen rule below still wins over each.
 *
 * Measured beside an 800px column, counting full lines only: narrow leaves 57 characters
 * a line, normal 48, wide 34. About 45 is where running text stops reading well, so WIDE
 * IS BELOW IT ON PURPOSE — a choice for a snippet with little text beside it (a picture, a
 * short note), decided on the card rather than overlooked. The editor says so.
 */
.wp-block-mf-snippet:is(.alignleft, .alignright).is-width-narrow {
	max-width: min(16rem, 35%);
}

.wp-block-mf-snippet:is(.alignleft, .alignright).is-width-wide {
	max-width: min(28rem, 60%);
}

/* The column's edge: half of what the container has beyond the content width. */
.is-layout-constrained > .wp-block-mf-snippet.alignleft {
	margin-inline-start: max(0px, (100% - var(--wp--style--global--content-size, 100%)) / 2);
}

.is-layout-constrained > .wp-block-mf-snippet.alignright {
	margin-inline-end: max(0px, (100% - var(--wp--style--global--content-size, 100%)) / 2);
}

/*
 * The float's end. A heading starts a new part of the text, and one that began beside
 * the snippet would read as belonging to it. Every later heading in the same container
 * clears; once the float is over, `clear` does nothing.
 */
.wp-block-mf-snippet:is(.alignleft, .alignright) ~ :is(h1, h2, h3, h4, h5, h6) {
	clear: both;
}

/*
 * A narrow screen: no text fits beside a snippet at 390px, so it stops floating and
 * takes the width a block in the text would have. Reduced, never dropped (divb-hq#162).
 */
@media (max-width: 600px) {

	:is(.is-layout-constrained, .is-layout-flow) > .wp-block-mf-snippet:is(.alignleft, .alignright) {
		float: none;
		max-width: none;
		margin-inline: 0;
	}
}