/* ==========================================================================
   Раздел «Карты»: каталог /maps/ и страница карты /maps/{slug}/.
   Семейство DATABASE из 1cs.png — светлая база, плотная сетка, акцент olive.
   Единственная тёмная зона — панель будущей тактической карты.
   ========================================================================== */

/* --- Шапка раздела ---------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
}
.page-head__main { max-width: 62ch; }
.page-head__lead {
  margin-top: var(--sp-3);
  color: var(--text-secondary);
  font-size: 1.0625rem;
}
.page-head__aside .stat { min-width: 190px; }

/* --- Фильтры каталога -------------------------------------------------------- */

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-card);
}
.filters__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}
.filters__label {
  flex: none;
  width: 108px;
  color: var(--text-muted);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
}
.filters__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-4);
}

.chip__count {
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.chip.is-active .chip__count { color: var(--accent-hover); }
.chip.is-empty { opacity: .5; }
.chip.is-off { color: var(--text-muted); background: var(--surface-soft); border-style: dashed; }

/* --- Карточка карты в каталоге ------------------------------------------------ */

.maps-grid .map-card .card__body { gap: var(--sp-2); padding: var(--sp-4); }
.maps-grid .map-card .card__media { aspect-ratio: 16 / 9; }
.maps-grid .map-card .card__title { font-size: var(--fs-body); }

.map-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.map-card__code { color: var(--text-muted); font-size: var(--fs-tiny); }
.map-card__versions { display: flex; flex-wrap: wrap; gap: 5px; }
.map-card__versions .chip { padding: 3px 8px; font-size: 11px; }

/* Плитка вместо иллюстрации: карты, для которых арт ещё не готов. */
.map-stub {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, var(--surface-warm), var(--surface-soft)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(24, 27, 24, .05) 23px 24px);
  background-blend-mode: normal;
  color: var(--text-muted);
  font-size: 1.75rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: .16em;
}

/* --- Hero страницы карты ------------------------------------------------------ */

.map-hero { padding-top: var(--sp-5); }

.map-hero__panel {
  position: relative;
  overflow: hidden;
  margin-top: var(--sp-4);
  min-height: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-hero);
  box-shadow: var(--shadow-card);
}
.map-hero__art {
  position: absolute;
  inset: 0 0 0 auto;
  width: 54%;
  height: 100%;
  object-fit: cover;
}
.map-hero__art--stub {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--surface-warm), var(--surface-soft));
  color: var(--text-muted);
  font-size: 3rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: .18em;
}
.map-hero__fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      var(--surface) 0%,
      var(--surface) 38%,
      rgba(255, 255, 255, .88) 52%,
      rgba(255, 255, 255, .26) 66%,
      rgba(255, 255, 255, 0) 80%);
}
.map-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 620px;
  padding: var(--sp-7);
}
.map-hero__title { margin: 0; }
.map-hero__lead { max-width: 48ch; color: var(--text-secondary); }
.map-hero__actions { gap: var(--sp-2); margin-top: var(--sp-1); }

.map-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--sp-4);
}
.map-kpi .stat__value { font-size: 1.5rem; }

/* --- Полоса вкладок ------------------------------------------------------------ */

/* В потоке, не sticky: под уже липкой шапкой второй липкий слой перекрывает
   заголовки секций и съедает высоту на невысоких экранах. */
.map-tabs-bar {
  margin-top: var(--sp-6);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.map-tabs-bar .tabs { border-bottom: 0; }

/* Секции с якорями не должны прятаться под шапку и полосу вкладок. */
[id="overview"], [id="callouts"], [id="tactics"], [id="lineups"], [id="stats"], [id="history"] {
  scroll-margin-top: calc(var(--header-h) + 56px);
}

/* --- Обзор: пленты и радар ------------------------------------------------------ */

.site-card {
  flex-direction: row;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
}
.site-card__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.site-card__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.site-card__text {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.map-radar {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-5);
}
.map-radar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.map-radar__title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}
.map-radar__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  flex: 1;
  justify-content: center;
  margin: var(--sp-5) 0;
  padding: var(--sp-6) var(--sp-4);
  border: 1px dashed var(--dark-border);
  border-radius: var(--r-sm);
  text-align: center;
}
/* Превью схемы на странице карты: тот же план, но только маршруты и точки зон —
   подписи в такой ширине всё равно нечитаемы, а форма карты узнаётся. */
.map-radar__body--plan { padding: var(--sp-4) var(--sp-3); border-style: solid; }
.map-radar__mini { width: 100%; }
.map-radar__mini .tp-dot { fill: #5A6866; }
.map-radar__mini .tp-node--site .tp-dot { fill: #7E9E6B; r: 16; }
.map-radar__mini .tp-route { stroke: #46524F; }
.map-radar__mark {
  font-size: 2rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: .18em;
  color: var(--dark-text-muted);
}
.map-radar__text { color: var(--dark-text-muted); font-size: var(--fs-tiny); line-height: 1.6; }
.map-radar__foot .section__link { color: var(--dark-text-muted); }
.map-radar__foot .section__link:hover { color: var(--dark-text); }

/* --- Callouts ------------------------------------------------------------------- */

.callout-card { padding: var(--sp-4); gap: var(--sp-3); }
.callout-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.callout-card__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.callout-card .chip-group { gap: 6px; }

/* --- Тактика и история ----------------------------------------------------------- */

.side-card__text {
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.history-card { padding-bottom: var(--sp-5); }
.history-card__text {
  padding: var(--sp-3) var(--sp-4) 0;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.history-card .chip-group { padding: 0 var(--sp-4); }

/* --- Адаптив ---------------------------------------------------------------------- */

@media (max-width: 1279px) {
  .map-hero__art { width: 46%; }
  .map-hero__content { max-width: 560px; padding: var(--sp-6); }
}

@media (max-width: 1024px) {
  .page-head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .map-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-hero__panel { min-height: 0; }
  .map-hero__art { width: 40%; }
  .map-hero__lead { max-width: none; }
}

@media (max-width: 768px) {
  .filters { padding: var(--sp-4); }
  .filters__row { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .filters__label { width: auto; }
  .filters__summary { margin: var(--sp-4) 0 var(--sp-3); }

  /* Каталог на мобильном не «сжимается», а перестраивается в две колонки:
     одна колонка даёт полосу пустой иллюстрации на пол-экрана. */
  .maps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .maps-grid .map-card .card__body { gap: 6px; padding: var(--sp-3); }
  .maps-grid .map-card .card__title { font-size: var(--fs-small); }
  .maps-grid .map-card .card__subtitle { font-size: var(--fs-tiny); line-height: 1.4; }
  .map-card__head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .map-stub { font-size: 1.25rem; }

  .map-hero { padding-top: var(--sp-4); }
  .map-hero__panel { display: flex; flex-direction: column; }
  .map-hero__art {
    position: static;
    width: 100%;
    height: 170px;
    order: -1;
  }
  .map-hero__fade { display: none; }
  .map-hero__content { max-width: none; padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .map-tabs-bar { margin-top: var(--sp-5); }
  .map-radar { padding: var(--sp-4); }
}