/* ==========================================================================
   Services block
   ========================================================================== */

/* Bottom padding is half the usual section spacing: the "See all services"
   link already closes the section, so a full gap before the stats felt empty. */
.services {
	padding-block: var(--space-section) calc(var(--space-section) / 2);
	background-color: var(--surface-100);
}

.services__header {
	display: grid;
	justify-items: start;
}

.services__title {
	max-width: 20ch;
	margin-top: var(--space-3);
	color: var(--brand-blue);
}

/* Layout: one column on phones. From 48em, the featured card spans the full
   width and the other two sit side by side beneath it. Cards in the same row
   stretch to equal height. */
.services__grid {
	display: grid;
	gap: var(--space-5);
	margin-top: var(--space-7);
	padding: 0;
	list-style: none;
}

.services__card {
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	background-color: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
}

/* Card titles stay well below section headings so they never compete with them. */
.services__card-title {
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	letter-spacing: 0.02em;
	color: var(--brand-blue);
}

.services__description {
	margin-top: var(--space-3);
}

.services__list {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	padding-left: 1.25em;
	/* Nested inside the card list, so browsers default to hollow circles. */
	list-style-type: disc;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--ink-muted);
	border-top: 1px solid var(--border-subtle);
	column-gap: var(--space-7);
}

.services__list li {
	margin-bottom: var(--space-2);
	break-inside: avoid;
}

.services__list li::marker {
	color: var(--brand-blue);
}

.services__toggle {
	align-self: flex-start;
	text-align: left;
	min-height: 2.75rem;
	margin-top: var(--space-1);
	padding: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--brand-blue);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	background: none;
	border: 0;
}

.services__toggle:hover {
	color: var(--brand-blue-700);
}

/* Pinned to the bottom of the card so Explore links line up across a row. */
.services__card-footer {
	margin-top: auto;
	padding-top: var(--space-6);
}

.services__explore,
.services__all {
	font-weight: var(--weight-bold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.services__all {
	display: inline-block;
	margin-top: var(--space-7);
	padding-block: var(--space-2);
}

/* Featured card: the primary service line. Brand blue with white text.
   Yellow is used only for list markers and the link underline, which are
   non-text details; yellow on blue is too low contrast for text.
   ========================================================================== */

.services__card--featured {
	--focus-color: var(--on-blue);
	color: var(--on-blue);
	background-color: var(--brand-blue);
	border-color: var(--brand-blue);
}

.services__card--featured .services__card-title {
	font-size: var(--text-lg);
	color: var(--on-blue);
}

.services__card--featured .services__list {
	color: var(--on-blue);
	border-top-color: var(--brand-blue-700);
}

.services__card--featured .services__list li::marker {
	color: var(--accent-yellow);
}

.services__card--featured .services__toggle,
.services__card--featured .services__toggle:hover,
.services__card--featured .services__explore,
.services__card--featured .services__explore:hover {
	color: var(--on-blue);
}

.services__card--featured .services__explore {
	text-decoration-color: var(--accent-yellow);
}

@media (min-width: 48em) {
	.services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.services__card--featured {
		grid-column: 1 / -1;
	}

	.services__card--featured .services__list {
		columns: 2;
	}
}

@media (min-width: 64em) {
	.services__grid {
		gap: var(--space-6);
		margin-top: var(--space-8);
	}

	/* Longer lists in the side-by-side cards split into two columns. */
	.services__list--split {
		columns: 2;
	}

	/* Featured card: title across the top, then description beside the list,
	   then Explore beside the show-more button. Each row is sized by its own
	   content, so there are no dead zones. */
	.services__card--featured {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		grid-template-areas:
			"title  title"
			"desc   list"
			"footer toggle";
		align-items: start;
		gap: var(--space-4) var(--space-8);
		padding: var(--space-6) var(--space-7);
	}

	.services__card--featured .services__card-title {
		grid-area: title;
	}

	.services__card--featured .services__description {
		grid-area: desc;
		margin-top: 0;
	}

	.services__card--featured .services__list {
		grid-area: list;
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		columns: 3;
	}

	/* Directly under the list, left aligned with its first column. */
	.services__card--featured .services__toggle {
		grid-area: toggle;
		justify-self: start;
		align-self: center;
		margin-top: 0;
	}

	.services__card--featured .services__card-footer {
		grid-area: footer;
		align-self: center;
		margin-top: 0;
		padding-top: 0;
	}
}