/**
 * POV Switcher - layout ordering
 *
 * Apply the "tb-mbl-pov-switcher" class (Advanced > Additional CSS class(es)) to a
 * 2-column Grid-layout Group block whose direct children alternate:
 * left group, right group, left group, right group ...
 *
 * Below the breakpoint, the grid collapses to a single column and the
 * children are reordered so every "left" (odd) child stacks before every
 * "right" (even) child. Toggling the "pov-flipped" class (via switch-order.js)
 * reverses that, stacking every "right" child first.
 *
 * No colors, spacing, or other visual styling lives here by design - that
 * belongs in the theme's own stylesheet.
 */

@media (max-width: 1179px) {

	.wp-block-group-is-layout-grid.tb-mbl-pov-switcher {
		display: grid !important;
		grid-template-columns: 1fr !important;
	}

	/* Default: all left (odd) children stack before all right (even) children. */
	.tb-mbl-pov-switcher > :nth-child(odd) {
		order: 1;
	}

	.tb-mbl-pov-switcher > :nth-child(even) {
		order: 2;
	}

	/* Flipped: all right (even) children stack before all left (odd) children. */
	.tb-mbl-pov-switcher.pov-flipped > :nth-child(odd) {
		order: 2;
	}

	.tb-mbl-pov-switcher.pov-flipped > :nth-child(even) {
		order: 1;
	}
}

@media (min-width: 1180px) {

	/* Restore the standard 2-column grid; flipping never applies at this size. */
	.wp-block-group-is-layout-grid.tb-mbl-pov-switcher {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
	}
}