/* Экран «О клубе» — из макета «Клуб - О нас». Числа без округлений: сверять
   рендер с макетом можно только когда они те же.

   Своим файлом, а не разделом в screens.css: экраны четвёртого этапа
   переносились в три руки, и общий файл был бы одной точкой столкновения.
   Классы с собственным префиксом `ab`, общее берётся из base.css (`cs-*`) и
   anim.css.

   ТРИ КЕЙФРЕЙМА ЗДЕСЬ СВОИ, И ЭТО НЕ ДУБЛИРОВАНИЕ.
     `abFloat` — в anim.css `floaty` есть, но он из «Моего профиля»: карта
       участника там покачивается КАК ПЛАСТИК В РУКЕ, то есть с поворотом
       (`rotate(-1.2deg)` … `1.2deg`) и ходом 6px. Здесь у дизайнера чистая
       вертикаль на 5px — знак клуба и булавка на карте не качаются, а висят.
     `abPop` — `popIn` в anim.css приезжает снизу (`translateY(12px) scale(.94)`),
       здесь плитка просто вырастает на месте (`scale(.9)`, без сдвига).
     `abPinPulse` — в общем файле не встречался вовсе.
   `rowIn` совпал число в число (translateY(14px)) и взят из anim.css.

   Линия на этом экране светлее общесайтовой: у дизайнера `--line` различается
   по экранам — .09 на Главной, .13 здесь (и в Бонусах, и в Профиле). Ею
   обведены переключатель вкладок, карточки и строки; на .09 кромка вокруг
   белой выбранной вкладки пропадала бы. */
.csHead.ab, .abPage { --line: rgba(255, 255, 255, .13); }

/* ── шапка и страница ──────────────────────────────────────────────────────
   Поля у этого экрана 18px, а не 20px общесайтовых; заголовок чуть плотнее
   общего `.cs-h2` (-.6px против -.5px). */
.csHead.ab { padding-left: 18px; padding-right: 18px; }
.csHead.ab .cs-h2 { letter-spacing: -.6px; }

/* Отступы стоят на блоках, а не на странице: у дизайнера визитка, липкий
   переключатель и содержимое вкладки отбиты по-разному. */
.abPage { padding: 0; }

/* ── визитка ─────────────────────────────────────────────────────────────── */
.abTop { padding: 82px 18px 0; text-align: center; }

