/* Страница событий. Палитра и типографика — из style.css, здесь только раскладка.
   Задача: всё видно сразу, ссылка на первоисточник всегда под рукой. */

.ev-body { background: var(--paper); color: var(--ink); overflow-y: auto; }

.ev-gate { max-width: 32rem; margin: 20vh auto; text-align: center; }

/* ── шапка ───────────────────────────────────────────────────────────── */
.ev-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem;
  padding: .6rem clamp(.75rem, 3vw, 1.5rem);
  background: var(--panel); border-bottom: 1px solid var(--rule);
}
.ev-top .brand { font-weight: 700; letter-spacing: .01em; }
.ev-count { color: var(--ink-faint); font-size: .85rem; }
.ev-who   { margin-left: auto; color: var(--ink-faint); font-size: .85rem; }
/* Объяснение на воротах: человек, который не вошёл, кнопки «Пароль» не видит
   нигде — она внутри. Без этого абзаца он упирается в стену. */
.ev-gate-how {
  max-width: 34rem; margin: .5rem auto 1rem;
  color: var(--ink-soft); font-size: .88rem; line-height: 1.5;
}

/* ── карта с пинами ──────────────────────────────────────────────────── */
.ev-mapwrap {
  position: relative; margin: 0 auto; max-width: 1180px;
  padding: .75rem clamp(.75rem, 3vw, 1.5rem) 0;
}
.ev-mapwrap.folded #map, .ev-mapwrap.folded .ev-pins { display: none; }
#map { cursor: pointer; }  /* кантон выбирается кликом по карте */
#map {
  width: 100%; height: clamp(220px, 34vh, 380px);
  display: block; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--rule);
}
.ev-pins { position: absolute; inset: .75rem clamp(.75rem,3vw,1.5rem) 0; pointer-events: none; }

.pin {
  position: absolute; transform: translate(-50%, -100%);
  pointer-events: auto; cursor: pointer;
  display: grid; place-items: center;
  width: 1.55rem; height: 1.55rem; border-radius: 50% 50% 50% 8%;
  rotate: 45deg;
  background: var(--plate); color: #fff;
  border: 2px solid var(--panel);
  box-shadow: 0 2px 6px rgb(0 0 0 / .3);
  font-size: .72rem; line-height: 1;
}
.pin > span { rotate: -45deg; }
.pin.big  { width: 1.95rem; height: 1.95rem; font-size: .9rem; }
.pin.home { background: var(--alpine); }
.pin.on   { background: var(--walked); color: var(--ink); z-index: 5; }
.pin.off  { opacity: .35; }  /* событие вне выбранного кантона — бледнеет, не пропадает */
.pin:hover, .pin:focus-visible { z-index: 6; outline: none; box-shadow: 0 0 0 3px var(--walked); }

.ev-maptoggle {
  position: absolute; right: clamp(1.1rem,3.4vw,1.9rem); top: 1.1rem;
  background: var(--panel); color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: .2rem .5rem; font-size: .75rem; cursor: pointer;
}

/* ── фильтры ─────────────────────────────────────────────────────────── */
.ev-filters {
  position: sticky; top: 3rem; z-index: 20;
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  max-width: 1180px; margin: 0 auto;
  padding: .7rem clamp(.75rem, 3vw, 1.5rem);
  background: var(--paper); border-bottom: 1px solid var(--rule);
}

/* Выбор кантона. Форму держим как у соседних кнопок-таблеток, иначе
   выпадающий список выглядит чужим в этом ряду. */
.ev-canton {
  appearance: none; font: inherit; font-size: .69rem;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink-soft);
  padding: .26rem 1.4rem .26rem .52rem; border-radius: 1rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .62rem center, right .48rem center;
  background-size: .28rem .28rem, .28rem .28rem;
  background-repeat: no-repeat;
}
.ev-canton:focus-visible { outline: 2px solid var(--lv-reg); outline-offset: 1px; }

