/* ==========================================================================
   VIC Theme — VIC Process Rail (.vic-rail)

   Steps in an ordered list + an SVG connector drawn by assets/js/process-rail.js
   through the real node centres. Loaded only on pages that use the widget.

     --wave | --straight | --offset | --cards | --number | --vertical   layout style
     --dir-{horizontal|vertical}          desktop (≥1024px)
     --tablet-{horizontal|two|vertical}   768–1023px
     --mobile-{stack|swipe}               below 768px
     --align-* --node-* --shape-* --activate-* --hover-* --alternate
     [data-motion] .is-armed .is-inview, steps .is-active   (JS)

   Base layout = vertical stack (node beside content). Horizontal grid /
   swipe layouts are opt-in per breakpoint in pure CSS (no layout shift when
   the script loads); the script only draws the connector and runs motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
.vic-rail {
	--vic-rail-node: var(--space-14);              /* 56 */
	--vic-rail-icon: var(--space-6);               /* 24 */
	--vic-rail-accent: var(--vic-blue);
	--vic-rail-icon-color: var(--vic-rail-accent);
	--vic-rail-node-bg: transparent;               /* the connector stops short of each node (inset), so no fill is needed */
	--vic-rail-node-border: var(--color-border);
	--vic-rail-node-border-width: 1.5px;
	--vic-rail-track: var(--color-border);
	--vic-rail-line-width: 1.5;
	--vic-rail-grad-from: var(--vic-blue);
	--vic-rail-grad-to: var(--vic-orange);
	--vic-rail-gap: var(--space-8);                /* between steps */
	--vic-rail-content-gap: var(--space-5);        /* rail → content */
	--vic-rail-offset: var(--space-10);            /* Offset Rail: 40 */
	--vic-rail-ease: var(--ease-standard);

	position: relative;
	color: var(--color-body);
}

@media (min-width: 1024px) {
	.vic-rail { --vic-rail-gap: var(--space-10); --vic-rail-content-gap: var(--space-6); }
}

.vic-rail__track {
	position: relative;
}

.vic-rail__steps {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--vic-rail-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   2. Step (base = vertical: node | content)
   -------------------------------------------------------------------------- */
.vic-rail__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--vic-rail-node) minmax(0, 1fr);
	align-items: start;
	column-gap: var(--vic-rail-content-gap);
	margin: 0;
	min-width: 0;
	text-align: left;
}

.vic-rail__node {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: var(--vic-rail-node);
	height: var(--vic-rail-node);
	border: var(--vic-rail-node-border-width) solid var(--vic-rail-node-border);
	border-radius: var(--vic-rail-node-radius, var(--radius-pill));
	background-color: var(--vic-rail-node-bg);
	color: var(--vic-rail-icon-color);
	transition:
		transform var(--motion-default) var(--vic-rail-ease),
		border-color var(--vic-rail-speed) var(--vic-rail-ease) var(--vic-rail-delay, 0ms),
		background-color var(--vic-rail-speed) var(--vic-rail-ease) var(--vic-rail-delay, 0ms),
		color var(--vic-rail-speed) var(--vic-rail-ease) var(--vic-rail-delay, 0ms),
		opacity var(--vic-rail-speed) var(--vic-rail-ease) var(--vic-rail-delay, 0ms),
		box-shadow var(--motion-default) var(--vic-rail-ease);
}

/* Active node (all nodes when nothing is animating): accent outline. */
.vic-rail__step.is-active .vic-rail__node,
.vic-rail:is(.is-final, [data-motion="none"]) .vic-rail__node,
body.elementor-editor-active .vic-rail:not(.is-previewing) .vic-rail__node {
	border-color: var(--vic-rail-accent);
}

.vic-rail--shape-rounded .vic-rail__node { --vic-rail-node-radius: var(--radius-card); }
.vic-rail--shape-square .vic-rail__node  { --vic-rail-node-radius: 0; }
.vic-rail--shape-none .vic-rail__node {
	width: auto;
	height: auto;
	min-width: var(--vic-rail-icon);
	border-color: transparent !important;
	background-color: transparent;
}

.vic-rail__icon {
	display: grid;
	place-items: center;
	font-size: var(--vic-rail-icon);
	line-height: 1;
	transition: transform var(--motion-default) var(--vic-rail-ease);
}