.abLogo {
  display: inline-flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  width: 104px; height: 104px;
  border-radius: 28px;
  border: 1.5px dashed rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .62);
  animation: abFloat 6s ease-in-out infinite;
}
.abLogo i { font-size: 26px; }
.abLogoCap { font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
/* Знак клуба есть — рамка-заглушка уступает ему место: пунктир значит «сюда
   ещё не положили картинку», и поверх положенной он читался бы как ошибка. */
.abLogo.has {
  border-style: solid;
  border-color: var(--line);
  background-size: cover;
  background-position: center;
}

.abName {
  font-family: var(--f-head);
  font-size: 24px; font-weight: 800; letter-spacing: -.9px;
  color: var(--ink);
  margin-top: 14px;
}
.abWhere { font-size: 11.5px; color: rgba(255, 255, 255, .62); margin-top: 6px; }

/* ── липкий переключатель вкладок ─────────────────────────────────────────
   В макете экран заперт в рамке телефона и прокручивается внутренний
   контейнер; у нас прокручивается ОКНО, и 60px из макета отсчитываются от
   него же — это рост собственной шапки экрана. Вырез телефона она учитывает
   отступом сверху (screens.css, `.csHead`), поэтому его учитывает и якорь:
   иначе на iPhone вкладки прилипали бы под шапку.

   Градиент под переключателем не украшение: под ним проезжает визитка, и без
   заливки имя клуба читалось бы сквозь белую кнопку. */
.abTabsWrap {
  position: sticky;
  top: calc(60px + env(safe-area-inset-top, 0px));
  z-index: 20;
  padding: 16px 18px 10px;
  background: linear-gradient(180deg, var(--bg) 78%, transparent);
}
.abTabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px;
}
.abTab {
  border-radius: 12px;
  padding: 9px 0;
  font-size: 12px; font-weight: 800;
  background: transparent;
  color: rgba(255, 255, 255, .68);
  transition: background .25s ease, color .25s ease;
}
.abTab.on { background: #fff; color: #12100F; }

/* Снизу у дизайнера 34px: там экран заперт в рамке телефона и нижней
   навигации на нём нет. У нас таблетка навигации есть, и содержимое кончается
   общим `--nav-gap` — иначе последняя строка уезжает под неё. */
.abBody { padding: 6px 18px var(--nav-gap); }

/* ── вкладка «О клубе»: рассказ ───────────────────────────────────────────── */
.abAbout {
  border-radius: 20px;
  background: var(--tile);
  border: 1px solid var(--line);
  padding: 15px;
  animation: rowIn .45s var(--ease) both;
}
.abAboutH { font-family: var(--f-head); font-size: 15px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }

/* Свёрнутый рост 84px — из макета. Развёрнутый там 300px, и это высота ровно
   того текста, что нарисован у дизайнера: живой клуб пишет сколько считает
   нужным, и фиксированные 300 обрезали бы конец рассказа. Поэтому раскрытый
   блок растёт по содержимому — тем же приёмом, что уже выбран для описания
   турнира (`.evDesc`, screens.css).

   `pre-line` — абзацы: клуб пишет их переводами строки, и без него три абзаца
   слиплись бы в один. */
.abAboutText {
  margin-top: 9px;
  height: 84px; overflow: hidden;
  font-size: 13.5px; font-weight: 600; line-height: 1.55;
  color: rgba(255, 255, 255, .75);
  white-space: pre-line;
  transition: height .4s var(--ease);
}
.abAboutText.open { height: auto; }
/* Клуб о себе не написал — высота по тексту и цвет подсказки, а не рассказа. */
.abAboutText.none { height: auto; color: rgba(255, 255, 255, .5); }

.abMore {
  display: flex; align-items: center; gap: 6px;
  background: none; padding: 0;
  margin-top: 10px;
  font-size: 13px; font-weight: 800;
  color: var(--acc);
}

/* ── три факта ────────────────────────────────────────────────────────────── */
.abFacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.abFact {
  position: relative;
  height: 88px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--tile), var(--tileHi));
  border: 1px solid var(--line);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .35);
  padding: 11px;
  animation: abPop .4s var(--ease) both;
}
.abFactSuit { position: absolute; right: -8px; top: -12px; font-size: 54px; line-height: 1; }
.abFact > i { position: relative; font-size: 17px; }
.abFactFoot { position: absolute; left: 11px; bottom: 10px; right: 11px; }
.abFactV { display: block; font-size: 17px; color: var(--ink); line-height: 1; }
.abFactK { display: block; font-size: 10px; font-weight: 800; color: rgba(255, 255, 255, .65); margin-top: 5px; }

/* ── строки: ссылки и контакты ────────────────────────────────────────────
   У дизайнера это один блок с одними числами; ссылка отличается тем, что по
   ней переходят — значит она во всю ширину, с текстом по левому краю и
   шевроном справа. */
.abLinks, .abRows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.abLink, .abRow {
  display: flex; align-items: center; gap: 12px;
  border-radius: 16px;
  background: var(--tile);
  border: 1px solid var(--line);
  padding: 12px 13px;
  animation: rowIn .45s var(--ease) both;
}
.abLink { width: 100%; text-align: left; }

.abIco {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
}
.abIco i { font-size: 18px; color: var(--acc); }

.abLinkText { min-width: 0; flex: 1; }
.abLinkName { display: block; font-size: 13px; font-weight: 800; color: var(--ink); }
.abLinkSub { display: block; font-size: 10.5px; color: rgba(255, 255, 255, .62); margin-top: 3px; }
.abRowV { display: block; font-size: 11px; color: rgba(255, 255, 255, .62); margin-top: 3px; }
.abChev { font-size: 17px; color: rgba(255, 255, 255, .35); flex: none; }

/* ── вкладка «Как добраться»: карта ───────────────────────────────────────── */
.abMapCard {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--tile);
  border: 1px solid var(--line);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .42);
  animation: rowIn .45s var(--ease) both;
}

/* Градиент под тайлами — из макета (там им нарисовано само поле карты). У нас
   он виден ровно пока грузятся тайлы, и именно поэтому остаётся: белая или
   пустая дыра на полсекунды заметнее, чем тёмный прямоугольник. */
