/*
 * Service pages: plans and pricing (VOY-975, spec KB-525 section 06).
 *
 * A bg-panel band (#plans) holding the plan grid (core/table), the
 * month-to-month note, and the add-ons and one-time price lists. Hovering a
 * plan lights its column. A <mark> in a plan's header cell is its
 * recommendation tag.
 *
 * Mobile: svc-plans.js adds pill tabs above the grid and shows one plan
 * column at a time via data-plan on the figure; without it the table scrolls
 * sideways.
 */

.vy-svc-page .vy-svc-plans {
	padding-block: 104px;
	background: var(--bg-panel);
	scroll-margin-top: 80px;
}

/* ---- The grid ------------------------------------------------------------------------ */

.vy-svc-page .vy-svc-plan-grid { overflow-x: auto; }
.vy-svc-page .vy-svc-plan-grid table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	table-layout: fixed;
}
.vy-svc-page .vy-svc-plan-grid :is(th, td) {
	padding: 16px 20px;
	border: 0;
	border-top: 1px solid var(--border-hair);
	text-align: left;
	vertical-align: top;
	font-size: 15px;
	line-height: 1.5;
	color: var(--fg-2);
	transition: background-color 200ms var(--svc-ease), color 200ms var(--svc-ease);
}
.vy-svc-page .vy-svc-plan-grid :is(th, td):first-child {
	width: 22%;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-4);
}
.vy-svc-page .vy-svc-plan-grid thead th {
	padding-block: 0 20px;
	border-top: 0;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--fg-1);
}
/* The price row: first on a hub, last on a service page, which marks the
   table vy-svc-plan-grid--price-last (short template, spec KB-526). */
.vy-svc-page .vy-svc-plan-grid:not(.vy-svc-plan-grid--price-last) tbody tr:first-child td:not(:first-child),
.vy-svc-page .vy-svc-plan-grid--price-last tbody tr:last-child td:not(:first-child) {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 500;
	color: var(--fg-1);
}

.vy-svc-page .vy-svc-plan-grid mark {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--um-500);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: 0.35em;
	color: var(--bg-canvas);
}

/* Column hover: the hovered plan's whole column lights. Up to four plans
   (columns 2 to 5; the website bands have four, VOY-986). */
