/* Services page sections. See doc 07 §7.5. */

/* Intro */
.ads-services-intro__inner {
	display: grid;
	gap: var(--ads-space-4);
	align-items: start;
}

.ads-services-intro__inner p {
	margin: 0;
}

/* The opening sentence reads strongest, so it isn't the muted lead color. */
.ads-services-intro .ads-lead {
	color: var(--ads-color-navy);
}

/* Sub-nav: it stays in view only while the 3 trades scroll past, because it sticks inside their wrapper. */
.ads-subnav {
	position: sticky;
	top: var(--ads-subnav-top, 4.5rem);
	z-index: 50;
	padding-block: var(--ads-space-2);
	background: var(--ads-color-bg);
	border-block: 1px solid var(--ads-color-border);
	box-shadow: var(--ads-shadow-sm);
}

.ads-subnav__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ads-space-1);
	max-width: 44rem;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.ads-subnav__link {
	display: flex;
	gap: var(--ads-space-2);
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: var(--ads-space-1) var(--ads-space-2);
	font-size: var(--ads-fs-small);
	font-weight: 600;
	color: var(--ads-color-navy);
	text-decoration: none;
	border-radius: var(--ads-radius);
	transition: background-color var(--ads-transition), color var(--ads-transition);
}

.ads-subnav__link:hover {
	background: var(--ads-color-navy-soft);
}

.ads-subnav__link[aria-current] {
	color: var(--ads-color-bg);
	background: var(--ads-color-navy);
}

/* The icons make room for the words on the narrowest phones. */
.ads-subnav__link .ads-icon {
	display: none;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--ads-color-gold);
}

/* The bar takes space above a section when a link lands on it. */
.ads-service-section {
	scroll-margin-top: 3rem;
}

@media (min-width: 480px) {
	.ads-subnav__link .ads-icon {
		display: block;
	}
}

@media (min-width: 1024px) {
	.ads-services-intro__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ads-space-8);
	}
}