/**
 * Metropolis Service List.
 */

.service-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mist-deep);
}

.service-row {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2.6fr) 24px;
	align-items: baseline;
	gap: 8px 32px;
	padding-block: 24px;
	border-bottom: 1px solid var(--mist-deep);
	text-decoration: none;
}

.service-row__name {
	font-family: var(--serif);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 1.2;
	color: var(--fascia);
}

.service-row__desc {
	color: var(--ink-soft);
}

.service-row__price {
	font-weight: 600;
	font-variant-numeric: tabular-nums lining-nums;
	text-align: right;
}

.service-row__arrow {
	align-self: center;
	color: var(--fascia);
	transition: transform 160ms var(--ease-out);
}

.is-fascia .service-rows,
.is-fascia .service-row { border-color: var(--fascia-line); }
.is-fascia .service-row__name { color: var(--on-fascia); }
.is-fascia .service-row__desc { color: var(--on-fascia-soft); }
.is-fascia .service-row__arrow { color: var(--on-fascia); }

@media (hover: hover) and (pointer: fine) {
	a.service-row:hover .service-row__name {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-decoration-color: var(--gold);
		text-underline-offset: 0.18em;
	}

	a.service-row:hover .service-row__arrow {
		transform: translateX(4px);
	}
}

@media (max-width: 720px) {
	.service-row {
		grid-template-columns: minmax(0, 1fr) 24px;
		padding-block: 20px;
	}

	.service-row__name { grid-column: 1; }
	.service-row__arrow { grid-column: 2; grid-row: 1; }
	.service-row__desc,
	.service-row__price { grid-column: 1 / -1; }
	.service-row__price { text-align: left; }
}


/* ==========================
   Grouped by customer need
   Group heading and one line on the left, its services on the right.
========================== */

.service-group {
	scroll-margin-top: calc(var(--header-h) + 24px);
}

.service-list--grouped .service-group {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 16px clamp(32px, 5vw, 72px);
	padding-block: 32px;
	border-top: 2px solid var(--fascia);
}

.service-list--grouped .service-group:last-child {
	padding-bottom: 0;
}

.service-group__name {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	line-height: 1.15;
	color: var(--fascia);
	text-wrap: balance;
}

.service-group__desc {
	max-width: 34ch;
	margin-top: 10px;
	font-size: 1rem;
	color: var(--ink-soft);
}

/* Inside a group the rows sit in the right column: tighter, no top rule. */
.service-list--grouped .service-rows {
	border-top: 0;
}

.service-list--grouped .service-row {
	grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr) 24px;
	padding-block: 18px;
}

.service-list--grouped .service-rows li:first-child .service-row {
	padding-top: 4px;
}

.service-list--grouped .service-rows li:last-child .service-row {
	border-bottom: 0;
}

.service-list--grouped .service-row__name {
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

.service-list--grouped .service-row__desc {
	font-size: 1rem;
}

.is-fascia .service-group { border-top-color: var(--gold); }
.is-fascia .service-group__name { color: var(--on-fascia); }
.is-fascia .service-group__desc { color: var(--on-fascia-soft); }

@media (max-width: 960px) {
	.service-list--grouped .service-group {
		grid-template-columns: minmax(0, 1fr);
	}

	.service-group__desc {
		max-width: 60ch;
	}
}

@media (max-width: 720px) {
	.service-list--grouped .service-row {
		grid-template-columns: minmax(0, 1fr) 24px;
	}
}