/* Running Buddies — страница города: объёмная карта и точки старта */

/* ---------- Header on a light first screen ---------- */

.site-header--ink { color: var(--ink); }
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- Stage ---------- */

.stage {
  --stage-h: max(100vh, 620px);
  --col-left: max(var(--pad), calc((100vw - 1440px) / 2 + var(--pad)));
  --col-w: clamp(330px, 32vw, 460px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
}
@supports (height: 100svh) {
  .stage { --stage-h: max(100svh, 620px); }
}

/* карта и текст лежат в одной ячейке: карта остаётся на месте, пока прокручивается список */
.stage__map,
.stage__panel { grid-area: 1 / 1; }
.stage__map {
  position: sticky;
  top: 0;
  align-self: start;
  height: var(--stage-h);
  overflow: hidden;
}
/* бумага под текстом: карта растворяется к шапке и к колонке слева */
.stage__map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, var(--bg) 0, rgba(245, 244, 241, 0) 140px),
    linear-gradient(90deg, var(--bg) 0, var(--bg) calc(var(--col-left) + var(--col-w) * 0.5), rgba(245, 244, 241, 0.88) calc(var(--col-left) + var(--col-w)), rgba(245, 244, 241, 0) calc(var(--col-left) + var(--col-w) * 1.7));
  pointer-events: none;
}

.stage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 1.1s var(--ease);
}
.stage.is-live .stage__canvas { opacity: 1; }
.stage.is-dragging .stage__canvas { cursor: grabbing; }

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

.stage__status {
  position: absolute;
  z-index: 3;
  left: 72%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.stage__status:empty { opacity: 0; }

.stage__credit {
  position: absolute;
  z-index: 3;
  right: max(var(--pad), env(safe-area-inset-right));
  bottom: 22px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.stage__credit a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease);
}
.stage__credit a:hover { color: var(--accent); }

/* ---------- Pins and labels over the model ---------- */

.stage__pins {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.5s;
}
.stage.is-live .stage__pins { opacity: 1; }

.pin,
.maplabel {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.pin {
  --lift: 0px;
  width: 0;
  height: 0;
}
.pin__dot {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
}
.pin__stem {
  position: absolute;
  left: -0.5px;
  bottom: 5px;
  width: 1px;
  height: calc(31px + var(--lift));
  background: var(--ink);
}
.pin__btn {
  position: absolute;
  left: 0;
  bottom: calc(36px + var(--lift));
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.3s var(--ease);
}
.pin__name {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  text-transform: uppercase;
  transition: max-width 0.45s var(--ease), margin-left 0.45s var(--ease), opacity 0.3s var(--ease);
}
.pin__btn:hover .pin__name,
.pin__btn:focus-visible .pin__name,
.pin.is-active .pin__name {
  max-width: 12em;
  margin-left: 8px;
  opacity: 1;
}
.pin__btn:hover,
.pin.is-active .pin__btn { background: var(--accent); }

.maplabel { transition: opacity 0.5s var(--ease); }
.stage__pins.is-far .maplabel { opacity: 0; }
.maplabel span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(13, 13, 13, 0.5);
  text-shadow: 0 0 4px var(--bg), 0 0 4px var(--bg), 0 0 8px var(--bg);
  transform: translate(-50%, -50%);
}

/* ---------- Map controls ---------- */

