/* ==========================================================================
   «Мы работаем по всей стране» — карта России с точками присутствия
   Макет: 1520×764, карта во всю ширину, список городов слева, фотокарточка справа.
   ========================================================================== */

.geo {
  position: relative;
  padding-block: 2.5rem 2.5rem;
  background: var(--c-white);
  color: var(--c-spruce);
  overflow: hidden;
}

.geo__inner {
  position: relative;
  min-height: 41.5rem;
}

/* --- Карта --- */

/* Контур — векторная карта России (ssign.ru/11002, v6), перекрашена в
   пастельно-лаймовый #F4FFEE. Масштаб и сдвиг подобраны так, чтобы в кадр
   попали все площадки — от Воронежа до Свободного — и ни одна не ушла
   под карточку города справа. */
/* Контур — векторная карта России (ssign.ru/11002, v6), перекрашена в
   пастельно-лаймовый #F4FFEE. Масштаб и сдвиг подобраны так, чтобы в кадр
   попали все площадки — от Воронежа до Свободного — и ни одна не ушла
   под карточку города справа. */
/* Положение и размер подобраны 14.10.2026 вместе с пересчётом координат точек:
   на всех ширинах от 1280px ни одна точка (с ореолом) не заходит под текст слева
   и под фотокарточку справа. Прежние 15% / 84% / −12.8% работали только потому,
   что точки стояли не на своих городах — Свободный, поставленный правильно,
   уходил под карточку. При правке проверять крайние площадки: Воронеж,
   Москва (у кнопки) и Свободный (у карточки) на 1280px. */
.geo__map {
  position: absolute;
  left: 14%;
  top: -4%;
  width: 78%;
  z-index: 0;
}

/* Клики сквозь себя пропускает картинка, а не весь слой: внутри лежат
   кнопки-точки. */
.geo__map img { width: 100%; height: auto; pointer-events: none; }

/* --- Текст слева --- */

.geo__title { max-width: 26.25rem; }

.geo__desc {
  max-width: 24.1875rem;
  margin-top: 1.375rem;
  color: var(--t-spruce-40);
}

.geo__control {
  position: relative;
  z-index: 3;
  width: 15.25rem;
  margin-top: 2.1875rem;
}

/* Обёртка по ширине кнопки: раньше она растягивалась на весь блок и
   перехватывала клики по точкам карты, которые оказывались под ней.
   Раскрытый список выводится поверх, абсолютным позиционированием. */
.geo__control { width: 15.25rem; }

.geo__toggle {
  display: inline-flex;
  width: 15.25rem;
  justify-content: space-between;
}

.geo__toggle .btn__icon {
  transition: transform var(--dur-base) var(--ease-out);
}

/* Иконка в файле — шеврон вверх, то есть состояние «раскрыто».
   В свёрнутом виде разворачиваем её вниз. */
.geo__toggle .btn__icon { transform: rotate(180deg); }
.geo__toggle[aria-expanded='true'] .btn__icon { transform: rotate(0deg); }

/* --- Список городов --- */

/* Панель свёрнута, пока кнопка не нажата. Правило на CSS, а не на JS —
   иначе при загрузке она успевает мелькнуть раскрытой. */
.geo__toggle[aria-expanded='false'] + .geo__panel { display: none; }

/* Панель и список разделены намеренно. Высоту при раскрытии анимирует панель,
   а колонки живут на списке: если менять высоту прямо у многоколоночного
   элемента, браузер на каждом кадре перераспределяет пункты между колонками
   и текст на глазах переезжает. Панель шире кнопки и ложится поверх карты. */
.geo__panel {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 0;
  width: min(60.5rem, calc(100vw - var(--gutter) * 2));
  border: 1px solid var(--c-neutral-2);
  border-radius: var(--r-btn);
  background: var(--c-white);
  box-shadow: 0 0.75rem 2rem -0.75rem rgba(1, 49, 59, 0.28);
  overflow: hidden;
}

/* 35 площадок в одну колонку не помещаются — раскладываем в четыре */
.geo__list {
  padding: 0.5rem 0.25rem;
  column-count: 4;
  column-gap: 0.5rem;
}

.geo__list li { break-inside: avoid; }

