/**
 * Блок «Районы и локации Екатеринбурга» под каталогом (KOY-2510).
 *
 * Карточек с картинками здесь сознательно нет, хотя рядом стоит блок
 * «Форматы размещения» на компоненте .sm-shortcuts: своих фотографий у
 * районов не существует, и двенадцать карточек с одной и той же картинкой
 * из набора главной читались бы как ошибка вёрстки. Поэтому ссылки —
 * плашками того же вида, что теги в шапке каталога (.sm-addr-hero__tag):
 * размер, радиус и типографика взяты оттуда, чтобы блок не выглядел чужим.
 */

.sm-districts {
	padding-top: 60px;
}

.sm-districts__title {
	margin-bottom: 18px;
}

.sm-districts__back {
	margin: 0 0 24px;
	font-family: var(--sm-font-ui);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sm-ink-soft);
}

.sm-districts__back-link {
	color: var(--sm-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sm-districts__back-link:hover,
.sm-districts__back-link:focus-visible {
	color: var(--sm-purple);
}

.sm-districts__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-districts__item {
	display: flex;
}

.sm-districts__link {
	display: flex;
	gap: 8px;
	align-items: center;
	min-height: 39px;
	padding: 9px 16px;
	font-family: var(--sm-font-ui);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--sm-ink);
	background: #f2f0f8;
	border-radius: 38px;
	transition: background 0.2s ease, color 0.2s ease;
}

.sm-districts__link:hover,
.sm-districts__link:focus-visible {
	color: var(--sm-white);
	background: var(--sm-purple);
}

/* Число конструкций — подсказка, а не часть названия: тише основного текста. */
.sm-districts__count {
	font-size: 14px;
	color: #8b86a0;
}

.sm-districts__link:hover .sm-districts__count,
.sm-districts__link:focus-visible .sm-districts__count {
	color: var(--sm-white);
}

@media (max-width: 1024px) {
	.sm-districts {
		padding-top: 40px;
	}

	.sm-districts__link {
		min-height: 34px;
		padding: 7px 13px;
		font-size: 14px;
	}

	.sm-districts__count {
		font-size: 12px;
	}
}