/* ─────────────────────────────────────────────────────────────
   /cities/ — плитка городов: шапка с поиском, разделы по буквам.
   Подключается только на самой странице (см. functions.php).
   ───────────────────────────────────────────────────────────── */

.cities-page {
	padding-block: var(--s-6) var(--s-9);
}

/* Классы ниже задают display, а он перебивает браузерное [hidden].
   Без этого крестик поиска и пустое состояние видны всегда. */
.cities-page [hidden] { display: none !important; }

/* ── Шапка: заголовок, счётчик, поиск, сортировка ───────────── */

.cities-bar {
	display: grid;
	gap: var(--s-4);
	margin: var(--s-4) 0 var(--s-7);
	padding: var(--s-5) var(--s-5) var(--s-5);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
}

.cities-bar__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-2) var(--s-4);
	min-width: 0;
}

.cities-bar__title {
	margin: 0;
	font-size: var(--fs-h2);
	line-height: 1.1;
}

.cities-bar__count {
	color: var(--c-text-muted);
	font-size: var(--fs-md);
	white-space: nowrap;
}

.cities-bar__count b {
	color: var(--c-text);
	font-weight: 700;
}

.cities-search {
	position: relative;
	min-width: 0;
}

.cities-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--c-text-muted);
	pointer-events: none;
}

.cities-search__input {
	width: 100%;
	height: 46px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 44px 0 42px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-ctl);
	background: var(--c-surface-2);
	color: var(--c-text);
	font: inherit;
	font-size: var(--fs-base);
	outline: none;
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.cities-search__input::placeholder { color: var(--c-text-soft); }

.cities-search__input:focus-visible {
	background: var(--c-surface);
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px var(--c-primary-ring);
}

/* Крестик у нативного type="search" в вебките — свой, чужой прячем. */
.cities-search__input::-webkit-search-cancel-button { display: none; }

.cities-search__clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--r-sm);
	background: var(--c-sunken);
	color: var(--c-text-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .12s, color .12s;
}

.cities-search__clear:hover {
	background: var(--c-primary);
	color: var(--c-on-primary);
}

.cities-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.cities-tab {
	padding: 8px 16px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	background: var(--c-surface-2);
	color: var(--c-text-muted);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}

.cities-tab:hover {
	background: var(--c-sunken);
	color: var(--c-text);
}

.cities-tab.is-active {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-on-primary);
}

/* ── Разделы по буквам ──────────────────────────────────────── */

.cities-section {
	margin: 0 0 var(--s-6);
	/* Разделов под сорок: даём браузеру пропускать те, что за экраном. */
	content-visibility: auto;
	contain-intrinsic-size: 1px 260px;
}

.cities-section__title {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin: 0 0 var(--s-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.cities-section__title span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	border-radius: var(--r-sm);
	background: var(--c-primary-soft);
	color: var(--c-primary);
	font-size: var(--fs-md);
	font-weight: 800;
	letter-spacing: 0;
}

.cities-section__title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-border);
}

.cities-section__grid,
.cities-flat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--s-2);
}

/* ── Карточка города ────────────────────────────────────────── */

.city-card {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-width: 0;
	min-height: 42px;
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-text);
	text-decoration: none;
	transition: background .12s, border-color .12s, transform .1s;
}

.city-card:hover {
	background: var(--c-surface-2);
	border-color: var(--c-border-strong);
	transform: translateY(-1px);
}

.city-card:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}

.city-card__pin {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--c-primary);
}

.city-card__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fs-sm);
	font-weight: 600;
}

.city-card__fire { font-size: var(--fs-xs); }

.city-card__count {
	flex: 0 0 auto;
	padding: 1px 8px;
	border-radius: var(--r-pill);
	background: var(--c-primary-soft);
	color: var(--c-primary);
	font-size: var(--fs-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.city-card--hot {
	border-color: color-mix(in srgb, var(--c-primary) 34%, var(--c-border));
	background: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface));
}

.city-card--hot .city-card__count {
	background: var(--c-primary);
	color: var(--c-on-primary);
}

/* ── Пусто / записи без города ──────────────────────────────── */

.cities-empty {
	padding: var(--s-8) var(--s-4);
	text-align: center;
	color: var(--c-text-muted);
}

.cities-empty svg {
	width: 40px;
	height: 40px;
	margin-bottom: var(--s-3);
	color: var(--c-text-soft);
}

.cities-empty p {
	margin: 0;
	font-size: var(--fs-base);
}

.cities-unknown {
	margin: var(--s-6) 0 0;
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-border);
	text-align: center;
}

.cities-unknown a {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--c-text-muted);
	font-size: var(--fs-md);
	text-decoration: none;
}

.cities-unknown a:hover { color: var(--c-text); }

.cities-unknown b {
	padding: 1px 8px;
	border-radius: var(--r-pill);
	background: var(--c-sunken);
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
	font-variant-numeric: tabular-nums;
}

/* ── Узкие экраны ───────────────────────────────────────────── */

@media (max-width: 640px) {
	.cities-bar {
		padding: var(--s-4);
		border-radius: var(--r);
	}

	.cities-section__grid,
	.cities-flat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* В одну колонку уходим только на совсем узких экранах: 445 городов
   в один столбец — это очень длинная страница. */
@media (max-width: 340px) {
	.cities-section__grid,
	.cities-flat-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.city-card { transition: none; }
	.city-card:hover { transform: none; }
}