/* Это справочный перечень площадок, а не меню: ни наведения, ни выбора */
.geo__city {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--c-neutral-8);
}

/* --- Точки на карте --- */

.geo__pins { position: absolute; inset: 0; z-index: 1; }

/* Кликабельная зона — небольшой круг по центру, а ореол 57px только рисуется.
   Иначе соседние точки (Казань и Нижнекамск — 22px друг от друга) перекрывают
   центры друг друга, и часть из них перестаёт нажиматься. */
.geo__pin {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  padding: 0;
  border-radius: 50%;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.geo__pin img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5625rem;
  height: 3.5625rem;
  margin: -1.78125rem 0 0 -1.78125rem;
  max-width: none;
  pointer-events: none;
}

.geo__pin:hover { opacity: 1; transform: scale(1.12); z-index: 2; }

/* Активная точка пульсирует — так в макете отмечен выбранный город */
.geo__pin.is-active { opacity: 1; z-index: 3; }

.geo__pin.is-active::before,
.geo__pin.is-active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5625rem;
  height: 3.5625rem;
  margin: -1.78125rem 0 0 -1.78125rem;
  border-radius: 50%;
  background: rgba(0, 140, 150, 0.35);
  pointer-events: none;
  animation: geo-pulse 2.6s var(--ease-out) infinite;
}

.geo__pin.is-active::after { animation-delay: 1.3s; }

@keyframes geo-pulse {
  0%   { transform: scale(0.45); opacity: 0.85; }
  70%  { transform: scale(1.7);  opacity: 0; }
  100% { transform: scale(1.7);  opacity: 0; }
}

/* Координаты площадок — в долях коробки карты, а не блока.
   Раньше они считались от блока фиксированной высоты (664px), а карта
   масштабируется от ширины окна: совпадение было ровно на 1520px, а на
   1440 и 1280 точки уезжали с городов на 16 и 50 пикселей. Слой точек
   лежит внутри карты, поэтому теперь они двигаются вместе с ней на любой
   ширине. Значения — те же самые места, пересчитанные: Москва была
   27.43%/34.17% от блока, это 14.80%/43.42% от карты.
   Сами координаты и точки фокуса фотографий — в базе (админка, «Площадки»);
   правила для них отдаёт /content.css. */

/* --- Карточки площадок (планшет и телефон) --- */

/* На десктопе география читается с карты: кликнул точку — обновилась карточка
   справа. До 1180px включительно карты нет (см. врезку ниже): там карта
   с одиночной карточкой
   уступают место списку площадок: на телефоне — листалкой, на планшете —
   сеткой. Разметка одна и та же, переключает только CSS. */
.geo__cards { display: none; }

.geo__card {
  position: relative;
  aspect-ratio: 288 / 200;
  border-radius: var(--r-photo);
  overflow: hidden;
  isolation: isolate;
}

.geo__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Те же точки фокуса, что и у карточки на десктопе: в этих кадрах центр
   приходится на небо или режет людей */

.geo__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(10deg, rgba(0, 0, 0, 0.65) 18%, rgba(0, 0, 0, 0) 52%);
}

.geo__card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding-inline: 0.625rem;
  border-radius: 2px;
  background: var(--c-white);
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--c-spruce);
}

.geo__card-name {
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 0.75rem;
  z-index: 2;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-white);
}

/* --- Фотокарточка площадки (десктоп) --- */

.geo__photo {
  position: absolute;
  top: 14.1875rem;
  right: 0;
  z-index: 2;
  width: 15.6875rem;
  height: 22.5rem;
  border-radius: var(--r-photo);
  overflow: hidden;
}

/* Снимки горизонтальные, карточка вертикальная, поэтому заполняем по cover.
   Макетное кадрирование (зум 236% со сдвигом влево) было подогнано под один
   конкретный кадр и резало людей и постройки на остальных. */
.geo__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Точка фокуса там, где центр кадра не годится: много неба или люди у края */

/* Город без своей фотографии — рамка показывает фирменный градиент */
.geo__photo.is-empty img,
.geo__photo.is-empty .geo__badge { display: none; }

.geo__photo.is-empty {
  background-color: var(--c-spruce);
  background-image: linear-gradient(145deg, var(--c-mint) 0%, var(--c-teal) 45%, var(--c-spruce) 100%);
}

