/* Process Steps — engagement journey rail.
   Colours come from the shared palette on .sxs; only the rail-specific
   measurements live here, so the widget re-themes with every other section. */

.sxs--process .sxp {
	--sxp-node: 46px;
	--sxp-phase-col: 240px;
	--sxp-gap: 34px;
	--sxp-rail: var(--sxs-hairline);
	--sxp-num: var(--sxs-brand-600);
}

.sxs--process .sxp__eyebrow {
	color: var(--sxs-brand-600);
}

.sxs--process .sxp__heading {
	margin: 10px 0 56px;
	max-width: 22ch;
	text-wrap: balance;
}

/* ------------------------------------------------------------ phase group */

.sxs--process .sxp__group {
	display: grid;
	grid-template-columns: var(--sxp-phase-col) minmax(0, 1fr);
	gap: 0 48px;
}

.sxs--process .sxp__group + .sxp__group {
	margin-top: 64px;
}

.sxs--process .sxp__phase {
	padding-top: calc((var(--sxp-node) - 1em) / 2);
}

.sxs--process .sxp--sticky .sxp__phasename {
	position: sticky;
	top: 96px;
}

.sxs--process .sxp__phasename {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--sxs-ink-900);
	padding-left: 10px;
	border-left: 3px solid var(--sxs-brand-600);
}

/* ------------------------------------------------------------------- rail */

.sxs--process .sxp__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The rail sits behind the nodes, stopping at the centre of the last one so it
   never trails past the final step. */
.sxs--process .sxp__list::before {
	content: "";
	position: absolute;
	top: calc(var(--sxp-node) / 2);
	bottom: calc(var(--sxp-node) / 2);
	left: calc(var(--sxp-node) / 2 - 1px);
	width: 2px;
	background: var(--sxp-rail);
}

.sxs--process .sxp__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--sxp-node) minmax(0, 1fr);
	align-items: start;
	gap: 22px;
}

.sxs--process .sxp__step + .sxp__step {
	margin-top: var(--sxp-gap);
}

.sxs--process .sxp__node {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--sxp-node);
	height: var(--sxp-node);
	border: 1px solid var(--sxs-hairline);
	border-radius: 50%;
	background: var(--sxs-canvas);
	transition: border-color 220ms ease, box-shadow 220ms ease;
}

.sxs--process .sxp__num {
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: var(--sxp-num);
}

.sxs--process .sxp--plain .sxp__node {
	--sxp-node: 12px;

	background: var(--sxp-num);
	border-color: var(--sxp-num);
}

/* ------------------------------------------------------------------- card */

.sxs--process .sxp__card {
	padding-top: calc((var(--sxp-node) - 1.35em) / 2);
	padding-bottom: 2px;
}

.sxs--process .sxp__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sxs-ink-900);
}

.sxs--process .sxp__desc {
	margin: 8px 0 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--sxs-ink-700);
}

.sxs--process .sxp__meta {
	display: inline-block;
	margin-top: 12px;
	padding: 4px 10px;
	border: 1px solid var(--sxs-brand-200);
	border-radius: 999px;
	background: var(--sxs-brand-50);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sxs-brand-700);
}

.sxs--process .sxp__step:hover .sxp__node {
	border-color: var(--sxp-num);
	box-shadow: 0 0 0 4px var(--sxs-brand-50);
}

/* -------------------------------------------------------------- reveal */

.sxs--process .sxp__step {
	opacity: 1;
}

.sxs--process .sxp.is-armed .sxp__step {
	opacity: 0;
	transform: translateY(14px);
}

.sxs--process .sxp.is-armed .sxp__step.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--sxp-i, 0) * 45ms);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
	.sxs--process .sxp__group {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.sxs--process .sxp__phase {
		padding-top: 0;
		margin-bottom: 24px;
	}

	.sxs--process .sxp--sticky .sxp__phasename {
		position: static;
	}

	.sxs--process .sxp__group + .sxp__group {
		margin-top: 48px;
	}
}

@media (max-width: 600px) {
	.sxs--process .sxp {
		--sxp-node: 38px;
		--sxp-gap: 26px;
	}

	.sxs--process .sxp__step {
		gap: 16px;
	}

	.sxs--process .sxp__heading {
		margin-bottom: 40px;
	}

	.sxs--process .sxp__title {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sxs--process .sxp.is-armed .sxp__step {
		opacity: 1;
		transform: none;
	}

	.sxs--process .sxp__node {
		transition: none;
	}
}

/* Right-to-left: the rail and the phase rule both flip. */
[dir="rtl"] .sxs--process .sxp__phasename {
	padding-left: 0;
	padding-right: 10px;
	border-left: 0;
	border-right: 3px solid var(--sxs-brand-600);
}

[dir="rtl"] .sxs--process .sxp__list::before {
	left: auto;
	right: calc(var(--sxp-node) / 2 - 1px);
}