.abMap {
  position: relative;
  height: 190px;
  background: linear-gradient(180deg, #18251F, #111C18);
  overflow: hidden;
}

/* Мозаика статичной карты (`staticMapHTML`). Её правила живут в стилях
   КАТАЛОГА, а на клубном имени каталожные стили не подключаются вовсе
   (apps/finder/index.html, маркеры `aa:site-head`) — поэтому здесь своя
   копия, и только то, без чего тайлы не встанут на место.

   ШИРИНА ЖЁСТКАЯ И БЛОК ЦЕНТРИРОВАН. `staticMapHTML` кладёт точку клуба ровно
   на середину полосы, которую у неё заказали (`w`), — значит середина полосы
   обязана совпасть с серединой карточки, иначе булавка уедет вбок. 640px — с
   запасом на колонку десктопа (620px минус поля); лишнее срезает `overflow`
   самой карты. */
.abMap .mm-static {
  position: absolute; top: 0; left: 50%;
  width: 640px; margin-left: -320px;
  display: block; overflow: hidden;
}
.abMap .mm-stile { position: absolute; width: 256px; height: 256px; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* Своя метка каталога гасится: булавка здесь из макета, и двух точек на одной
   карте быть не должно. */
.abMap .mm-spin { display: none; }

/* Булавка стоит по центру полоски — там же, где точка клуба: мозаика сдвинута
   под координаты (см. staticMapHTML). В макете это left:200px/top:86px, то
   есть тот же центр нарисованного поля. */
.abPin { position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -17px; }
.abPinWave {
  position: absolute; left: -13px; top: -13px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--acc);
  animation: abPinPulse 2.6s ease-out infinite;
}
.abPinDot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--accInk);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .5);
  animation: abFloat 4s ease-in-out infinite;
}
.abPinDot i { font-size: 18px; }

.abMapFoot { padding: 14px; display: flex; align-items: center; gap: 11px; }
.abMapText { min-width: 0; flex: 1; }
.abAddr { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.abAddrSub { display: block; font-size: 11px; color: rgba(255, 255, 255, .62); margin-top: 3px; }
.abRoute {
  flex: none;
  border-radius: 13px;
  background: var(--acc);
  color: var(--accInk);
  padding: 10px 13px;
  font-size: 12.5px; font-weight: 800;
}

/* ── вкладка «Вопросы» ────────────────────────────────────────────────────── */
.abFaq { display: flex; flex-direction: column; gap: 8px; }
.abQ {
  width: 100%;
  text-align: left;
  border-radius: 16px;
  background: var(--tile);
  border: 1px solid var(--line);
  padding: 13px;
  animation: rowIn .45s var(--ease) both;
}
/* Открытый вопрос обведён акцентом с альфой 40% — это и есть `--accLine`
   (tokens.css). У дизайнера здесь винный литерал rgba(232,83,107,.4); берём
   переменную, иначе у клуба «Лёд» кромка осталась бы красной. */
.abQ.on { border-color: var(--accLine); }

.abQTop { display: flex; align-items: center; gap: 10px; }
.abQT { flex: 1; font-size: 13px; font-weight: 800; color: var(--ink); }
.abQTop i { font-size: 17px; color: var(--acc); }

/* Ответ раскрывается ПО СОДЕРЖИМОМУ: 112px из макета — высота тех коротких
   ответов, что нарисованы у дизайнера, и живой ответ она обрезала бы. Снять
   высоту вовсе нельзя — `0 → auto` браузер не анимирует, и вместо раскрытия
   вышел бы скачок. Пара `0fr → 1fr` единственная, которая и интерполируется,
   и даёт высоту содержимого; время и кривая остались макетными. */
.abA {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.abQ.on .abA { grid-template-rows: 1fr; }
.abA > span {
  display: block;
  overflow: hidden;
  font-size: 12.5px; font-weight: 650; line-height: 1.5;
  color: rgba(255, 255, 255, .7);
}

/* ── широкий экран ────────────────────────────────────────────────────────
   Правило адаптации одно и живёт в desktop.css — КОЛОНКА. Своим блокам его
   ставим здесь, а не туда: тот файл общий, а числа колонки берутся оттуда же
   (`--cs-col`), так что расхождению взяться неоткуда.

   Два места ломались бы молча. Шапка на широком экране перестаёт быть
   фиксированной (desktop.css) — значит 82px под неё уже не нужны, и якорь
   липкого переключателя отсчитывать больше не от чего. */
@media (min-width: 768px) {
  .abTop, .abTabsWrap, .abBody {
    max-width: var(--cs-col);
    margin-left: auto;
    margin-right: auto;
  }
  .abTop { padding-top: 10px; }
  .abTabsWrap { top: 0; }
}

/* ── кейфреймы ───────────────────────────────────────────────────────────── */

/* Знак клуба и булавка висят, а не качаются: чистая вертикаль на 5px. */
@keyframes abFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

/* Круг под булавкой расходится и гаснет. */
@keyframes abPinPulse { 0%, 100% { transform: scale(1); opacity: .45 } 50% { transform: scale(2.1); opacity: 0 } }

/* Плитка факта вырастает на месте, без приезда снизу. */
@keyframes abPop { 0% { opacity: 0; transform: scale(.9) } 100% { opacity: 1; transform: none } }