/**
 * Services overview + service detail pages.
 * (.service-grid--capabilities lives in components.css so it works on the
 * homepage capabilities grid too.)
 */

/* Service detail layout */
.service-detail__layout {
	display: grid;
	gap: var(--jai-space-2xl);
}

.service-detail__lead {
	font-size: var(--jai-font-size-lg);
	color: var(--jai-color-text);
}

.service-detail__block {
	margin-top: var(--jai-space-xl);
}

.service-detail__block h2,
.service-detail__quality h2 {
	font-size: 1.5rem;
}

.service-detail__quality {
	padding: var(--jai-space-xl);
	border: 1px solid var(--jai-color-border);
	border-radius: var(--jai-radius-lg);
	background: var(--jai-color-surface);
}

.service-detail__quality p {
	color: var(--jai-color-muted);
}

.service-products {
	display: grid;
	gap: var(--jai-space-lg);
}

@media (min-width: 768px) {
	.service-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.service-detail__layout {
		grid-template-columns: 1.5fr 1fr;
		align-items: start;
	}

	.service-detail__aside {
		position: sticky;
		top: 6.5rem;
	}
}