@layer pages {
	/* City service and case archive extras. */

	.haf-city-stores {
		display: grid;
		gap: var(--haf-space-5);
	}

	.haf-city-store {
		overflow: hidden;
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-base);
		transition: border-color var(--haf-transition-base), box-shadow var(--haf-transition-base);
	}

	.haf-city-store:hover {
		border-color: var(--haf-color-primary);
		box-shadow: var(--haf-shadow-md);
	}

	.haf-city-store__media {
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: var(--haf-color-surface-strong);
	}

	.haf-city-store__media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform var(--haf-transition-base);
	}

	.haf-city-store:hover .haf-city-store__media img {
		transform: scale(1.04);
	}

	.haf-city-store__placeholder {
		display: grid;
		place-items: center;
		gap: var(--haf-space-2);
		width: 100%;
		height: 100%;
		color: var(--haf-color-muted);
		background: var(--haf-color-surface-strong);
	}

	.haf-city-store__placeholder span {
		font-size: var(--haf-font-size-sm);
	}

	.haf-city-store__body {
		padding: var(--haf-space-5);
	}

	.haf-city-store__body h3 {
		margin: 0 0 var(--haf-space-3);
		font-size: var(--haf-font-size-lg);
	}

	.haf-city-store__details {
		list-style: none;
		margin: 0 0 var(--haf-space-4);
		padding: 0;
		display: grid;
		gap: var(--haf-space-2);
	}

	.haf-city-store__details li {
		display: flex;
		align-items: flex-start;
		gap: var(--haf-space-2);
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-sm);
	}

	.haf-city-store__details svg {
		flex: 0 0 auto;
		margin-top: 0.1rem;
		color: var(--haf-color-primary);
	}

	.haf-city-store__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--haf-space-4);
	}

	.haf-city-store__actions a {
		display: inline-flex;
		align-items: center;
		gap: var(--haf-space-2);
		font-weight: 750;
		color: var(--haf-color-primary);
	}

	.haf-city-store__actions svg {
		transition: transform var(--haf-transition-fast);
	}

	.haf-city-store__actions a:hover svg {
		transform: translateX(3px);
	}

	.haf-case-grid {
		display: grid;
		gap: var(--haf-space-5);
	}

	.haf-case-grid > div {
		min-width: 0;
	}

	@media (min-width: 48rem) {
		.haf-city-stores {
			grid-template-columns: repeat(2, 1fr);
		}

		.haf-case-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 64rem) {
		.haf-case-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}