.vic-rail__icon :is(svg, i) {
	display: block;
	width: var(--vic-rail-icon);
	height: var(--vic-rail-icon);
	font-size: var(--vic-rail-icon);
}

.vic-rail__icon :where(svg:not([fill])) {
	fill: currentColor;
}

.vic-rail__icon img {
	width: var(--vic-rail-icon);
	height: auto;
}

.vic-rail__image {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.vic-rail__number {
	color: var(--vic-rail-accent);
	font-size: var(--text-body-size);
	font-weight: var(--weight-semibold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Content */
.vic-rail__content {
	position: relative;
	min-width: 0;
	transition:
		opacity var(--vic-rail-speed) var(--vic-rail-ease) var(--vic-rail-delay, 0ms),
		transform var(--vic-rail-speed) var(--vic-rail-ease) var(--vic-rail-delay, 0ms);
}

.vic-rail__content > * {
	margin: 0;
	max-width: 100%;
}

.vic-rail__eyebrow {
	margin-block-end: var(--space-2);
}

.vic-rail__title {
	margin-block-end: var(--space-2);
	color: var(--color-heading);
	font-size: var(--text-h5-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-h5-line);
	overflow-wrap: anywhere;
	transition: color var(--motion-default) var(--vic-rail-ease);
}

.vic-rail__text {
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
}

.vic-rail__text:not(:last-child) {
	margin-block-end: var(--space-3);
}

/* Vertical stack: content aligns with the node's centre line. */
.vic-rail__step > .vic-rail__content {
	padding-block-start: calc((var(--vic-rail-node) - var(--text-h5-size) * var(--text-h5-line)) / 2);
}

/* --------------------------------------------------------------------------
   3. Horizontal grid (desktop: Desktop Direction = Horizontal; tablet: 1 row /
      2 columns). Node above content, content aligned by the Alignment option.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.vic-rail--dir-horizontal .vic-rail__steps {
		grid-template-columns: repeat(var(--vic-rail-cols), minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.vic-rail--dir-horizontal.vic-rail--tablet-horizontal .vic-rail__steps {
		grid-template-columns: repeat(var(--vic-rail-count), minmax(0, 1fr));
	}

	.vic-rail--dir-horizontal.vic-rail--tablet-two .vic-rail__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Grid-step look: node above content (same rules for each horizontal context). */
@media (min-width: 1024px) {
	.vic-rail--dir-horizontal .vic-rail__step {
		display: flex;
		flex-direction: column;
		align-items: var(--vic-rail-node-justify, center);
		text-align: var(--vic-rail-text-align, center);
	}

	.vic-rail--dir-horizontal .vic-rail__step > .vic-rail__content {
		width: 100%;
		margin-block-start: var(--vic-rail-content-gap);
		padding-block-start: var(--card-pad-top, 0);
	}

	.vic-rail--dir-horizontal.vic-rail--offset .vic-rail__step:nth-child(even) {
		padding-block-start: var(--vic-rail-offset);
	}

	.vic-rail--dir-horizontal.vic-rail--align-center .vic-rail__content > * { margin-inline: auto; }
	.vic-rail--dir-horizontal.vic-rail--align-right .vic-rail__content > *  { margin-inline-start: auto; }

	.vic-rail--dir-horizontal.vic-rail--cards .vic-rail__content::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 50%;
		width: 1px;
		height: var(--vic-rail-content-gap);
		background-color: var(--vic-rail-track);
	}

	.vic-rail--dir-horizontal.vic-rail--cards.vic-rail--node-start .vic-rail__content::before { left: calc(var(--vic-rail-node) / 2); }
	.vic-rail--dir-horizontal.vic-rail--cards.vic-rail--node-end .vic-rail__content::before   { left: auto; right: calc(var(--vic-rail-node) / 2); }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.vic-rail--dir-horizontal:is(.vic-rail--tablet-horizontal, .vic-rail--tablet-two) .vic-rail__step {
		display: flex;
		flex-direction: column;
		align-items: var(--vic-rail-node-justify, center);
		text-align: var(--vic-rail-text-align, center);
	}

	.vic-rail--dir-horizontal:is(.vic-rail--tablet-horizontal, .vic-rail--tablet-two) .vic-rail__step > .vic-rail__content {
		width: 100%;
		margin-block-start: var(--vic-rail-content-gap);
		padding-block-start: var(--card-pad-top, 0);
	}

	.vic-rail--dir-horizontal:is(.vic-rail--tablet-horizontal, .vic-rail--tablet-two).vic-rail--offset .vic-rail__step:nth-child(even) {
		padding-block-start: var(--vic-rail-offset);
	}

	.vic-rail--dir-horizontal:is(.vic-rail--tablet-horizontal, .vic-rail--tablet-two).vic-rail--align-center .vic-rail__content > * { margin-inline: auto; }
	.vic-rail--dir-horizontal:is(.vic-rail--tablet-horizontal, .vic-rail--tablet-two).vic-rail--align-right .vic-rail__content > *  { margin-inline-start: auto; }

	.vic-rail--dir-horizontal:is(.vic-rail--tablet-horizontal, .vic-rail--tablet-two).vic-rail--cards .vic-rail__content::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 50%;
		width: 1px;
		height: var(--vic-rail-content-gap);
		background-color: var(--vic-rail-track);
	}

	.vic-rail--dir-horizontal:is(.vic-rail--tablet-horizontal, .vic-rail--tablet-two).vic-rail--cards.vic-rail--node-start .vic-rail__content::before { left: calc(var(--vic-rail-node) / 2); }
	.vic-rail--dir-horizontal:is(.vic-rail--tablet-horizontal, .vic-rail--tablet-two).vic-rail--cards.vic-rail--node-end .vic-rail__content::before   { left: auto; right: calc(var(--vic-rail-node) / 2); }
}

@media (max-width: 767px) {
	.vic-rail--mobile-swipe .vic-rail__step {
		display: flex;
		flex-direction: column;
		align-items: var(--vic-rail-node-justify, center);
		text-align: var(--vic-rail-text-align, center);
	}

	.vic-rail--mobile-swipe .vic-rail__step > .vic-rail__content {
		width: 100%;
		margin-block-start: var(--vic-rail-content-gap);
		padding-block-start: var(--card-pad-top, 0);
	}

	.vic-rail--mobile-swipe.vic-rail--offset .vic-rail__step:nth-child(even) {
		padding-block-start: var(--vic-rail-offset);
	}

	.vic-rail--mobile-swipe.vic-rail--align-center .vic-rail__content > * { margin-inline: auto; }
	.vic-rail--mobile-swipe.vic-rail--align-right .vic-rail__content > *  { margin-inline-start: auto; }

	.vic-rail--mobile-swipe.vic-rail--cards .vic-rail__content::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 50%;
		width: 1px;
		height: var(--vic-rail-content-gap);
		background-color: var(--vic-rail-track);
	}

	.vic-rail--mobile-swipe.vic-rail--cards.vic-rail--node-start .vic-rail__content::before { left: calc(var(--vic-rail-node) / 2); }
	.vic-rail--mobile-swipe.vic-rail--cards.vic-rail--node-end .vic-rail__content::before   { left: auto; right: calc(var(--vic-rail-node) / 2); }
}

