/* =========================================================================
   o-klube/style.css — только для страницы «О клубе».

   Подключается после page.css и токенов не переопределяет: мир, шкала,
   палитра и приёмы остаются общими. Здесь живёт одно, чего нет ни на
   одной странице направления: перечень всех направлений площадки,
   разложенный по аудиториям (группы реестра tools/site/pages.json).

   Карточки с кадрами (.dirs из home.css) здесь не годятся: направлений
   четырнадцать, и сетка кадров заняла бы три экрана. Поэтому перечень
   идёт столбцами ссылок — тот же силуэт, что у карты сайта в подвале,
   но крупнее и с пояснением под заголовком каждой группы.
   ========================================================================= */

.napr {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-lg) var(--gap);
  margin: var(--gap-lg) 0 0;
}

.napr__group {
  min-width: 0;
  padding-top: calc(20px * var(--air));
  border-top: 2px solid var(--accent);
}

.napr__title {
  font-size: var(--t-h3);
  margin: 0;
}

.napr__note {
  margin: calc(8px * var(--air)) 0 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--muted);
}

.napr__list {
  margin: calc(18px * var(--air)) 0 0;
  padding: 0;
  list-style: none;
}

.napr__list li + li {
  border-top: 1px solid var(--line);
}

/* Ссылка набрана чернилами, а не акцентом: акцент на светлой бумаге даёт
   4,8 : 1 только на самой светлой полосе, а строк здесь много и мелким
   кеглем. Акцентом остаётся стрелка. Высота строки — от 44 px, чтобы
   попасть пальцем. */
.napr__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding-block: calc(8px * var(--air));
  font-size: var(--t-body);
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}

.napr__link::after {
  content: '→';
  flex: none;
  color: var(--accent-ink);
  transition: transform var(--dur-tap) var(--ease);
}

.napr__link:hover {
  color: var(--accent-ink);
}

.napr__link:hover::after {
  transform: translateX(4px);
}

@media (max-width: 1080px) {
  .napr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .napr {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Разворот с кадром стоит здесь на тёмной полосе, а подложка у .shot
   бумажная: до загрузки кадра в графите светился бы светлый прямоугольник. */
.sec--live .spread__shot {
  background: var(--dark-2);
}

@media (prefers-reduced-motion: reduce) {
  .napr__link::after {
    transition: none;
  }
}