/*
 * Service pages: pairs well with (VOY-975, spec KB-525 section 07).
 *
 * Two cross-sell cards, each with its "from" price and, where one exists, a
 * free tool link. The heading's anchor stretches over the card. CSS only.
 */

.vy-svc-page .vy-svc-pairs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.vy-svc-page .vy-svc-pair {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px;
	border: 1px solid var(--border-1);
	border-radius: 6px;
	background: var(--bg-panel);
	transition: border-color 220ms var(--svc-ease);
}
.vy-svc-page .vy-svc-pair:is(:hover, :focus-within) { border-color: var(--um-500); }

.vy-svc-page .vy-svc-pair__name {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-pair__name a { color: inherit; text-decoration: none; }
.vy-svc-page .vy-svc-pair__name a::before { content: ""; position: absolute; inset: 0; }
.vy-svc-page .vy-svc-pair__name a:focus-visible { outline: none; }
.vy-svc-page .vy-svc-pair:has(.vy-svc-pair__name a:focus-visible) {
	outline: 2px solid var(--um-500);
	outline-offset: 2px;
}
.vy-svc-page .vy-svc-pair > p { font-size: 16px; color: var(--fg-2); }

.vy-svc-page .vy-svc-pair > .vy-svc-pair__price {
	margin-top: auto;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--um-500);
}
/* The tool link sits above the stretched card link. */
.vy-svc-page .vy-svc-pair__tool { position: relative; z-index: 1; font-size: 15px; }

@media (max-width: 767px) {
	.vy-svc-page .vy-svc-pairs__grid { grid-template-columns: minmax(0, 1fr); }
	.vy-svc-page .vy-svc-pair { padding: 24px; }
	.vy-svc-page .vy-svc-pair__name { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.vy-svc-page .vy-svc-pair { transition: none; }
}

/* A card from another practice carries that umbrella's style, so its tag,
   hover border and price read in its own colour (VOY-976). */
.vy-svc-page .vy-svc-pair > .vy-svc-pair__tag {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--um-500);
}