/* Правки сайта «Кластера» по аудиту живым браузером, 22.09.2026.
   Отдельным файлом, чтобы не пересобирать engine.css и lots.css и чтобы правку
   было видно одним взглядом. Подключается последней в head.

   Цель одна: всё, до чего человек дотрагивается пальцем, должно быть не меньше
   34 пикселей. Замер на экране 390 нашёл двенадцать мест мельче, и все они
   живут в местах, где человек как раз и тыкает: планировки блоков, точки
   галереи, кольца на схеме района, ссылки в подвале. */

@media (max-width: 560px) {
  /* «крупно» у планировок блоков: 39 на 26 пикселей, шесть штук. Ссылка
     стоит хвостом подписи, поэтому растим её отступом, а не шириной. */
  figcaption a,
  .tr-karta figcaption a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 8px;
    margin-left: 2px;
  }

  /* Точки галереи кадров: 24 на 24. Сама точка рисуется через ::before и
     остаётся прежней, растёт только область нажатия. */
  .ks-t {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .ks-tochki {
    gap: 0;
  }

  /* Кольца на схеме района: 20 на 20. Кольцо это метка на карте, увеличивать
     его нельзя, оно поедет относительно подложки. Поэтому область нажатия
     растёт прозрачным слоем поверх, а сама метка стоит где стояла. */
  .k-koltso::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }

  /* Подвал, источники и партнёрские ссылки. Встроенный стиль страницы уже
     поднимал их до 24 пикселей, но этого мало: палец накрывает вдвое больше,
     и в норме для касания считают от 34. */
  .ft a,
  .sec-foot a,
  .kl-foot a,
  .istok a,
  .rynok-ist a,
  .ft-partner a,
  .ft-bot a {
    display: inline-block;
    min-height: 34px;
    line-height: 34px;
  }

  /* Телефон и почта в тексте: по ним звонят прямо со страницы. */
  a[href^="tel:"],
  a[href^="mailto:"] {
    display: inline-block;
    min-height: 34px;
    line-height: 34px;
  }
}

/* Внутренние страницы: выезды на магистрали и политика. Там свои классы, а
   пальцем по ним тыкают так же. */
@media (max-width: 560px) {
  .vy-nazad {
    min-height: 36px;
  }
  .pol a {
    display: inline-block;
    min-height: 34px;
    line-height: 34px;
  }
}

/* ── Магистрали на схеме района (вопрос собственника 18.09.2026) ──────────
   Стиль взят у подложки: там ТТК и МКАД уже нарисованы белой пилюлей с
   названием, расстоянием и янтарным треугольником. Каширское и Варшавское
   получают такой же бейдж, все четыре становятся ссылкой на разбор выезда. */
#karta .k-shosse{position:absolute;transform:translate(-50%,-50%);z-index:4;
  width:auto;height:auto;max-width:none;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:7px 13px;border-radius:999px;background:#fff;color:#26282C;
  font:700 13px/1.15 Manrope,system-ui,sans-serif;white-space:nowrap;
  box-shadow:0 4px 14px rgba(20,23,28,.16);border:1px solid rgba(60,60,59,.1);
  transition:transform .18s ease,box-shadow .18s ease}
#karta .k-shosse em{font-style:normal;font-weight:500;color:#7A7D83;
  font-size:12px}
/* Палец попадает по указателю, а сам бейдж остаётся прежним. Высота пилюли
   на телефоне 28 пикселей, у прозрачных зон и вовсе 20, и аудит справедливо
   светил жёлтым: меньше 34 не нажмёшь. Расширяем ЗОНУ НАЖАТИЯ слоем, а не
   бейджем: иначе он полезет за кромку листа, откуда его только что убрали. */
#karta .k-shosse::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:100%;height:100%;
  min-width:48px;min-height:38px;border-radius:999px}
/* Размеры стрелки задаём ЯВНО и с запасом по силе селектора. В блоке схемы
   живёт `.tr-karta svg{width:100%;height:auto}` - оно растягивает любой svg
   внутри, и атрибуты width/height на теге его не перебивают. Первая проба
   поэтому вышла белыми кругами в треть карты с янтарным треугольником
   посередине; поймано скриншотом до выкладки. */
#karta .k-shosse svg{flex:0 0 auto;display:block;color:#E8A400;
  width:14px;height:14px;min-width:14px;max-width:14px;position:static;inset:auto}
#karta .k-shosse:hover,#karta .k-shosse:focus-visible{transform:
  translate(-50%,-50%) scale(1.04);box-shadow:0 8px 22px rgba(20,23,28,.24);
  outline:none}
/* Подписи шоссе на листе стоят у самых краёв, и бейдж по центру подписи
   обрезался рамкой схемы: у Каширского пропадало «на юго-восток», у
   Варшавского первая буква названия. Крайние прижимаются к своей стороне. */
