/* InviteNoma — своя карта.
   Не Google/Yandex-iframe: geometry рисуется SVG-ом в токенах темы,
   поэтому карта выглядит частью приглашения, а не чужим виджетом.
   Дорожную сеть можно сгенерировать из OpenStreetMap: tools/fetch_map.py */

.venue { display: grid; gap: var(--sp-6); }

.venue__head { display: grid; gap: var(--sp-3); }

.map-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--map-bg);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--sh-card);
  /* ширина фиксируется явно: иначе min-height вместе с aspect-ratio
     растягивает карточку шире колонки и она вылезает за край экрана */
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 320px;
}
@media (min-width: 760px) { .map-card { aspect-ratio: 16 / 9; } }

.map-card__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* слои карты: цвета берутся из темы */
.map-land   { fill: var(--map-bg); }
.map-block  { fill: var(--map-block); stroke: var(--map-stroke); stroke-width: .6; }
.map-green  { fill: var(--map-green); }
.map-water  { fill: var(--map-water); }
.map-road   { stroke: var(--map-road); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-road--primary   { stroke-width: 9; }
.map-road--secondary { stroke-width: 5.5; stroke: var(--map-road-2); }
.map-road--minor     { stroke-width: 2.5; stroke: var(--map-road-2); }
.map-road-casing { stroke: var(--map-stroke); fill: none; stroke-linecap: round; }
.map-label {
  fill: var(--map-label);
  font-family: var(--f-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  /* обводка цветом подложки: подпись читается поверх дороги */
  paint-order: stroke;
  stroke: var(--map-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* окружность вокруг площадки: подсказывает масштаб, дорисовывается по скроллу */
.map-route {
  stroke: var(--c-gold);
  stroke-width: 2;
  stroke-dasharray: 6 7;
  fill: none;
  stroke-linecap: round;
  opacity: .75;
}
.map-route--anim {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: calc(var(--len, 1200) * (1 - var(--p, 0)));
}

/* метка зала */
.map-pin__inner { transform-box: view-box; transform-origin: center; }
.map-pin__body { fill: var(--map-pin); }
.map-pin__dot  { fill: var(--c-paper); }
.map-pin__pulse {
  fill: var(--map-pin); opacity: .25;
  transform-box: fill-box; transform-origin: center;
  animation: pinPulse 2.6s var(--e-out) infinite;
}
@keyframes pinPulse {
  0%   { transform: scale(.4); opacity: .35; }
  100% { transform: scale(2.4); opacity: 0; }
}
.map-pin--drop { animation: pinDrop 1s var(--e-out) both; }
@keyframes pinDrop {
  0%   { transform: translateY(-46px) scale(.6); opacity: 0; }
  60%  { transform: translateY(4px)  scale(1.04); opacity: 1; }
  100% { transform: translateY(0)    scale(1); opacity: 1; }
}

/* подпись зала на карте */
.map-tag {
  position: absolute;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-paper);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--sh-soft);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* атрибуция источника данных: требование лицензии ODbL */
.map-credit {
  position: absolute; right: var(--sp-3); top: var(--sp-3);
  /* Атрибуция OpenStreetMap обязательна по лицензии — значит должна
     читаться. Прежний бледный ярлык на полупрозрачной плашке не дотягивал. */
  font-size: 11px; letter-spacing: .04em;
  color: var(--c-ink-soft);
  background: color-mix(in srgb, var(--c-paper) 92%, transparent);
  padding: 2px 8px; border-radius: var(--r-pill);
  pointer-events: none;
}

/* переключатель площадок (нахорги ош / вечер) */
.map-switch {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.map-switch button {
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.map-switch button:hover { border-color: var(--c-gold); }
.map-switch button[aria-selected="true"] { background: var(--c-ink); color: var(--c-cream); }

/* зум */
.map-zoom {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4);
  display: grid; gap: 2px;
  background: color-mix(in srgb, var(--c-paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-soft);
}
.map-zoom button { width: 40px; height: 40px; display: grid; place-items: center; color: var(--c-ink-soft); }
.map-zoom button:hover { background: var(--c-cream-2); }

/* инфо-панель под картой */
.venue__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1rem, 3vw, 1.75rem);
}
.venue-fact { display: grid; gap: var(--sp-2); }
.venue-fact__label {
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-ink-mute);
}
.venue-fact__value { color: var(--c-ink); }
/* Телефон площадки — ссылка tel:, по ней жмут пальцем прямо на месте */
.venue-fact__value a {
  display: inline-flex; align-items: center; min-height: 44px;
}

.venue__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.map-link {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  transition: border-color var(--t-fast), transform var(--t-fast) var(--e-out), background var(--t-fast);
}
.map-link:hover { border-color: var(--c-gold); transform: translateY(-2px); background: var(--c-paper); }
.map-link svg { width: 18px; height: 18px; color: var(--c-gold-deep); }
.map-link small { color: var(--c-ink-mute); font-size: var(--fs-micro); }

@media (prefers-reduced-motion: reduce) {
  .map-pin__pulse, .map-pin--drop { animation: none; }
}

/* ---------- Общий чат гостей ----------
   На местных свадьбах гости заводят чат, чтобы договориться о машинах и
   подарках. Кнопка ведёт туда прямо из приглашения. */
.guest-chat {
  margin-top: var(--sp-5);
  display: grid; gap: var(--sp-3); justify-items: center; text-align: center;
}
.guest-chat__btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-cream);
  font-size: var(--fs-small); font-weight: 500;
  letter-spacing: var(--ls-mid);
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.guest-chat__btn:hover { transform: translateY(-2px); box-shadow: var(--sh-card); }
.guest-chat__btn svg { width: 18px; height: 18px; }
.guest-chat__note { font-size: var(--fs-small); color: var(--c-ink-mute); max-width: 42ch; }