/* ==========================================================================
   Блок «География проектов» — две SVG-карты (11.2026)
   Главная, «Проекты», «О компании». Ссылки — прозрачные области поверх штатных плашек SVG. Кнопки — существующие стили .tag / .tag.is-active.
   ========================================================================== */

.geo-maps__stage {
    display: grid;              /* обе карты в одной ячейке → высота блока не прыгает при переключении */
    width: 100%;
}

.geo-maps__map {
    grid-area: 1 / 1;
    margin: 0;
    min-width: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

.geo-maps__map.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity .35s ease, visibility 0s;
}

.geo-maps__map:not(.is-active) { pointer-events: none; }   /* скрытая карта не перехватывает клики во время fade */

/* Холст = ровно картинка карты; слой пинов позиционируется в % этого же прямоугольника */
.geo-maps__canvas {
    position: relative;
    overflow: hidden;           /* подписи пинов не создают горизонтальную прокрутку */
}

.geo-maps__map picture { display: block; }

.geo-maps__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1596 / 779;   /* место под карту резервируется до загрузки SVG */
    background: transparent;
}

/* Телефон и планшет: компактная компоновка подписей (отдельные мобильные SVG) */
@media (max-width: 991px) {
    .geo-maps__stage { max-width: 640px; margin: 0 auto; }
    .geo-maps__map--aurora .geo-maps__img   { aspect-ratio: 800 / 845; }
    .geo-maps__map--deposits .geo-maps__img { aspect-ratio: 800 / 1169; }
    .geo-maps__map .geo-maps__img--noscript { aspect-ratio: 1596 / 779; }
}

/* ---------- Ссылки на штатные элементы SVG (плашки, маркеры, строки списка) ----------
   Прозрачные <a> поверх картинки, размеры — из самих SVG (inc/page/geography/0-map-objects.php).
   Ничего нового на карте не рисуется: при наведении/фокусе — только контур вокруг существующей плашки. */
.geo-maps__links {
    position: absolute;
    inset: 0;
    pointer-events: none;       /* слой не перекрывает карту: кликабельны только сами области */
}

.geo-maps__hit {
    position: absolute;
    left: var(--l);
    top: var(--t);
    width: var(--w);
    height: var(--h);
    border-radius: 6px;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .2s ease, background-color .2s ease;
}

.geo-maps__hit--marker { border-radius: 50%; }
.geo-maps__hit--m-only { display: none; }

.geo-maps__hit:focus { outline: none; }
.geo-maps__hit:hover,
.geo-maps__hit.is-hot,
.geo-maps__hit:focus-visible {
    background-color: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e6fe6, 0 4px 18px rgba(30, 111, 230, .45);
}

/* Телефон и планшет: строки списка под мобильной картой и номерные значки */
@media (max-width: 991px) {
    .geo-maps__hit {
        left: var(--lm);
        top: var(--tm);
        width: var(--wm);
        height: var(--hm);
    }
    .geo-maps__hit--d-only { display: none; }
    .geo-maps__hit--m-only { display: block; }
    .geo-maps__hit--main { border-radius: 8px; }
    .geo-maps__hit:active { background-color: rgba(30, 111, 230, .12); }

    /* без JS показывается десктопная картинка — ссылки по десктопной геометрии */
    .geo-maps__map.is-active:has(.geo-maps__img--noscript) .geo-maps__hit { left: var(--l); top: var(--t); width: var(--w); height: var(--h); }
    .geo-maps__map.is-active:has(.geo-maps__img--noscript) .geo-maps__hit--d-only { display: block; }
    .geo-maps__map.is-active:has(.geo-maps__img--noscript) .geo-maps__hit--m-only { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .geo-maps__map,
    .geo-maps__map.is-active,
    .geo-maps__hit { transition: none; }
}