/* Страница «Города»: поиск в первом экране, восемь направлений с компасной стрелкой, соседние области на графите. Префикс .k-gr- */

.k-gr-hero { padding: 20px 0 36px; background: radial-gradient(80% 70% at 100% 0%, var(--g-ll) 0%, rgba(238, 249, 243, 0) 70%), var(--paper); }
.k-gr-hero__grid { display: grid; gap: 22px; }
.k-gr-hero .k-hero__lead { max-width: 620px; }
.k-gr-find { padding: 18px; border-radius: var(--r); background: var(--white); box-shadow: var(--sh-s); }
.k-gr-search { margin-top: 0; }
.k-gr-find__res { margin: 10px 2px 14px; font-size: 15px; color: var(--mute); }
.k-gr-msk { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: var(--white); text-decoration: none; transition: background-color var(--t-fast) var(--ease-out); }
.k-gr-msk b { font: 800 22px/1 var(--f-h); }
.k-gr-msk span { font-size: 14px; line-height: 1.3; color: #d8d0cc; text-align: right; }
.k-gr-msk:hover { background: var(--ink-3); }

/* Направления */
.k-gr { padding-top: 24px; background: var(--paper); }
.k-gr__grid { columns: 1; column-gap: 12px; }
.k-gr-dir { break-inside: avoid; margin-bottom: 12px; padding: 18px 16px 10px; border-radius: var(--r); background: var(--white); box-shadow: 0 0 0 1px var(--line); animation: k-gr-in .45s var(--ease) both; }
.k-gr-dir[hidden] { display: none; }
.k-gr-dir__head { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; margin-bottom: 8px; }
.k-gr-dir__head svg { width: 48px; height: 48px; }
.k-gr-dir__head circle { fill: var(--g-ll); stroke: var(--g); stroke-width: 2; }
.k-gr-dir__head path { fill: var(--g-d); }
.k-gr-dir__head h2 { font: 700 22px/1.15 var(--f-h); }
.k-gr-dir__head p { font-size: 14px; line-height: 1.35; color: var(--mute); }
.k-gr-dir__head b { min-width: 34px; padding: 6px 8px; border-radius: 10px; background: var(--ink); color: var(--white); font: 700 15px/1 var(--f-h); text-align: center; }
.k-gr-dir ul { columns: 2; column-gap: 16px; }
.k-gr-dir li { break-inside: avoid; }
.k-gr-dir li[hidden] { display: none; }
.k-gr-dir a { display: block; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.3; text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.k-gr-dir a:hover { color: var(--g-d); }
.k-gr-dir a small { display: block; font-size: 13px; color: var(--mute); }
.k-gr-dir mark { background: var(--g-l); color: var(--g-dd); border-radius: 3px; }
.k-gr-none { margin-top: 16px; padding: 18px 20px; border-radius: var(--r); background: var(--g-ll); font-size: 17px; line-height: 1.5; }
.k-gr-none[hidden] { display: none; }

/* Соседние области */
.k-gr-near { background: var(--ink); color: var(--white); }
.k-gr-near .k-h2 { margin-bottom: 14px; color: var(--white); }
.k-gr-near__grid { display: grid; gap: 24px; }
.k-gr-near__list { display: grid; gap: 1px; border-radius: 16px; overflow: hidden; background: var(--ink-3); }
.k-gr-near__list li { display: grid; gap: 2px; padding: 16px 18px; background: var(--ink-2); }
.k-gr-near__list b { font: 700 20px/1.2 var(--f-h); }
.k-gr-near__list span { font-size: 16px; color: #d8d0cc; }

@keyframes k-gr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (min-width: 700px) {
	.k-gr__grid { columns: 2; }
	.k-gr-near__list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
	.k-gr-hero { padding: 28px 0 48px; }
	.k-gr-hero__grid { grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; }
	.k-gr__grid { columns: 4; }
	.k-gr-dir ul { columns: 1; }
	.k-gr-near__grid { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
	.k-gr-dir { animation: none; }
}