/*
 * Service pages: more in the practice (VOY-976, spec KB-526 section 6).
 *
 * Three cards: back to the hub, and the two sibling services. Each is a list
 * item whose link stretches over it. Mobile: 52px link rows. CSS only.
 */

.vy-svc-page .vy-svc-more__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	padding: 0;
	list-style: none;
}
.vy-svc-page .vy-svc-more__list > li:nth-child(n) {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 28px 56px;
	border: 1px solid var(--border-1);
	border-radius: 6px;
	background: var(--bg-panel);
	font-size: 15px;
	color: var(--fg-3);
	transition: border-color 220ms var(--svc-ease);
}
.vy-svc-page .vy-svc-more__list a {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 500;
	color: var(--fg-1);
	text-decoration: none;
}
.vy-svc-page .vy-svc-more__list a::before { content: ""; position: absolute; inset: 0; }
.vy-svc-page .vy-svc-more__list a:focus-visible { outline: none; }
.vy-svc-page .vy-svc-more__list > li:has(a:focus-visible) { outline: 2px solid var(--um-500); outline-offset: 2px; }
/* The arrow, drawn. */
.vy-svc-page .vy-svc-more__list > li::after {
	content: "";
	position: absolute;
	left: 30px;
	bottom: 26px;
	width: 10px;
	height: 10px;
	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);
}
.vy-svc-page .vy-svc-more__list > li:is(:hover, :focus-within) { border-color: var(--um-500); }
.vy-svc-page .vy-svc-more__list > li:is(:hover, :focus-within)::after {
	border-color: var(--um-500);
	transform: translateX(6px) rotate(45deg);
}

@media (max-width: 767px) {
	.vy-svc-page .vy-svc-more__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.vy-svc-page .vy-svc-more__list > li:nth-child(n) {
		min-height: 52px;
		justify-content: center;
		padding: 12px 40px 12px 0;
		border: 0;
		border-top: 1px solid var(--border-hair);
		border-radius: 0;
		background: none;
		font-size: 0; /* rows show the link only */
	}
	.vy-svc-page .vy-svc-more__list a { font-size: 17px; }
	.vy-svc-page .vy-svc-more__list > li::after { left: auto; right: 8px; bottom: auto; top: 50%; margin-top: -5px; }
}

@media (prefers-reduced-motion: reduce) {
	.vy-svc-page .vy-svc-more__list > li,
	.vy-svc-page .vy-svc-more__list > li::after { transition: none; }
}