/* Alignment mapping. */
.vic-rail--align-left   { --vic-rail-text-align: left; }
.vic-rail--align-center { --vic-rail-text-align: center; }
.vic-rail--align-right  { --vic-rail-text-align: right; }
.vic-rail--node-start   { --vic-rail-node-justify: flex-start; }
.vic-rail--node-center  { --vic-rail-node-justify: center; }
.vic-rail--node-end     { --vic-rail-node-justify: flex-end; }


/* Mobile swipe: native horizontal scrolling with snap points. */
@media (max-width: 767px) {
	.vic-rail--mobile-swipe .vic-rail__track {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vic-rail--mobile-swipe .vic-rail__track::-webkit-scrollbar {
		display: none;
	}

	.vic-rail--mobile-swipe .vic-rail__steps {
		display: flex;
		width: max-content;
		gap: var(--vic-rail-gap);
		padding-block-end: var(--space-2);
	}

	.vic-rail--mobile-swipe .vic-rail__step {
		flex: 0 0 auto;
		width: min(78vw, 18rem);
		scroll-snap-align: start;
	}

	.vic-rail--mobile-swipe .vic-rail__track:focus-visible {
		outline: var(--focus-ring-width) solid var(--color-focus-ring);
		outline-offset: var(--focus-ring-offset);
	}
}

/* Vertical, alternating sides (desktop, Vertical direction / Vertical Rail). */
@media (min-width: 1024px) {
	.vic-rail--dir-vertical.vic-rail--alternate .vic-rail__step {
		grid-template-columns: minmax(0, 1fr) var(--vic-rail-node) minmax(0, 1fr);
	}

	.vic-rail--dir-vertical.vic-rail--alternate .vic-rail__node {
		grid-column: 2;
		grid-row: 1;
	}

	.vic-rail--dir-vertical.vic-rail--alternate .vic-rail__step:nth-child(odd) .vic-rail__content {
		grid-column: 3;
		grid-row: 1;
	}

	.vic-rail--dir-vertical.vic-rail--alternate .vic-rail__step:nth-child(even) .vic-rail__content {
		grid-column: 1;
		grid-row: 1;
		text-align: right;
	}

	.vic-rail--dir-vertical.vic-rail--alternate .vic-rail__step:nth-child(even) .vic-rail__content > * {
		margin-inline-start: auto;
	}
}

/* --------------------------------------------------------------------------
   4. Layout styles
   -------------------------------------------------------------------------- */

/* Cards on Rail: content in a light card; a short stem joins card and node. */
.vic-rail--cards .vic-rail__content {
	box-sizing: border-box;
	padding: var(--card-pad);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background-color: var(--color-background);
	color: var(--color-body);
}

.vic-rail--cards {
	--card-pad-top: var(--card-pad);
}

.vic-rail--cards .vic-rail__step > .vic-rail__content {
	padding-block-start: var(--card-pad);
}

/* Equal-height cards in a row: steps already stretch to the row height
   (grid / flex row), and in the node-above-card look each step is a flex
   column — the card takes the remaining height. No effect in vertical rails. */
.vic-rail--cards .vic-rail__step > .vic-rail__content {
	flex-grow: 1;
}


/* Number Rail: oversized figures instead of icons. */
.vic-rail--number .vic-rail__number {
	font-size: var(--text-h2-size);
	font-weight: var(--weight-bold);
	letter-spacing: var(--text-h2-tracking);
	padding-inline: var(--space-1);
	background-color: var(--vic-rail-node-bg);
}

.vic-rail--number .vic-rail__step > .vic-rail__content {
	padding-block-start: var(--space-2);
}

/* --------------------------------------------------------------------------
   5. Connector (SVG built by JS)
      g.vic-rail__seg  > path.track (muted, full)
                       > path.line  (masked: drawn as the mask's dash offset goes 1 → 0)
                       > mask > path (dash reveals the line)
   -------------------------------------------------------------------------- */
.vic-rail__svg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	overflow: visible;
	pointer-events: none;
}

