/*
 * Service pages: the services index (VOY-975, spec KB-525 section 02).
 *
 * The practice's service pages as index rows: number, name, one-line
 * description, "includes" tags and an arrow. Rows are a fixed 168px with
 * their content centred, so every row is the same height whatever its copy.
 *
 * This is the hub's one live dither surface. svc-index.js puts a
 * vy-dither.js field behind the rows: each row's seeded blink in the 700,
 * fading at the edges, brightening toward the 500 on hover or focus, and the
 * cursor comet. There is no burst here. The field is off on touch and with
 * reduced motion, where the rows stand on their own.
 *
 * The whole row is the link: the name's anchor stretches over it.
 */

.vy-svc-page .vy-svc-index {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid var(--border-hair);
}
.vy-svc-page .vy-svc-index > .vy-dither {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.vy-svc-page .vy-svc-row {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr) 40px;
	gap: 0 32px;
	align-items: center;
	height: 168px;
	box-sizing: border-box;
	padding: 0 8px;
	border-top: 1px solid var(--border-hair);
}

.vy-svc-page .vy-svc-row__num {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--fg-4);
	transition: color 220ms var(--svc-ease);
}

.vy-svc-page .vy-svc-row__name {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--fg-2);
	transition: color 220ms var(--svc-ease);
}
.vy-svc-page .vy-svc-row__name a {
	color: inherit;
	text-decoration: none;
}
.vy-svc-page .vy-svc-row__name a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.vy-svc-page .vy-svc-row__name a:focus-visible { outline: none; }
.vy-svc-page .vy-svc-row:has(a:focus-visible) {
	outline: 2px solid var(--um-500);
	outline-offset: -2px;
}

.vy-svc-page .vy-svc-row__desc {
	font-size: 16px;
	line-height: 1.5;
	color: var(--fg-3);
}

.vy-svc-page .vy-svc-row__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	list-style: none;
}
.vy-svc-page .vy-svc-row__tags > li:nth-child(n) {
	padding: 5px 10px;
	border: 1px solid color-mix(in oklab, var(--um-500) 45%, transparent);
	border-radius: 3px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--um-500);
	transition: background-color 220ms var(--svc-ease), color 220ms var(--svc-ease);
}

/* The arrow: drawn, not typed, so it is not in the row's text. */
.vy-svc-page .vy-svc-row::after {
	content: "";
	justify-self: end;
	width: 14px;
	height: 14px;
	border-top: 2px solid var(--fg-4);
	border-right: 2px solid var(--fg-4);
	transform: rotate(45deg);
	transition: transform 260ms var(--svc-ease), border-color 220ms var(--svc-ease);
}

/* ---- Hover and focus: brighter, solid tags, the arrow nudges 8px ------------------ */

.vy-svc-page .vy-svc-row:is(:hover, :focus-within) .vy-svc-row__num { color: var(--um-500); }
.vy-svc-page .vy-svc-row:is(:hover, :focus-within) .vy-svc-row__name { color: var(--fg-1); }
.vy-svc-page .vy-svc-row:is(:hover, :focus-within, .is-active) .vy-svc-row__tags > li {
	border-color: var(--um-500);
	background: var(--um-500);
	color: var(--bg-canvas);
	font-weight: 600;
}
.vy-svc-page .vy-svc-row:is(:hover, :focus-within)::after {
	border-color: var(--um-500);
	transform: translateX(8px) rotate(45deg);
}

/* ---- Mobile: stacked cards, a fixed 196px, tap to set active ------------------------ */

@media (max-width: 767px) {
	.vy-svc-page .vy-svc-index { display: grid; gap: 12px; border-bottom: 0; }
	.vy-svc-page .vy-svc-row {
		grid-template-columns: minmax(0, 1fr) 24px;
		grid-template-rows: auto auto auto 1fr;
		align-items: start;
		height: 196px;
		padding: 20px;
		gap: 6px 12px;
		border: 1px solid var(--border-1);
		border-radius: 6px;
	}
	.vy-svc-page .vy-svc-row > * { grid-column: 1; }
	.vy-svc-page .vy-svc-row::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
	.vy-svc-page .vy-svc-row__name { font-size: 22px; }
	.vy-svc-page .vy-svc-row__desc { font-size: 15px; }
	.vy-svc-page .vy-svc-row__tags { align-self: end; flex-wrap: nowrap; gap: 6px; }
	.vy-svc-page .vy-svc-row__tags > li:nth-child(n) { padding: 4px 7px; font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; }
	.vy-svc-page .vy-svc-row.is-active {
		border-color: var(--um-500);
		background: color-mix(in oklab, var(--um-500) 10%, var(--bg-canvas));
	}
}

@media (prefers-reduced-motion: reduce) {
	.vy-svc-page .vy-svc-row::after,
	.vy-svc-page .vy-svc-row__tags > li { transition: none; }
	.vy-svc-page .vy-svc-row:is(:hover, :focus-within)::after { transform: rotate(45deg); }
}