.vy-svc-page .vy-svc-plan-grid table:has(:is(th, td):nth-child(2):hover) :is(th, td):nth-child(2),
.vy-svc-page .vy-svc-plan-grid table:has(:is(th, td):nth-child(3):hover) :is(th, td):nth-child(3),
.vy-svc-page .vy-svc-plan-grid table:has(:is(th, td):nth-child(4):hover) :is(th, td):nth-child(4),
.vy-svc-page .vy-svc-plan-grid table:has(:is(th, td):nth-child(5):hover) :is(th, td):nth-child(5) {
	background: color-mix(in oklab, var(--um-500) 10%, transparent);
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-plan-grid table:has(:is(th, td):nth-child(2):hover) thead th:nth-child(2),
.vy-svc-page .vy-svc-plan-grid table:has(:is(th, td):nth-child(3):hover) thead th:nth-child(3),
.vy-svc-page .vy-svc-plan-grid table:has(:is(th, td):nth-child(4):hover) thead th:nth-child(4),
.vy-svc-page .vy-svc-plan-grid table:has(:is(th, td):nth-child(5):hover) thead th:nth-child(5) {
	box-shadow: inset 0 2px 0 var(--um-500);
}

.vy-svc-page .vy-svc-plans__note {
	max-width: 720px;
	margin: 28px 0 72px;
	font-size: 16px;
	color: var(--fg-2);
}

/* ---- Price lists --------------------------------------------------------------------- */

.vy-svc-page .vy-svc-prices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
}
.vy-svc-page .vy-svc-prices__title {
	margin-bottom: 8px;
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 500;
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-prices__intro { margin-bottom: 20px; font-size: 15px; color: var(--fg-3); }
.vy-svc-page .vy-svc-prices__list { padding: 0; list-style: none; }
.vy-svc-page .vy-svc-prices__list > li:nth-child(n) {
	padding: 14px 0;
	border-top: 1px solid var(--border-hair);
	font-size: 15px;
	color: var(--fg-2);
}

/* ---- Mobile: one plan at a time, chosen with pill tabs ---------------------------------- */

.vy-svc-page .vy-svc-plans__tabs { display: none; }

@media (max-width: 767px) {
	.vy-svc-page .vy-svc-plans { padding-block: 72px; }
	.vy-svc-page .vy-svc-plans__tabs {
		display: flex;
		gap: 6px;
		margin-bottom: 20px;
	}
	/* Three equal pills; a long plan name wraps to two lines inside its pill. */
	.vy-svc-page .vy-svc-plans__tabs button {
		flex: 1 1 0;
		min-width: 0;
		min-height: 44px;
		padding: 6px 10px;
		line-height: 1.25;
		border: 1px solid var(--border-1);
		border-radius: 999px;
		background: transparent;
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--fg-2);
		cursor: pointer;
	}
	.vy-svc-page .vy-svc-plans__tabs button[aria-selected="true"] {
		border-color: var(--um-500);
		background: var(--um-500);
		color: var(--bg-canvas);
		font-weight: 600;
	}
	.vy-svc-page .vy-svc-plan-grid[data-plan] table { min-width: 0; }
	.vy-svc-page .vy-svc-plan-grid[data-plan] thead { display: none; }
	.vy-svc-page .vy-svc-plan-grid[data-plan] :is(th, td) { display: none; padding: 14px 16px; }
	.vy-svc-page .vy-svc-plan-grid[data-plan] :is(th, td):first-child { display: table-cell; width: 38%; }
	.vy-svc-page .vy-svc-plan-grid[data-plan="2"] :is(th, td):nth-child(2),
	.vy-svc-page .vy-svc-plan-grid[data-plan="3"] :is(th, td):nth-child(3),
	.vy-svc-page .vy-svc-plan-grid[data-plan="4"] :is(th, td):nth-child(4),
	.vy-svc-page .vy-svc-plan-grid[data-plan="5"] :is(th, td):nth-child(5) { display: table-cell; }
	.vy-svc-page .vy-svc-plan-grid[data-plan] {
		border: 1px solid var(--um-500);
		border-radius: 6px;
	}
	.vy-svc-page .vy-svc-plan-grid[data-plan] tbody tr:first-child :is(th, td) { border-top: 0; }
	.vy-svc-page .vy-svc-plans__note { margin-bottom: 48px; }
	.vy-svc-page .vy-svc-prices { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.vy-svc-page .vy-svc-plan-grid :is(th, td) { transition: none; }
}

/* ---- A project price table (VOY-984): one row per fixed-scope service, the
   price column last. Hovering a row lights it. Mobile: each row a card. --- */

.vy-svc-page .vy-svc-project-table table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.vy-svc-page .vy-svc-project-table :is(th, td) {
	padding: 20px;
	border: 0;
	border-top: 1px solid var(--border-hair);
	text-align: left;
	vertical-align: top;
	font-size: 15px;
	line-height: 1.55;
	color: var(--fg-2);
	transition: background-color 200ms var(--svc-ease);
}
.vy-svc-page .vy-svc-project-table thead th {
	padding-block: 0 14px;
	border-top: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-4);
}
.vy-svc-page .vy-svc-project-table :is(th, td):first-child { width: 24%; }
.vy-svc-page .vy-svc-project-table :is(th, td):last-child { width: 22%; text-align: right; }
.vy-svc-page .vy-svc-project-table tbody td:first-child {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 500;
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-project-table tbody td:last-child {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-project-table tbody tr:hover td {
	background: color-mix(in oklab, var(--um-500) 8%, transparent);
}
.vy-svc-page .vy-svc-project-table tbody tr:hover td:last-child { color: var(--um-500); }

@media (max-width: 767px) {
	.vy-svc-page .vy-svc-project-table thead { display: none; }
	.vy-svc-page .vy-svc-project-table :is(table, tbody, tr, td) { display: block; width: auto; }
	.vy-svc-page .vy-svc-project-table tr { padding: 18px 0; border-top: 1px solid var(--border-hair); }
	.vy-svc-page .vy-svc-project-table :is(th, td),
	.vy-svc-page .vy-svc-project-table :is(th, td):first-child,
	.vy-svc-page .vy-svc-project-table :is(th, td):last-child {
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}
	.vy-svc-page .vy-svc-project-table td + td { margin-top: 8px; }
	.vy-svc-page .vy-svc-project-table tbody td:last-child { color: var(--um-500); }
}

@media (prefers-reduced-motion: reduce) {
	.vy-svc-page .vy-svc-project-table :is(th, td) { transition: none; }
}