/*
 * core/columns — "Reverse when stacked" (`is-style-reverse-when-stacked`).
 *
 * Registered opt-in by `includes/styles/blocks/core-columns-reverse-when-stacked.php`.
 *
 * A two-column row drawn media-left / copy-right stacks copy-first on a phone in
 * every frame of this design set, which is the opposite of the order the markup
 * has to be in for the desktop row. This style is that flip, and nothing else:
 * the row keeps its source order — and therefore its reading order and its tab
 * order — on a desktop, and inverts the *visual* stack once core has collapsed
 * it. The mirrored row beside it (copy-left / media-right) stacks correctly
 * without the class, so this is opt-in rather than a default.
 *
 * ## There is nothing native to reach for
 *
 * `core/columns` has exactly one breakpoint and it is core's own 782px, set in
 * `wp-includes/blocks/columns/style.css` and unreachable from any attribute.
 * `isStackedOnMobile` only ever *removes* the stacking; it has no "and in this
 * order" half. Nor can a `@mobile` style state help: the ordering properties
 * (`order`, `flex-wrap`, `flex-direction`) are not ones `states.php` or the style
 * engine emit, and the theme's `@mobile` is 48rem anyway — see below.
 *
 * ## The query is core's 781px, not the theme's 48rem
 *
 * Every other responsive decision in this theme is `@mobile` (48rem, 768px), and
 * using it here would be wrong by fourteen pixels in the worst possible way: at
 * 775px core has already stacked the row and this rule would not have fired, so
 * the section would render stacked *in source order* — the photograph above the
 * heading — for one narrow band of widths, and correctly either side of it. The
 * flip has to switch at exactly the width the stacking does, so the number comes
 * from core.
 *
 * ## `wrap-reverse`, not `flex-direction: column-reverse`
 *
 * The obvious spelling is a reversed column direction, and it breaks the layout.
 * Core writes `flex-basis: 100% !important` onto every column in this same range,
 * and `flex-basis` is a length along the *main* axis — so in a column-direction
 * container each column would ask to be the full height of the row rather than
 * its full width. `wrap-reverse` leaves the axis alone: the container is still a
 * wrapping row, each column is still one full-width flex line, and only the order
 * the lines are stacked in changes.
 *
 * It is also count-agnostic, which `order` is not. A three-column row reverses
 * end to end; an `order: 1` on the first child would only move that one child to
 * the bottom.
 *
 * `!important` is not defensive padding: core's `flex-wrap: wrap !important` is on
 * `.wp-block-columns` at 0-1-0, so the declaration has to be important too, and
 * the extra class then wins the tie at 0-2-0.
 *
 * ## What the cross-axis flip does and does not cost
 *
 * `wrap-reverse` swaps cross-start and cross-end, so `align-items` and
 * `align-content` mean the opposite of what they say inside it. It costs nothing
 * here because there is nothing for it to act on: core sets `align-items: initial
 * !important` on the container, each stacked column is the only item on its own
 * line, and a `flex-basis: 100%` item is as wide as its line either way. A
 * `are-vertically-aligned-*` class is likewise inert once every line holds a
 * single item as tall as its content.
 *
 * The `:not(.is-not-stacked-on-mobile)` guard is the same reasoning from the other
 * side: a row told never to stack is a single `nowrap` line at every width, where
 * reversing the line order would do nothing visible and the cross-axis flip would
 * be the only thing left. Excluding it keeps the style meaning exactly one thing.
 */

@media (width <= 781px) {
	.wp-block-columns.is-style-reverse-when-stacked:not(
			.is-not-stacked-on-mobile
		) {
		flex-wrap: wrap-reverse !important;
	}
}