/* menu-tabs: structureel, geen branding. Kleuren/typografie horen in een
   global class op het nav-menu element (die zet --jdbp-mt-rail; het aantal kolommen = --jdbp-mt-cols, gezet door de JS).

   Waarom zoveel !important: de nav in het paneel erft de dropdown-skin van de
   header-nav eromheen (#brxe-… .sub-menu, translateX, schaduw, 60px regels)
   — 70-traps §57 + addenda 2, 4, 5, 7, 8. */

/* Alleen de eigen tak tonen; de stray .brx-megamenu van addendum 7 weg. */
.jdbp-mt .bricks-nav-menu > li:not(.jdbp-mt-root),
.jdbp-mt .jdbp-mt-root > .brx-submenu-toggle,
.jdbp-mt .jdbp-mt-root > .brx-megamenu,
.jdbp-mt .jdbp-mt-tabs button {
	display: none !important;
}

/* Elke sub-menu in het paneel is een statische lijst. Zichtbaarheid ERFT
   (nooit `visible`: dat ontsnapt aan een gesloten .brx-megamenu, add. 4). */
.jdbp-mt .sub-menu {
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: inherit !important;
	transition: none !important;
	pointer-events: auto !important;
	min-width: 0 !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: none !important;
}
.jdbp-mt .sub-menu li,
.jdbp-mt .sub-menu a {
	min-width: 0 !important;
	line-height: 1.4 !important;
	transition: none !important;
	white-space: normal !important;
}
.jdbp-mt .brx-submenu-toggle {
	display: block !important;
	padding: 0 !important;
}
/* Bricks springt een link in een geneste toggle in; in het paneel lijnt alles uit. */
.jdbp-mt .brx-submenu-toggle > a {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
}

/* Bricks verbergt een niet-.open sub-menu met een !important-regel in
   @layer bricks; alleen een eerdere sublaag wint (addendum 7). */
@layer bricks.reset {
	.jdbp-mt .bricks-nav-menu,
	.jdbp-mt .jdbp-mt-root,
	.jdbp-mt .sub-menu {
		display: block !important;
	}
	.jdbp-mt .jdbp-mt-tabs {
		display: grid !important;
	}
	.jdbp-mt .jdbp-mt-pane {
		display: grid !important;
	}
}

/* Rail + panes in één grid: rail-rijen op eigen hoogte, de laatste rij (1fr)
   vangt de rest, elke pane overspant alle rijen in kolom 2 → het paneel is
   zo hoog als de hoogste pane en verspringt niet bij wisselen. */
.jdbp-mt .jdbp-mt-tabs {
	grid-template-columns: var(--jdbp-mt-rail, 18rem) minmax(0, 1fr);
	grid-template-rows: repeat(var(--jdbp-mt-rows, 1), auto) 1fr;
	align-items: stretch;
}
.jdbp-mt .jdbp-mt-tab {
	display: contents !important;
}
.jdbp-mt .jdbp-mt-tab > .jdbp-mt-row {
	grid-column: 1;
}
.jdbp-mt .jdbp-mt-foot {
	width: auto !important; /* de dropdown-skin geeft li's width:100% — met marge steekt hij dan uit de rail */
	grid-column: 1;
	grid-row: -2 / -1;
	align-self: end;
}
.jdbp-mt .jdbp-mt-pane {
	grid-column: 2;
	grid-row: 1 / -1;
	grid-template-columns: repeat(var(--jdbp-mt-cols, 3), auto); /* max 3 (JS); elk spoor zo breed als zijn langste titel, rest verdeeld */
	align-content: start;
	min-width: 0;
	visibility: hidden !important;
}
.jdbp-mt .jdbp-mt-tab.jdbp-active > .jdbp-mt-pane {
	visibility: inherit !important;
}
.jdbp-mt .jdbp-mt-card {
	grid-template-columns: 1fr;
}
/* Tegel: eigen rastercel, achter de families, telt NIET mee voor de spoorbreedte
   (een lang label mag kolom 1 niet oprekken). De hele <a> is het klikdoel;
   padding en kleur horen in de skin-class. */
.jdbp-mt .jdbp-mt-pane > li.jdbp-mt-tile {
	order: 1;
	width: 0 !important;
	min-width: 100% !important; /* wint van de min-width:0 op alle paneel-li's hierboven */
}
.jdbp-mt .jdbp-mt-tile__link {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name arrow" "label arrow";
	align-items: center;
	column-gap: 1.2rem;
	white-space: normal !important;
}
.jdbp-mt .jdbp-mt-tile__name { grid-area: name; }
.jdbp-mt .jdbp-mt-tile__label { grid-area: label; }
.jdbp-mt .jdbp-mt-tile__arrow { grid-area: arrow; }