/* Layout: service-detail */
.sw-service-detail--alt { overflow: clip; } /* crops the pattern; unlike hidden it keeps position: sticky working */

.sw-service-detail__pattern {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	inline-size: 30rem;
	max-inline-size: 100%;
	block-size: var(--space-96);
}

.sw-service-detail__inner { position: relative; display: grid; gap: calc(var(--gap-l) * 2); } /* 64px phones, 96px tablets */

.sw-service-detail__intro { display: grid; align-content: start; justify-items: start; gap: var(--gap-m); }
.sw-service-detail__heading { display: grid; gap: var(--space-16); }

.sw-service-detail__groups { display: grid; gap: var(--gap-xl); }
.sw-service-detail__group { display: grid; gap: var(--space-24); }

@media (min-width: 62em) {
	.sw-service-detail__inner {
		grid-template-columns: minmax(0, 31.25rem) minmax(0, 50rem);
		justify-content: space-between;
		gap: var(--space-96);
	}

	/* Two columns: the intro stays in view below the fixed header while the groups scroll past */
	.sw-service-detail__intro {
		position: sticky;
		inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height) + var(--space-32));
		align-self: start;
	}
}