/* City pages (page-templates/city.php). Intro, body grid, aside and the
   related-links row all come from segment.css / generic-page.css; this only
   adds the at-a-glance facts list and the services grid. */

.city-body { padding-bottom: 72px; }
.city-body .segment-body__main.entry-content { max-width: none; margin: 0; }

.city-facts__list { margin: 0 0 var(--space-20); }
.city-facts__list > div { padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.city-facts__list > div:first-child { padding-top: 0; }
.city-facts__list dt {
	font-family: var(--font-label);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.city-facts__list dd { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--color-ink); }
.city-facts__src { font-size: 13px; color: var(--color-muted); }

.city-services { padding-block: 72px; background: var(--color-tint); }
.city-services h2 { margin-bottom: var(--space-32); }
.city-services__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-16);
}
.city-services__list li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px;
	background: var(--color-white);
	border: 1px solid var(--color-line);
}
.city-services__list a {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--color-ink);
	text-decoration: none;
}
.city-services__list a::after { content: '\00a0\2192'; color: var(--color-accent); }
.city-services__list a:hover,
.city-services__list a:focus-visible { color: var(--color-accent); }
.city-services__list span { font-size: 15px; line-height: 1.5; color: var(--color-muted); }

/* Five cards: one row of five on desktop, not four plus an orphan. */
@media (min-width: 1280px) {
	.city-services__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.city-body { padding-bottom: 48px; }
	.city-services { padding-block: 48px; }
}