/* mobile-flex-guard.css — the CSS half of includes/class-mobile-flex-guard.php.
 *
 * The PHP tags every container that lays out as a COLUMN at <=767px with `tw-mobile-column`.
 * This stops Elementor's forced `--flex-wrap-mobile: wrap` dealing that column's children into
 * extra COLUMNS off the right edge of the phone. Read the class file for the measurements and for
 * why this is not done in page data.
 *
 * ── SPECIFICITY, WHICH IS THE WHOLE GAME HERE ──────────────────────────────────────────────────
 * ⚠️ PROJECT-NOTES §6 records this trap costing time repeatedly, so the arithmetic is written out:
 *
 *   Elementor's forced wrap       @media(max-width:767px){ .e-con.e-flex { ... } }        (0,2,0)
 *   the compiled per-page value   .elementor-153 .elementor-element.elementor-element-x   (0,3,0)
 *   THIS RULE                     .elementor .tw-mobile-column.e-con.e-flex              (0,4,0)
 *
 * (0,4,0) beats both outright, so this does not depend on stylesheet ORDER — which matters because
 * Elementor prints per-post CSS at render time and this file is enqueued in the head. A rule that
 * merely tied at (0,3,0) would win or lose depending on which page printed its CSS first.
 *
 * ── WHY BOTH THE VARIABLE AND THE PROPERTY ─────────────────────────────────────────────────────
 * `--flex-wrap` is set on the container but CONSUMED on `.e-con-inner` (`flex-wrap:var(--flex-wrap)`),
 * and custom properties inherit. Setting the variable is what actually fixes it; setting `flex-wrap`
 * directly is belt-and-braces against Elementor changing which element consumes it, which it has
 * done before between minor versions.
 */

@media (max-width: 767px) {

	.elementor .tw-mobile-column.e-con.e-flex,
	.elementor .tw-mobile-column.e-con.e-flex > .e-con-inner {
		--flex-wrap: nowrap;
		--flex-wrap-mobile: nowrap;
		flex-wrap: nowrap;
	}

	/* A column container that cannot wrap must be allowed to grow instead, or a constrained height
	 * clips the tail of its children rather than dealing them sideways. `min-height` is left alone —
	 * this only removes a MAXIMUM that would otherwise force the overflow to go somewhere. */
	.elementor .tw-mobile-column.e-con.e-flex > .e-con-inner {
		max-height: none;
	}
}