/*
 * RMS Group / Explore RMS
 *
 * Design brief, kept here because the next person to touch this file needs it:
 * serious industrial B2B. The page must read as a supplier's network page, not
 * as a SaaS landing page and not as a link directory. So:
 *
 *   - Type and space carry the page. No gradient, no glow, no floating shapes,
 *     no glassmorphism, no drop shadows on cards.
 *   - Corners are near-square. --rms-radius-sm only, and only on controls.
 *   - Structure is expressed with hairlines. The platform grid is a 1px
 *     background showing through the gaps between surfaces, which is why the
 *     grid gap is 1px and not 24px.
 *   - Facts are laid out as specifications: a label column and a value column,
 *     the way a datasheet does it, not as an icon and a sentence.
 *   - Colour is used once per element at most. --rms-primary marks the current
 *     platform and underlines the calls to action; it is not a background.
 *
 * Every colour is a brand token printed by RMS_Brand::print_tokens(), so this
 * one stylesheet produces the ABB, Schneider and EM pages.
 */

.rms-group {
	--rms-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--rms-rule: var(--rms-border, #e1e7ec);
	color: var(--rms-text, #12181d);
	background: var(--rms-surface, #fff);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.rms-group *,
.rms-group *::before,
.rms-group *::after {
	box-sizing: border-box;
}

.rms-group__wrap {
	max-width: var(--rms-maxw, 1280px);
	margin: 0 auto;
	padding-left: var(--rms-gutter, 16px);
	padding-right: var(--rms-gutter, 16px);
}

.rms-group a {
	color: inherit;
}

.rms-group a:focus-visible,
.rms-group button:focus-visible {
	outline: 2px solid var(--rms-primary, #0098db);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------- HERO */

.rms-group__hero {
	background: var(--rms-muted, #f6f8fa);
	border-bottom: 1px solid var(--rms-rule);
	padding: 72px 0 60px;
}

.rms-group__eyebrow {
	margin: 0 0 18px;
	font-family: var(--rms-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rms-primary-d, #0078ad);
}

.rms-group__eyebrow::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	margin-right: 12px;
	vertical-align: 4px;
	background: var(--rms-primary, #0098db);
}

.rms-group__title {
	margin: 0 0 20px;
	max-width: 20ch;
	font-size: clamp(30px, 4.4vw, 50px);
	line-height: 1.06;
	letter-spacing: -0.022em;
	font-weight: 700;
	color: var(--rms-text, #12181d);
}

.rms-group__lead {
	margin: 0;
	max-width: 64ch;
	font-size: 18px;
	line-height: 1.6;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-group__hero-links {
	margin: 28px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

.rms-group__jump {
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--rms-primary, #0098db);
}

.rms-group__jump::after {
	content: " \2193";
	font-family: var(--rms-mono);
}

.rms-group__jump:hover {
	color: var(--rms-primary-d, #0078ad);
}

/* ------------------------------------------------------------ SECTIONS */

.rms-group__section {
	padding: 68px 0;
	border-bottom: 1px solid var(--rms-rule);
}

.rms-group__section--alt {
	background: var(--rms-muted, #f6f8fa);
}

.rms-group__sechead {
	max-width: 68ch;
	margin: 0 0 36px;
}

.rms-group__h2 {
	margin: 0 0 10px;
	font-size: clamp(22px, 2.5vw, 30px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-weight: 700;
}

.rms-group__sub {
	margin: 0;
	font-size: 16px;
	color: var(--rms-text-mut, #5b6b78);
}

/* ----------------------------------------------------- PLATFORM PANELS */

/*
 * The 1px gap on a rule-coloured background is the border between cards.
 * Drawing it this way keeps every internal division exactly one pixel and
 * removes the doubled borders you get from bordering each card.
 */
/* v1.10 — a FIXED column count per breakpoint, not auto-fit.
   The branch-map cell spans whatever the last row has left over, and it can
   only know that if the column count is knowable. Three explicit steps
   replace auto-fit; the visual result at every width is the same. */
.rms-group__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	background: var(--rms-rule);
	border: 1px solid var(--rms-rule);
}

@media (min-width: 720px) {
	.rms-group__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* An even platform count fills its rows exactly, so the map takes a
	   whole row; an odd one leaves a single hole, which the map fills as an
	   ordinary cell. */
	.rms-group__map--m2-0 {
		grid-column: span 2;
	}
}

@media (min-width: 1100px) {
	.rms-group__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rms-group__map--m2-0 {
		grid-column: auto;
	}

	.rms-group__map--m3-0 {
		grid-column: span 3;
	}

	.rms-group__map--m3-1 {
		grid-column: span 2;
	}
}

.rms-group__card {
	display: flex;
	flex-direction: column;
	background: var(--rms-surface, #fff);
	padding: 28px 28px 26px;
}

.rms-group__card.is-current {
	background: var(--rms-muted, #f6f8fa);
	box-shadow: inset 3px 0 0 0 var(--rms-primary, #0098db);
}

.rms-group__cardhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--rms-text, #12181d);
	margin-bottom: 18px;
}

.rms-group__cardname {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.rms-group__host {
	font-family: var(--rms-mono);
	font-size: 12px;
	color: var(--rms-text-mut, #5b6b78);
	white-space: nowrap;
}

.rms-group__badge {
	font-family: var(--rms-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--rms-surface, #fff);
	background: var(--rms-primary, #0098db);
	padding: 4px 8px;
}

.rms-group__pos {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-group__spec {
	margin: 0 0 22px;
	font-size: 14px;
}

.rms-group__spec dt {
	font-family: var(--rms-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rms-text-mut, #5b6b78);
	padding-top: 12px;
	border-top: 1px solid var(--rms-rule);
}

.rms-group__spec dd {
	margin: 4px 0 12px;
}

.rms-group__cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.rms-group__cats li {
	margin: 0;
	padding: 0;
}

.rms-group__cats li + li::before {
	content: "·";
	margin: 0 8px;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-group__cardfoot {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--rms-rule);
}

.rms-group__cta {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--rms-primary, #0098db);
}

.rms-group__cta::after {
	content: " \2192";
	font-family: var(--rms-mono);
}

.rms-group__cta:hover {
	color: var(--rms-primary-d, #0078ad);
	border-bottom-color: var(--rms-primary-d, #0078ad);
}

.rms-group__leaves,
.rms-group__here {
	display: block;
	margin: 8px 0 0;
	font-family: var(--rms-mono);
	font-size: 11px;
	color: var(--rms-text-mut, #5b6b78);
}

/* ------------------------------------------------------------- FINDER */

/*
 * The interactive selector is hidden until rms-portfolio.js marks the block
 * enhanced. Without JavaScript the plain list below it is the feature, and it
 * carries exactly the same links.
 */
.rms-group__finder {
	display: none;
}

[data-rms-selector][data-enhanced="1"] {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: 1px;
	background: var(--rms-rule);
	border: 1px solid var(--rms-rule);
}

[data-enhanced="1"] ~ .rms-group__plain {
	display: none;
}

.rms-group__tabs {
	display: flex;
	flex-direction: column;
	background: var(--rms-surface, #fff);
}

.rms-group__tab {
	appearance: none;
	-webkit-appearance: none;
	text-align: left;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--rms-text, #12181d);
	background: transparent;
	border: 0;
	border-left: 3px solid transparent;
	border-bottom: 1px solid var(--rms-rule);
	padding: 14px 18px;
	cursor: pointer;
}

.rms-group__tab:last-child {
	border-bottom: 0;
}

.rms-group__tab:hover {
	background: var(--rms-muted, #f6f8fa);
}

.rms-group__tab[aria-selected="true"] {
	border-left-color: var(--rms-primary, #0098db);
	background: var(--rms-muted, #f6f8fa);
}

.rms-group__panels {
	background: var(--rms-surface, #fff);
}

.rms-group__panel {
	padding: 28px;
}

.rms-group__panel[hidden] {
	display: none;
}

.rms-group__panelh {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.rms-group__panelhint {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-group__routes,
.rms-group__plainlist ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rms-group__route,
.rms-group__plainlist li {
	padding: 12px 0;
	border-top: 1px solid var(--rms-rule);
}

.rms-group__route a,
.rms-group__plainlist a {
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--rms-primary, #0098db);
}

.rms-group__route a:hover,
.rms-group__plainlist a:hover {
	color: var(--rms-primary-d, #0078ad);
}

.rms-group__route.is-here a {
	border-bottom-width: 2px;
}

.rms-group__routenote {
	display: block;
	margin-top: 3px;
	font-family: var(--rms-mono);
	font-size: 11px;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-group__plain {
	background: var(--rms-surface, #fff);
	border: 1px solid var(--rms-rule);
	padding: 26px 28px;
}

.rms-group__plainh {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
}

.rms-group__plainlist {
	margin: 0;
}

.rms-group__plainlist dt {
	font-family: var(--rms-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rms-text-mut, #5b6b78);
	margin-top: 20px;
}

.rms-group__plainlist dd {
	margin: 6px 0 0;
}

/* ---------------------------------------------------------------- WHY */

.rms-group__why {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 0 48px;
}

.rms-group__whyitem {
	display: flex;
	gap: 18px;
	padding: 22px 0;
	border-top: 1px solid var(--rms-rule);
}

.rms-group__whynum {
	flex: 0 0 auto;
	font-family: var(--rms-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--rms-primary-d, #0078ad);
	padding-top: 3px;
}

.rms-group__whybody p {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-group__whyh {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.005em;
}

/* -------------------------------------------------------------- STRIP */

.rms-group__strip {
	background: var(--rms-dark, #0b1220);
	color: #fff;
	padding: 26px 0;
}

.rms-group__stripL {
	margin: 0 0 12px;
	font-family: var(--rms-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.rms-group__stripList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	font-size: 14px;
}

.rms-group__stripList a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	padding-bottom: 2px;
}

.rms-group__stripList a:hover {
	border-bottom-color: #fff;
}

.rms-group__stripHere {
	color: rgba(255, 255, 255, 0.62);
}

.rms-group__stripHere em {
	font-style: normal;
	font-family: var(--rms-mono);
	font-size: 11px;
}

/* --------------------------------------------------------- NARROW */

@media (max-width: 880px) {
	[data-rms-selector][data-enhanced="1"] {
		grid-template-columns: 1fr;
	}

	.rms-group__tabs {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1px;
		background: var(--rms-rule);
	}

	.rms-group__tab {
		flex: 1 1 auto;
		border-left: 0;
		border-bottom: 3px solid transparent;
		background: var(--rms-surface, #fff);
	}

	.rms-group__tab[aria-selected="true"] {
		border-bottom-color: var(--rms-primary, #0098db);
	}
}

@media (max-width: 640px) {
	.rms-group__hero {
		padding: 48px 0 40px;
	}

	.rms-group__section {
		padding: 48px 0;
	}

	.rms-group__card,
	.rms-group__panel {
		padding: 22px 20px;
	}

	.rms-group__lead {
		font-size: 17px;
	}
}

/* Wide enough for a real specification layout: label column, value column. */
@media (min-width: 560px) {
	.rms-group__spec {
		display: grid;
		grid-template-columns: 132px 1fr;
		column-gap: 20px;
	}

	.rms-group__spec dt {
		grid-column: 1;
	}

	.rms-group__spec dd {
		grid-column: 2;
		margin: 0 0 12px;
		padding-top: 12px;
		border-top: 1px solid var(--rms-rule);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rms-group * {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.rms-group__finder,
	.rms-group__strip {
		display: none;
	}

	[data-enhanced="1"] ~ .rms-group__plain {
		display: block;
	}
}

/* ---- v1.9: the branch map filling the platforms grid's empty cell ---- */

/* v1.10 — it is a GRID CELL now, not a band under the grid. It carries the
   platform card's own geometry so the row reads as four equal panels, and it
   stacks its copy above its map because the cell is one column wide. */
.rms-group__map {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	/* The grid is a hairline table — 1px gaps over a rule-coloured
	   background — so the cell takes the card's surface and padding rather
	   than a border and radius of its own, or it would read as a floating
	   panel dropped into a table. */
	padding: 28px 28px 26px;
	background: var(--rms-surface, #fff);
	border: 0;
	border-radius: 0;
	min-width: 0;
}

.rms-group__map .rms-group__maptext {
	min-width: 0;
}

.rms-group__maptitle {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	color: var(--rms-text, #12181d);
}

.rms-group__mapsub {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-group__map .rms-home-net__map {
	margin: 0;
}

.rms-group__map .rms-home-net__frame {
	width: 100%;
	min-height: 220px;
	height: 100%;
	border: 0;
	border-radius: var(--rms-radius-sm, 6px);
}

/* The map fills whatever height the sibling cards set, so the row's bottom
   edge stays straight however tall the tallest platform card is. */
.rms-group__map .rms-home-net__map {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 220px;
}

.rms-group__map .rms-home-net__addr {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--rms-text-mut, #5b6b78);
}

/* v1.10.6 — the RMS Group hero is the same band as every other page. */
.rms-group__hero {
	position: relative;
	z-index: 0;
	padding-top: var(--rms-band-pad-y, 34px);
	padding-bottom: var(--rms-band-pad-y, 34px);
	min-height: var(--rms-band-min-h, 168px);
}

.rms-group__hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(50% - (var(--rms-vw, 100%) / 2));
	width: var(--rms-vw, 100%);
	background: linear-gradient(180deg, var(--rms-muted, #f6f8fa) 0%, #fff 92%);
	border-bottom: 1px solid var(--rms-line, #e3e7ee);
}

.rms-group__h1 {
	font-size: var(--rms-band-title, clamp(24px, 3.2vw, 38px));
	line-height: 1.12;
	letter-spacing: -0.022em;
}

.rms-group__lede {
	font-size: var(--rms-band-lede, 16px);
	line-height: 1.6;
}