/* ── карточки ────────────────────────────────────────────────────────── */
.ev-grid {
  max-width: 1180px; margin: 0 auto;
  padding: 1rem clamp(.75rem, 3vw, 1.5rem) 4rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.card {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 14px; overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.card:hover { box-shadow: 0 4px 16px rgb(0 0 0 / .09); }
.card.flash { border-color: var(--walked); box-shadow: 0 0 0 3px var(--walked-lo); }

/* flex:none — иначе картинка тянется вслед за высокими соседями по ряду
   и пропорция 16:9 перестаёт работать. */
.card-pic { flex: 0 0 auto; aspect-ratio: 16 / 9; background: var(--land); position: relative; overflow: hidden; }
.card-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-pic.none { display: grid; place-items: center; font-size: 2.6rem; opacity: .35; }

.card-badges {
  position: absolute; left: .55rem; top: .55rem; display: flex; gap: .35rem; flex-wrap: wrap;
}
.badge {
  background: var(--panel); color: var(--ink-soft);
  border-radius: 999px; padding: .12rem .55rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--rule);
}
.badge.home { background: var(--plate); color: #fff; border-color: transparent; }
.badge.star { background: var(--walked); color: var(--ink); border-color: transparent; }

.card-body { padding: .8rem .9rem 0; flex: 1; }
.card h2 { font-size: 1.02rem; line-height: 1.3; margin: 0 0 .15rem; }
/* Название как на афише. Мелко и приглушённо — читают русское,
   а это нужно чтобы узнать место и найти событие в интернете. */
.card .orig {
  font-size: .76rem; line-height: 1.3; color: var(--ink-faint);
  margin: 0 0 .3rem;
}
.card .when { color: var(--lv-reg); font-weight: 600; font-size: .84rem; }
.card .where { color: var(--ink-faint); font-size: .84rem; margin-bottom: .5rem; }
.card p.desc {
  margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink-soft);
}
.card .unsure { color: var(--lv-loc); font-size: .78rem; margin-top: .35rem; }

.card-actions {
  /* flex-wrap обязателен: «первоисточник» выезжал за рамку карточки,
     когда добавился «🥾 маршрут» (красный флаг Тани, 26.08) */
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .8rem .9rem .9rem; margin-top: .6rem;
  border-top: 1px solid var(--rule);
}
.btn-star {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .45rem .6rem; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-soft);
  font: inherit; font-size: .88rem;
}
.btn-star[aria-pressed="true"] { background: var(--walked); border-color: transparent; color: var(--ink); font-weight: 600; }
.btn-star:disabled { opacity: .5; cursor: default; }
.marks { font-size: .78rem; color: var(--ink-faint); }

.src {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .45rem .7rem; border-radius: 9px;
  border: 1px solid var(--rule); text-decoration: none;
  color: var(--ink-soft); font-size: .88rem; white-space: nowrap;
}
.src:hover { background: var(--land-hi); color: var(--ink); }
/* 🗑 — кнопка, но одета как соседние ссылки-действия */
button.src { font: inherit; background: transparent; cursor: pointer; }

.ev-empty { text-align: center; color: var(--ink-faint); padding: 2rem; }

@media (max-width: 640px) {
  .ev-filters { top: 2.9rem; }
  .ev-grid { grid-template-columns: 1fr; }
}

/* Карточка без фото: значки становятся первой строкой текста, а не висят
   поверх пустой рамки. Карточка сжимается до содержания. */
.card-body.nopic { padding-top: .75rem; }
.card-body.nopic .card-badges {
  position: static; margin-bottom: .5rem;
}

/* «📅 Запланировано» — будущие походы и на странице событий (26.08) */
.ev-plansbox { margin: 0 clamp(.75rem, 3vw, 1.5rem) .75rem;
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--panel); padding: .55rem .8rem; }
.ev-plans-head { font-weight: 700; font-size: .85rem; margin-bottom: .3rem; }
.ev-plan { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .25rem 0; font-size: .88rem; }
.ev-plan-st { color: var(--ink-faint); font-size: .78rem; }