/*
 * Service pages: how it works (VOY-975, spec KB-525 section 04).
 *
 * Four stops on a drawn line (an ordered list; each stop's <strong> is its
 * label), then "What to expect": a month ruler with range bars taken from the
 * page's own expectation copy.
 *
 * svc-how.js adds .is-drawn when the section arrives, which draws the line,
 * and turns each "Months N to M" label into a bar on the ruler. Without it the
 * line is simply drawn and the expectations read as a list. Stops light on
 * hover in CSS.
 */

.vy-svc-page .vy-svc-how__stops {
	--line: 0;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin-bottom: 72px;
	padding: 36px 0 0;
	list-style: none;
}
/* The line, through the stops' dots. Drawn = scaled to full width. */
.vy-svc-page .vy-svc-how__stops::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--um-500), var(--um-700));
	transform-origin: left;
	transform: scaleX(1);
}
.vy-svc-page .vy-svc-how.is-js .vy-svc-how__stops::before {
	transform: scaleX(0);
	transition: transform 1400ms var(--svc-ease);
}
.vy-svc-page .vy-svc-how.is-drawn .vy-svc-how__stops::before { transform: scaleX(1); }

.vy-svc-page .vy-svc-how__stops > li {
	position: relative;
	font-size: 16px;
	line-height: 1.55;
	color: var(--fg-3);
	transition: color 220ms var(--svc-ease);
}
.vy-svc-page .vy-svc-how__stops > li::before {
	content: "";
	position: absolute;
	top: -36px;
	left: 0;
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	border: 2px solid var(--um-500);
	border-radius: 50%;
	background: var(--bg-canvas);
	transition: background-color 220ms var(--svc-ease), box-shadow 220ms var(--svc-ease);
}
.vy-svc-page .vy-svc-how__stops > li > strong {
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--um-500);
}
.vy-svc-page .vy-svc-how__stops > li:hover { color: var(--fg-1); }
.vy-svc-page .vy-svc-how__stops > li:hover::before {
	background: var(--um-500);
	box-shadow: 0 0 0 6px color-mix(in oklab, var(--um-500) 22%, transparent);
}

/* ---- What to expect ------------------------------------------------------------------- */

.vy-svc-page .vy-svc-expect {
	padding: 36px 40px;
	border: 1px solid var(--border-1);
	border-radius: 6px;
	background: var(--bg-panel);
}
.vy-svc-page .vy-svc-expect__title {
	margin-bottom: 24px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-3);
}
.vy-svc-page .vy-svc-expect__bars {
	display: grid;
	gap: 14px;
	margin-bottom: 24px;
	padding: 0;
	list-style: none;
	font-size: 16px;
	color: var(--fg-2);
}
.vy-svc-page .vy-svc-expect__bars strong { color: var(--fg-1); font-weight: 600; }
.vy-svc-page .vy-svc-expect__note { font-size: 15px; color: var(--fg-3); }

/* JavaScript on: a six-month ruler, one bar per range. */
.vy-svc-page .vy-svc-expect__ruler,
.vy-svc-page .vy-svc-expect.is-js .vy-svc-expect__bars {
	grid-template-columns: repeat(var(--months, 6), minmax(0, 1fr));
}
.vy-svc-page .vy-svc-expect__ruler {
	display: grid;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--border-1);
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--fg-4);
}
.vy-svc-page .vy-svc-expect__ruler > span { padding: 0 0 8px 8px; border-left: 1px solid var(--border-hair); }
.vy-svc-page .vy-svc-expect.is-js .vy-svc-expect__bars { column-gap: 0; }
.vy-svc-page .vy-svc-expect.is-js .vy-svc-expect__bars > li {
	grid-column: var(--from, 1) / calc(var(--to, 1) + 1);
	padding: 12px 14px;
	border-radius: 4px;
	background: color-mix(in oklab, var(--um-500) 18%, transparent);
	box-shadow: inset 3px 0 0 var(--um-500);
	font-size: 14px;
	line-height: 1.45;
}
.vy-svc-page .vy-svc-expect.is-js .vy-svc-expect__bars > li > strong {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--um-500);
}

/* ---- Mobile: a vertical line, the bars stacked ---------------------------------------------- */

@media (max-width: 767px) {
	.vy-svc-page .vy-svc-how__stops {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 0 0 0 32px;
		margin-bottom: 48px;
	}
	.vy-svc-page .vy-svc-how__stops::before {
		top: 0;
		bottom: 0;
		left: 5px;
		right: auto;
		width: 2px;
		height: auto;
		background: linear-gradient(180deg, var(--um-500), var(--um-700));
		transform-origin: top;
	}
	.vy-svc-page .vy-svc-how.is-js .vy-svc-how__stops::before { transform: scaleY(0); }
	.vy-svc-page .vy-svc-how.is-drawn .vy-svc-how__stops::before { transform: scaleY(1); }
	.vy-svc-page .vy-svc-how__stops > li::before { top: 4px; left: -32px; }
	.vy-svc-page .vy-svc-expect { padding: 24px 20px; }
	.vy-svc-page .vy-svc-expect__ruler { display: none; }
	.vy-svc-page .vy-svc-expect.is-js .vy-svc-expect__bars { grid-template-columns: minmax(0, 1fr); }
	.vy-svc-page .vy-svc-expect.is-js .vy-svc-expect__bars > li { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.vy-svc-page .vy-svc-how.is-js .vy-svc-how__stops::before { transform: none; transition: none; }
	.vy-svc-page .vy-svc-how__stops > li,
	.vy-svc-page .vy-svc-how__stops > li::before { transition: none; }
}