/*
 * Services: centred heading with short gold rules either side of the
 * eyebrow; the entries in open columns, number and title on one line, the
 * text hanging under the title.
 */
@layer blocks {
	.services .section-head {
		justify-items: center;
		margin-bottom: var(--space-12);
		text-align: center;
	}

	.services .section-head__main {
		display: grid;
		justify-items: center;
	}

	.services .section-head__eyebrow {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.services .section-head__eyebrow::before,
	.services .section-head__eyebrow::after {
		content: "";
		position: static;
		width: var(--space-6);
		height: var(--border-width);
		background: var(--rule);
	}

	.services .section-head__title {
		text-wrap: balance;
	}

	.services .section-head__standfirst {
		margin-inline: auto;
		color: var(--muted-foreground);
	}

	.services__list {
		display: grid;
		gap: var(--space-10) var(--grid-gap);
	}

	.services__item {
		display: grid;
		/* A fixed number column, so every text hangs at the same indent. */
		grid-template-columns: 2.5rem minmax(0, 1fr);
		column-gap: var(--space-2);
		align-content: start;
	}

	.services__number {
		font-family: var(--font-heading);
		font-size: var(--type-h5-size);
		line-height: var(--type-h5-line);
		font-variant-numeric: lining-nums tabular-nums;
		color: var(--ornament);
	}

	.services__title {
		font-size: var(--type-h5-size);
		line-height: var(--type-h5-line);
	}

	.services__text,
	.services__link {
		grid-column: 2;
	}

	.services__text {
		max-width: 34ch;
		margin-top: var(--space-4);
		color: var(--muted-foreground);
		font-size: var(--type-small-size);
		line-height: var(--type-small-line);
	}

	.services__link {
		justify-self: start;
		margin-top: var(--space-4);
	}

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

	@media (min-width: 64rem) {
		.services .section-head {
			margin-bottom: var(--space-16);
		}

		.services__list {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			row-gap: var(--space-16);
			padding-inline: var(--space-8);
		}

		.services__list:has(> :nth-child(2):last-child),
		.services__list:has(> :nth-child(4):last-child) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}