.vic-rail__svg path {
	fill: none;
	vector-effect: non-scaling-stroke;
}

.vic-rail__seg-track {
	stroke: var(--vic-rail-track);
	stroke-width: var(--vic-rail-line-width);
	stroke-linecap: round;
	opacity: 0;
}

.vic-rail:is([data-motion="progressive"], [data-motion="scroll"]) .vic-rail__seg-track {
	opacity: 1;
}

.vic-rail__seg-line {
	stroke: var(--vic-rail-seg-color, var(--vic-rail-line, var(--vic-rail-accent)));
	stroke-width: var(--vic-rail-line-width);
	stroke-linecap: round;
	transition: stroke-width var(--motion-default) var(--vic-rail-ease), opacity var(--motion-default) var(--vic-rail-ease);
}

.vic-rail[data-gradient="yes"] .vic-rail__seg-line { stroke: var(--vic-rail-gradient); }
.vic-rail[data-connector="dashed"] :is(.vic-rail__seg-line, .vic-rail__seg-track) { stroke-dasharray: 6 6; }
.vic-rail[data-connector="dotted"] :is(.vic-rail__seg-line, .vic-rail__seg-track) { stroke-dasharray: 0.1 6; stroke-width: calc(var(--vic-rail-line-width) + 0.5); }

.vic-rail__grad-from { stop-color: var(--vic-rail-grad-from); }
.vic-rail__grad-to   { stop-color: var(--vic-rail-grad-to); }

.vic-rail__seg-mask {
	stroke: #fff;
	stroke-width: 12;
	stroke-linecap: butt;
	stroke-dasharray: 1;
	stroke-dashoffset: 0; /* JS sets 1 → 0 inline (with duration / delay) to draw */
}

.vic-rail__seg.is-hover .vic-rail__seg-line {
	stroke-width: calc(var(--vic-rail-line-width) + 1);
}