.geo__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(10deg, rgba(0, 0, 0, 0.6) 16.5%, rgba(0, 0, 0, 0) 34.9%);
}

.geo__badge {
  position: absolute;
  top: 1.125rem;
  left: 1.125rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 1.3125rem;
  padding-inline: 0.5rem;
  border-radius: 2px;
  background: var(--c-white);
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--c-spruce);
}


.geo__photo-name {
  position: absolute;
  left: 1.125rem;
  bottom: 0.875rem;
  z-index: 2;
  right: 0.875rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-white);
  /* В одну строку: длинные названия подгоняются по кеглю скриптом,
     чтобы «Воронежсинтезкаучук» не переносился и не обрезался. */
  white-space: nowrap;
  overflow: hidden;
}

@media (max-width: 1280px) {
  .geo__photo { right: 0; }
}

/* Карта — от 1280px, ниже — площадки карточками. До 1180 причина прежняя:
   описание ложилось поверх западных точек, а зона нажатия точки — 24px, для
   пальца на альбомном планшете этого мало. В окне 1181–1279px карте с точками
   на своих местах не хватает места между текстом и фотокарточкой справа. */
@media (max-width: 1279px) {
  .geo { padding-block: 4rem; }

  /* Карта в потоке идёт первой по разметке — переставляем её под текст */
  .geo__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .geo__title { order: 1; }
  .geo__desc { order: 2; }
  .geo__cards { order: 3; margin-top: 2rem; }
  /* Управление листалкой скрипт вставляет сразу за карточками. В этом блоке
     порядок задан явно, и без своего order оно уезжало в самый верх секции,
     поверх заголовка. Та же цифра, что у карточек: внутри одного order
     элементы идут в порядке разметки. */
  .geo__inner > .slider-nav { order: 3; }
  .geo__control { order: 4; margin-top: 1.75rem; }

  /* Карта и одиночная карточка живут только вместе с точками */
  .geo__map,
  .geo__pins,
  .geo__photo { display: none; }

  /* Планшет: площадки сеткой, листалка не нужна */
  .geo__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  .geo__desc { margin-top: 1.5rem; }
  .geo__control { margin-top: 2rem; width: 100%; }
  .geo__toggle { width: 100%; }
  .geo__panel { position: static; width: 100%; margin-top: 0.625rem; max-height: 20rem; overflow-y: auto; }
  .geo__list { column-count: 1; }
}

/* Планшет (681–1180px). Диапазон закрыт с обеих сторон — десктоп и телефон
   этот блок не видят. */
@media (min-width: 681px) and (max-width: 1279px) {
  /* Одиннадцать карточек оставляли дыру в последнем ряду. Москва занимает
     две ячейки — получается ровно двенадцать: 3×4 или 4×3. Высоту ей даёт
     ряд, поэтому собственную пропорцию снимаем. */
  .geo__card:first-child { grid-column: span 2; aspect-ratio: auto; }

  /* «Воронежсинтезкаучук» и «Нижнекамскнефтехим» — одно слово, перенести
     негде, в узкой карточке они обрезались. Кегль живёт от ширины карточки. */
  .geo__card { container-type: inline-size; }
  .geo__card-name { left: 0.75rem; right: 0.75rem; font-size: min(1.0625rem, 6cqw); }
  /* Широкая карточка вдвое шире соседних — без поправки её подпись
     выходила заметно крупнее остальных. */
  .geo__card:first-child .geo__card-name { font-size: min(1.0625rem, 3cqw - 0.5px); }

  /* 35 площадок в одну колонку с прокруткой внутри — телефонное решение;
     на планшете ширины хватает на три колонки без прокрутки. Колонки на
     списке, высоту анимирует панель (см. комментарий у .geo__panel). */
  .geo__panel { max-height: none; overflow: hidden; }
  .geo__list { column-count: 3; }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .geo__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  /* Горизонтальную раскладку и управление даёт slider.css */
  .geo__cards {
    display: flex;
    grid-template-columns: none;
  }

  .geo__cards > .geo__card { flex: 0 0 78%; }

  .geo__card-name { font-size: 1rem; }
}