/* Карта субъектов РФ — ТЗ 4.1, 4.3, REQ-M-1.
 *
 * Страница рисует Россию из субъектов: каждый субъект — кнопка в форме
 * своего контура, и вместе они складываются в карту страны.
 *
 * Ни градиентов, ни скруглений больше 2px, ни мягких теней: страница —
 * рабочий инструмент, а не витрина.
 */

/* Полотно карты.
 *
 * Пропорции задаёт --map-aspect: он считается на сервере по крайним
 * точкам геометрии, поэтому карта не растягивается и не обрезается.
 * Максимальная высота — 72vh, иначе карта не помещалась бы на экран
 * вместе с шапкой. */
.region-map {
  position: relative;
  width: 100%;
  max-width: calc(72vh * var(--map-aspect, 1.6));
  margin-inline: auto;
  aspect-ratio: var(--map-aspect, 1.6);
  background: var(--bg);
  /* Подписи считаются в cqw — процентах от ширины карты: так они
     масштабируются вместе с ней и на узком экране не наезжают на соседей. */
  container-type: inline-size;
}

/* Субъект — кнопка в форме своего контура.
 *
 * Кликает контур, а не прямоугольник кнопки: прямоугольники соседних
 * субъектов перекрываются, и клик по такому прямоугольнику попал бы не
 * туда. Поэтому у кнопки события мыши выключены, а у контура внутри —
 * включены: попасть можно только в сам субъект.
 *
 * Клавиатура при этом работает как обычно: кнопка в фокусе, Enter и
 * пробел выбирают регион. */
.region-shape {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: none;
}

.region-shape svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.region-shape path {
  fill: var(--accent);
  fill-opacity: 0.12;
  stroke: var(--accent);
  stroke-opacity: 0.5;
  /* Обводка не зависит от масштаба контура: иначе у мелких субъектов
   * она съедала бы всю фигуру, а у крупных была бы волосяной. */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: auto;
}

.region-shape:hover path {
  fill-opacity: 0.3;
  stroke-opacity: 0.9;
}

.region-shape:focus-visible {
  outline: none;
}

.region-shape:focus-visible path {
  fill-opacity: 0.35;
  stroke-opacity: 1;
  stroke-width: 2;
}

/* Выбранный субъект: заливка плотнее, обводка сплошная. */
.region-shape[aria-pressed="true"] path {
  fill-opacity: 0.5;
  stroke-opacity: 1;
  stroke-width: 2;
}

/* Подпись на карте — только у крупных субъектов.
 *
 * Фон под буквами — var(--bg), как у подписи города на прежней карте:
 * название должно читаться поверх заливки соседей и не теряться в ней.
 * Подпись не перехватывает нажатия: нажатие на субъект должно доходить
 * до контура. */
.region-shape__name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  padding: 0 0.2rem;
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: var(--name-size, 0.7rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  /* Длинное слово в узком субъекте переносится по слогам: иначе оно
     вылезет за фигуру и наедет на соседа. */
  overflow-wrap: break-word;
  pointer-events: none;
}

.region-map__hint {
  margin-top: 1rem;
  font-size: 0.85rem;
  text-align: center;
}

/* Выбор региона списком под картой.
 *
 * Тот же выбор, что и нажатие на регион, — для тех, кому проще выбрать,
 * чем искать на карте, и для тех, кто не видит курсор: с клавиатуры
 * субъект выбирается и без карты.
 *
 * Свой список, а не <select>: субъектов 89, в одну колонку они не
 * помещаются, а в две — помещаются. */
.region-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--surface);
}

.region-picker__label {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.region-picker__button {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding: 0.55rem 0.8rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.region-picker__button:hover,
.region-picker__button:focus-visible {
  background: var(--accent);
  color: var(--fg);
}

/* Раскрытая панель со списком. */
.region-picker__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% - 0.5rem);
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--accent);
}

.region-picker__search {
  width: 100%;
  margin-bottom: 0.6rem;
}

/* Список субъектов — в две колонки: в одну он растягивается на весь
 * экран, а субъектов 89. */
.region-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  max-height: 18rem;
  overflow-y: auto;
}

.region-picker__option {
  text-align: left;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.3;
  cursor: pointer;
}

.region-picker__option:hover,
.region-picker__option:focus-visible {
  border-color: var(--accent);
}

.region-picker__option--selected {
  border-color: var(--accent);
  color: var(--accent);
}

/* Запасной список субъектов — когда файла границ нет.
 *
 * Заголовок федерального округа моноширинной капителью — как подписи тегов
 * и метки секций на сайте: округ должен читаться частью того же интерфейса. */
.region-district {
  margin-top: 2.5rem;
}

.region-district__title {
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}

.region-card {
  text-align: left;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
  cursor: pointer;
}

.region-card:hover,
.region-card:focus-visible {
  background: var(--accent);
  color: var(--fg);
  border-color: var(--accent);
}

.region-card[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
}

/* Список компаний выбранного субъекта — под картой. */
.map-region {
  border-top: 1px solid var(--accent);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}

.map-region__head h2 {
  margin-top: 0.35rem;
}

/* Компании региона — всегда в две колонки.
 *
 * Общая сетка .grid--2 подстраивается под ширину и в последнюю колонку
 * растягивает единственную карточку на всю страницу: выглядит так, будто
 * компания одна. Здесь колонок ровно две, и одна компания занимает
 * половину — ряд с карточками читается одинаково при любом их числе.
 */
.region-companies {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Подпись о штаб-квартире.
 *
 * Стоит у компаний, которые работают в регионе, но зарегистрированы в
 * другом: без неё непонятно, где их головной офис. */
.company-card__hq {
  margin-top: 0.5rem;
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

@media (max-width: 720px) {
  .region-grid {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  }

  /* На телефоне две карточки в ряд не читаются — одна в ряд. */
  .region-companies {
    grid-template-columns: minmax(0, 1fr);
  }
}