/* --------------------------------------------------------------------------
   6. Motion states. The start state applies from first paint when JS runs
      (html.js), never in the editor; JS marks the rail .is-final when it
      shows the final state (reduced motion, no motion). If the script never
      arms the rail, a failsafe reveals everything after 2.5s.
   -------------------------------------------------------------------------- */
@keyframes vic-rail-failsafe { to { opacity: 1; transform: none; border-color: var(--vic-rail-accent); color: inherit; } }

/* Reveal Steps / Draw + Reveal: hidden until the step is reached. */
html.js body:not(.elementor-editor-active) .vic-rail:not(.is-final):is([data-motion="reveal"], [data-motion="draw-reveal"]) .vic-rail__step:not(.is-active) .vic-rail__content,
.vic-rail.is-previewing:not(.is-final):is([data-motion="reveal"], [data-motion="draw-reveal"]) .vic-rail__step:not(.is-active) .vic-rail__content {
	opacity: 0;
	transform: translateY(16px);
}

html.js body:not(.elementor-editor-active) .vic-rail:not(.is-final)[data-motion="reveal"] .vic-rail__step:not(.is-active) .vic-rail__node,
.vic-rail.is-previewing:not(.is-final)[data-motion="reveal"] .vic-rail__step:not(.is-active) .vic-rail__node {
	opacity: 0;
	transform: translateY(16px);
}

html.js body:not(.elementor-editor-active) .vic-rail:not(.is-final)[data-motion="draw-reveal"] .vic-rail__step:not(.is-active) .vic-rail__node,
.vic-rail.is-previewing:not(.is-final)[data-motion="draw-reveal"] .vic-rail__step:not(.is-active) .vic-rail__node {
	opacity: 0.35;
	transform: scale(0.92);
}

/* Progressive / Scroll Progress: muted until active. */
html.js body:not(.elementor-editor-active) .vic-rail:not(.is-final):is([data-motion="progressive"], [data-motion="scroll"]) .vic-rail__step:not(.is-active) .vic-rail__node,
.vic-rail.is-previewing:not(.is-final):is([data-motion="progressive"], [data-motion="scroll"]) .vic-rail__step:not(.is-active) .vic-rail__node {
	border-color: var(--vic-rail-track);
	color: var(--color-muted);
}

html.js body:not(.elementor-editor-active) .vic-rail:not(.is-final):is([data-motion="progressive"], [data-motion="scroll"]) .vic-rail__step:not(.is-active) .vic-rail__content,
.vic-rail.is-previewing:not(.is-final):is([data-motion="progressive"], [data-motion="scroll"]) .vic-rail__step:not(.is-active) .vic-rail__content {
	opacity: 0.35;
}

html.js body:not(.elementor-editor-active) .vic-rail:not(.is-final):is([data-motion="progressive"], [data-motion="scroll"]) .vic-rail__step:not(.is-active) .vic-rail__number,
.vic-rail.is-previewing:not(.is-final):is([data-motion="progressive"], [data-motion="scroll"]) .vic-rail__step:not(.is-active) .vic-rail__number {
	color: var(--color-muted);
}

html.js body:not(.elementor-editor-active) .vic-rail:not(.is-armed):not(.is-final):not([data-motion="none"]) :is(.vic-rail__node, .vic-rail__content) {
	animation: vic-rail-failsafe 1ms 2.5s forwards;
}

/* Node activation (plays when a step becomes active during an animation). */
@keyframes vic-rail-scale  { from { transform: scale(0.92); } }
@keyframes vic-rail-pulse  { 50% { transform: scale(1.08); } }
@keyframes vic-rail-ring   { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vic-rail-accent) 35%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }
@keyframes vic-rail-rotate { from { transform: rotate(-12deg); } }

.vic-rail.is-animating .vic-rail__step.is-active .vic-rail__node {
	animation-duration: var(--vic-rail-speed);
	animation-timing-function: var(--vic-rail-ease);
	animation-delay: var(--vic-rail-delay, 0ms);
	animation-fill-mode: backwards;
}

