/**
 * MRMVR Elements — host compatibility.
 *
 * Narrow corrections for behaviour outside the widgets themselves, scoped so
 * they can only reach containers that actually hold an MRMVR widget.
 *
 * @package MRMVR\Elements
 * @since   1.12.0
 */

/* -------------------------------------------------------------------------
 * Elementor's mobile flex-wrap
 *
 * Elementor ships `--flex-wrap-mobile: wrap` on every container and applies it
 * below 767px:
 *
 *   .e-con { --flex-wrap-mobile: wrap }
 *   @media (max-width:767px) { .e-con.e-flex { --flex-wrap: var(--flex-wrap-mobile) } }
 *   .e-con.e-flex > .e-con-inner { flex-wrap: var(--flex-wrap) }
 *
 * That default suits a row of columns, which is what it was written for. On a
 * container that stacks its children it lets the flex line size and align
 * independently of the content, leaving dead space under the last widget.
 *
 * Restoring `nowrap` is the smallest possible correction: a stacked container
 * has nothing to wrap onto a second line, so nothing else about the layout
 * changes — alignment, order, gaps and widths are all untouched.
 *
 * `:has()` keeps this off every container that does not hold one of our
 * widgets. Browsers without `:has()` skip the rule entirely, which leaves
 * them exactly where they were.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* Boxed containers: the flex line lives on the inner wrapper. */
	.e-con.e-flex > .e-con-inner:has(.mrx-split-wrap),
	.e-con.e-flex > .e-con-inner:has(.mrx-heading-wrap),
	.e-con.e-flex > .e-con-inner:has(.mrx-points-wrap),
	.e-con.e-flex > .e-con-inner:has(.mrx-mosaic-wrap),
	/* Full-width containers: the flex line is the container itself. */
	.e-con-full.e-flex:has(.mrx-split-wrap),
	.e-con-full.e-flex:has(.mrx-heading-wrap),
	.e-con-full.e-flex:has(.mrx-points-wrap),
	.e-con-full.e-flex:has(.mrx-mosaic-wrap) {
		flex-wrap: nowrap;
	}
}