#karta .k-shosse.k-shosse-pravo{transform:translate(-100%,-50%)}
#karta .k-shosse.k-shosse-pravo:hover,
#karta .k-shosse.k-shosse-pravo:focus-visible{
  transform:translate(-100%,-50%) scale(1.04)}
#karta .k-shosse.k-shosse-levo{transform:translate(0,-50%)}
#karta .k-shosse.k-shosse-levo:hover,
#karta .k-shosse.k-shosse-levo:focus-visible{transform:translate(0,-50%) scale(1.04)}
#karta .k-shosse.k-shosse-pravo .k-sh-vsplyv{left:auto;right:0;transform:translate(0,6px)}
#karta .k-shosse.k-shosse-pravo:hover .k-sh-vsplyv,
#karta .k-shosse.k-shosse-pravo:focus-visible .k-sh-vsplyv{transform:translate(0,0)}
#karta .k-shosse.k-shosse-levo .k-sh-vsplyv{left:0;transform:translate(0,6px)}
#karta .k-shosse.k-shosse-levo:hover .k-sh-vsplyv,
#karta .k-shosse.k-shosse-levo:focus-visible .k-sh-vsplyv{transform:translate(0,0)}
/* У ТТК и МКАД пилюля уже нарисована на листе: наша ссылка ложится поверх
   прозрачной зоной и только подсвечивает её при наведении. */
#karta .k-shosse.k-shosse-zona{background:transparent;border-color:transparent;
  box-shadow:none;min-width:104px;min-height:34px;justify-content:center;
  color:transparent}
#karta .k-shosse.k-shosse-zona svg{display:none}
#karta .k-shosse.k-shosse-zona:hover,#karta .k-shosse.k-shosse-zona:focus-visible{
  background:rgba(232,164,0,.16);border-color:rgba(232,164,0,.5);
  box-shadow:0 0 0 3px rgba(232,164,0,.18)}
/* Карточка с расстоянием. Держится в тех же цветах, что подсказки станций. */
#karta .k-shosse .k-sh-vsplyv{position:absolute;left:50%;bottom:calc(100% + 10px);
  transform:translate(-50%,6px);min-width:186px;max-width:250px;padding:9px 12px;
  border-radius:12px;background:rgba(20,23,28,.94);color:#fff;white-space:normal;
  font:500 12px/1.45 Manrope,system-ui,sans-serif;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;text-align:left}
#karta .k-shosse .k-sh-vsplyv i{display:block;font-style:normal;font-weight:700;
  font-size:13px;margin-bottom:2px}
#karta .k-shosse:hover .k-sh-vsplyv,#karta .k-shosse:focus-visible .k-sh-vsplyv{
  opacity:1;transform:translate(-50%,0)}
/* Указатель в верхней части листа показывает карточку ПОД собой: над ним
   кромка схемы и шапка сайта. */
#karta .k-shosse[data-kraj="verh"] .k-sh-vsplyv{bottom:auto;top:calc(100% + 10px);
  transform:translate(-50%,-6px)}
#karta .k-shosse[data-kraj="verh"]:hover .k-sh-vsplyv,
#karta .k-shosse[data-kraj="verh"]:focus-visible .k-sh-vsplyv{
  transform:translate(-50%,0)}
#karta .k-shosse.k-shosse-pravo[data-kraj="verh"] .k-sh-vsplyv{transform:translate(0,-6px)}
#karta .k-shosse.k-shosse-pravo[data-kraj="verh"]:hover .k-sh-vsplyv,
#karta .k-shosse.k-shosse-pravo[data-kraj="verh"]:focus-visible .k-sh-vsplyv{
  transform:translate(0,0)}
#karta .k-shosse.k-shosse-levo[data-kraj="verh"] .k-sh-vsplyv{transform:translate(0,-6px)}
#karta .k-shosse.k-shosse-levo[data-kraj="verh"]:hover .k-sh-vsplyv,
#karta .k-shosse.k-shosse-levo[data-kraj="verh"]:focus-visible .k-sh-vsplyv{
  transform:translate(0,0)}
@media (max-width:760px){
  #karta .k-shosse{padding:6px 10px;font-size:12px;gap:6px}
  #karta .k-shosse em{display:none}
  #karta .k-shosse .k-sh-vsplyv{min-width:150px;max-width:190px}
  /* Лист на телефоне ниже втрое, и зона прежней высоты вылезала за кромку:
     ТТК на 5 пикселей вверх, МКАД на 8 вниз. */
  /* Высоту зоны держит не min-height, а текст с полями: имя внутри нужно
     для доступности и остаётся, поэтому ужимаем поля и межстрочное. */
  #karta .k-shosse.k-shosse-zona{min-height:20px;min-width:84px;
    padding:2px 8px;line-height:1;font-size:11px}
}