.vic-rail.is-animating.vic-rail--activate-scale .vic-rail__step.is-active .vic-rail__node { animation-name: vic-rail-scale; }
.vic-rail.is-animating.vic-rail--activate-pulse .vic-rail__step.is-active .vic-rail__node { animation-name: vic-rail-pulse; }
.vic-rail.is-animating.vic-rail--activate-ring .vic-rail__step.is-active .vic-rail__node  { animation-name: vic-rail-ring; animation-duration: calc(var(--vic-rail-speed) * 1.4); }
.vic-rail.is-animating.vic-rail--activate-rotate .vic-rail__step.is-active .vic-rail__icon {
	animation: vic-rail-rotate var(--vic-rail-speed) var(--vic-rail-ease) var(--vic-rail-delay, 0ms) backwards;
}

/* Fill: the active node fills with the accent (static, not only during motion). */
.vic-rail--activate-fill .vic-rail__step.is-active .vic-rail__node,
.vic-rail--activate-fill:is(.is-final, [data-motion="none"]) .vic-rail__node,
body.elementor-editor-active .vic-rail--activate-fill:not(.is-previewing) .vic-rail__node {
	background-color: var(--vic-rail-accent);
	color: var(--color-on-dark);
}

.vic-rail--activate-fill.vic-rail--shape-none .vic-rail__node { background-color: transparent; color: var(--vic-rail-accent); }

/* --------------------------------------------------------------------------
   7. Hover / focus. Movement on real hover devices only.
   -------------------------------------------------------------------------- */
.vic-rail--hover-step .vic-rail__step:is(:hover, :focus-within) .vic-rail__node {
	border-color: var(--vic-rail-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--vic-rail-accent) 12%, transparent);
}

.vic-rail--hover-step .vic-rail__step:is(:hover, :focus-within) .vic-rail__title {
	color: var(--vic-rail-accent);
}

@media (hover: hover) {
	.vic-rail--hover-lift .vic-rail__step:hover .vic-rail__node  { transform: translateY(-3px); }
	.vic-rail--hover-scale .vic-rail__step:hover .vic-rail__node { transform: scale(1.03); }
	.vic-rail--hover-icon .vic-rail__step:hover .vic-rail__icon  { transform: translateY(-3px); }

	.vic-rail__step--clickable:hover .vic-rail__cta .icon { transform: translateX(var(--space-1)); }
	.vic-rail__step--clickable:hover .vic-rail__cta .vic-button__label::after { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   8. Links: title, CTA, or the whole step (stretched title link).
   -------------------------------------------------------------------------- */
.vic-rail__link {
	color: inherit;
	text-decoration: none;
}

.vic-rail__link:hover {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.vic-rail__step--clickable {
	cursor: pointer;
}

.vic-rail__step--clickable .vic-rail__link:hover {
	text-decoration: none;
}

.vic-rail__step--clickable .vic-rail__link::after {
	content: "";
	position: absolute;
	inset: calc(var(--space-2) * -1);
	z-index: 2;
	border-radius: var(--radius-card);
}

/* The overlay covers the content block; the node carries its own (hidden)
   pointer link, so the whole step is clickable. */
.vic-rail__node--link {
	text-decoration: none;
}

@supports selector(:has(*)) {
	.vic-rail__step--clickable .vic-rail__link:focus-visible {
		outline: none;
	}

	.vic-rail__step--clickable:has(.vic-rail__link:focus-visible) {
		border-radius: var(--radius-card);
		outline: var(--focus-ring-width) solid var(--color-focus-ring);
		outline-offset: var(--space-2);
	}
}

.vic-rail__step:focus-within .vic-rail__cta .icon {
	transform: translateX(var(--space-1));
}

/* Dark sections */
:is(.surface-dark, .on-dark) .vic-rail {
	--vic-rail-accent: var(--vic-orange);
	--vic-rail-node-bg: var(--vic-blue-deep);
	--vic-rail-node-border: rgba(255, 255, 255, 0.24);
	--vic-rail-track: rgba(255, 255, 255, 0.2);
}

:is(.surface-dark, .on-dark) .vic-rail .vic-rail__title {
	color: var(--color-on-dark);
}

/* --------------------------------------------------------------------------
   9. Reduced motion: everything visible, nothing moves or draws.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.vic-rail :is(.vic-rail__node, .vic-rail__content, .vic-rail__icon, .vic-rail__seg-mask, .vic-rail__seg-line) {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

	.vic-rail .vic-rail__seg-mask {
		stroke-dashoffset: 0 !important;
	}

	.vic-rail:not(.vic-rail--shape-none) .vic-rail__step .vic-rail__node {
		border-color: var(--vic-rail-accent) !important;
	}
}