.map-controls {
  position: absolute;
  z-index: 3;
  right: max(var(--pad), env(safe-area-inset-right));
  bottom: 58px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.map-controls[hidden] { display: none; }
.map-btn {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.map-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.map-btn::before,
.map-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
}
.map-btn--in::before,
.map-btn--out::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.map-btn--in::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.map-btn--out::after,
.map-btn--north::before,
.map-btn--north::after { display: none; }

/* стрелка компаса: красная половина смотрит на север */
.map-btn__needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.map-btn__needle::before,
.map-btn__needle::after {
  content: "";
  position: absolute;
  left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.map-btn__needle::before {
  bottom: 0;
  border-bottom: 11px solid var(--accent);
}
.map-btn__needle::after {
  top: 0;
  border-top: 11px solid currentColor;
}

/* вращение: пауза, когда включено, и «пуск», когда остановлено */
.map-btn--spin::before,
.map-btn--spin::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}
.map-btn--spin::before { margin-left: -3.5px; }
.map-btn--spin::after { margin-left: 3.5px; }
.map-btn--spin[aria-pressed="false"]::before {
  width: 0;
  height: 0;
  margin-left: 1.5px;
  background: none;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
}
.map-btn--spin[aria-pressed="false"]::after { display: none; }

.map-hint {
  position: absolute;
  z-index: 3;
  right: calc(max(var(--pad), env(safe-area-inset-right)) + 58px);
  bottom: 70px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.map-hint.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Panel: title and start points ---------- */

.stage__panel {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  min-height: var(--stage-h);
  margin: 0 auto;
  padding: calc(var(--header-h) + clamp(20px, 5vh, 60px)) var(--pad) clamp(28px, 6vh, 64px);
  padding-left: max(var(--pad), env(safe-area-inset-left));
  pointer-events: none;
}
.stage__head,
.starts {
  width: min(100%, var(--col-w));
  pointer-events: auto;
}

.stage__title {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 24px);
  font-size: inherit;
  font-weight: inherit;
}
.stage__title .eyebrow { animation: rise 0.9s var(--ease) 0.1s both; }
.stage__city {
  margin-left: -0.04em;
  font-size: clamp(72px, 9.6vw, 164px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  animation: rise 1s var(--ease) 0.2s both;
}
.stage__lead {
  max-width: 21em;
  margin-top: clamp(18px, 2vw, 30px);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.45;
  color: #3b3a37;
  text-wrap: pretty;
  animation: rise 1s var(--ease) 0.35s both;
}

.starts {
  margin-top: auto;
  padding-top: clamp(32px, 5vh, 56px);
  animation: rise 1s var(--ease) 0.5s both;
}
.starts__all {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
}
.starts__title,
.starts__reset {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.starts__title { color: var(--muted); }
.starts__count {
  margin-left: 8px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.starts__hint { display: none; }
.starts__reset {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease), visibility 0s linear 0.3s;
}
.starts__reset::before {
  content: "←";
  margin-right: 8px;
  letter-spacing: 0;
}
.starts__reset:hover { color: var(--accent); }
.stage.has-active .starts__reset {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.start {
  position: relative;
  border-top: 1px solid var(--line);
}
.start:last-child { border-bottom: 1px solid var(--line); }
.start::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.start:hover::before,
.start.is-active::before { transform: scaleX(1); }

.start__head {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 12px;
  padding: 17px 0;
}
.start__head:focus-visible { outline-offset: -2px; }
.start__num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.start__name {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.start__place {
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

.start__body {
  display: grid;
  grid-template-rows: 1fr;
  padding-left: calc(2.4em + 12px);
  font-size: 15px;
  line-height: 1.5;
  color: #3b3a37;
  transition: grid-template-rows 0.5s var(--ease), visibility 0s;
}
.start__body > div {
  min-height: 0;
  overflow: hidden;
}
.start__body p { max-width: 27em; text-wrap: pretty; }
.start__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 12px;
  padding-bottom: 20px;
}
.start__link {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.start__link::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 9px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  vertical-align: 0.12em;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.start__link:hover { color: var(--accent); }
.start__link:hover::after { transform: translateX(4px) rotate(45deg); }

/* со скриптом список работает как аккордеон: раскрыта только выбранная точка */
.stage.is-interactive .start:not(.is-active) .start__body {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.5s var(--ease), visibility 0s linear 0.5s;
}

.stage__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Reused blocks ---------- */

.why__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cta--bg { background: var(--bg); }

/* ---------- Mobile: карта во весь экран, точки — карточками снизу ---------- */

@media (max-width: 760px) {
  .stage { --stage-h: max(100vh, 580px); }
  @supports (height: 100svh) {
    .stage { --stage-h: max(100svh, 580px); }
  }

  .stage__map { position: relative; }
  .stage__map::after {
    background:
      linear-gradient(180deg, var(--bg) 0, var(--bg) 120px, rgba(245, 244, 241, 0) 290px),
      linear-gradient(0deg, var(--bg) 0, var(--bg) 70px, rgba(245, 244, 241, 0) 290px);
  }
  .stage__poster img { object-position: 74% 50%; }
  .stage__status { left: 50%; top: 46%; }
  .stage__credit {
    left: var(--pad);
    right: auto;
    bottom: 8px;
    font-size: 10px;
  }

  .map-controls {
    top: calc(var(--header-h) + 14px);
    bottom: auto;
  }
  .map-btn { width: 40px; height: 40px; }
  .map-btn--in,
  .map-btn--out,
  .map-hint { display: none; }

  .stage__panel {
    height: var(--stage-h);
    padding: calc(var(--header-h) + 10px) 0 0;
  }
  .stage__head {
    width: auto;
    padding: 0 var(--pad);
    pointer-events: none;
  }
  .stage__title { gap: 12px; }
  .stage__city { font-size: clamp(56px, 18vw, 96px); }
  .stage__lead {
    max-width: 15em;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.4;
  }
  .stage__note { display: none; }
  .why__grid--three { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }

  .starts {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: auto;
    margin: auto 0 0;
    padding: 0 var(--pad) max(30px, calc(env(safe-area-inset-bottom) + 22px));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .starts::-webkit-scrollbar { display: none; }
  .starts > li {
    flex: 0 0 min(80vw, 330px);
    min-height: 172px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    background: var(--paper);
    scroll-snap-align: center;
  }
  .starts__all {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
  }
  .starts__hint {
    display: block;
    margin-top: auto;
    padding-top: 18px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .starts__reset { display: none; }

  .start__head {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0;
  }
  .start__num { grid-column: 1 / -1; margin-bottom: 14px; }
  .start__name { font-size: 24px; }
  .start__body,
  .stage.is-interactive .start:not(.is-active) .start__body {
    grid-template-rows: 1fr;
    visibility: visible;
    padding-left: 0;
    margin-top: 10px;
    font-size: 14px;
  }
  .start__actions { padding-bottom: 0; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .stage__lead { display: none; }
  .starts > li { min-height: 150px; }
  .starts__hint { font-size: 18px; }
}