/*
 * Products menu — the mobile drill-in (option 2b).
 *
 * Everything else about this menu is native: the panel, the rail, the course
 * rows, the promoted card and the hover switch are all Bricks element settings
 * on the "Products menu" template, editable in the builder. What is here is the
 * one thing the builder cannot reach — a layout that depends on a runtime class
 * (.is-drilled) on an element Bricks does not own the state of.
 *
 * Above --bp-desktop this file does nothing at all: the desktop mega menu is
 * Bricks' own, and Tabs' `.tab-pane.brx-open { display: block }` already shows
 * the hovered category.
 *
 * It hides `.tab-content`, never `.tab-pane`. Bricks sets
 *
 *     @layer bricks { .brxe-tabs-nested .tab-pane.brx-open { display: block !important } }
 *
 * and cascade layers **reverse** for important declarations, so an `!important`
 * out here in the unlayered origin loses to an `!important` inside `@layer
 * bricks` no matter how specific it is. `.tab-content` carries no Bricks rule
 * at all, so an ordinary declaration on it wins outright, and the panes keep
 * their own behaviour.
 */

@media (max-width: 991px) {
	/* The rail and the panel occupy the same box; only one is on screen. */
	.m-mm-tabs {
		position: relative;
	}

	/*
	 * Tabs always opens a pane on load — its `openTab` index falls back to 0
	 * when out of range, so "none open" is not reachable from the control.
	 * Mobile starts on the rail (2a) and only reveals the panes once the
	 * visitor picks a category (2b).
	 */
	.m-mm-tabs:not(.is-drilled) .tab-content {
		display: none;
	}

	.m-mm-tabs.is-drilled .tab-menu {
		display: none;
	}

	/* The panel arrives from the right, the way a drill-in reads. */
	@media (prefers-reduced-motion: no-preference) {
		.m-mm-tabs.is-drilled .tab-content {
			animation: m-mm-drill var(--motion-base) var(--ease-out) both;
		}
	}

	@keyframes m-mm-drill {
		from {
			opacity: 0;
			transform: translateX(16px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
}