/* =========================================================================
   home.css — только для главной страницы (корневой index.html).

   Подключается ПОСЛЕ page.css и ничего в нём не переопределяет: мир,
   шкала, палитра и все приёмы остаются общими. Здесь живёт то, чего нет
   ни на одной странице направления, потому что там оно не нужно:

   1. .dirs        — перечень направлений: карточки-ссылки на страницы.

   Карта сайта в подвале раньше жила здесь, а теперь стоит на всех страницах
   и переехала в page.css. Новая страница добавляется карточкой в .dirs;
   меню и карту сайта пишет tools/site/sync-nav.mjs. Порядок работы —
   docs/new-page.md.
   ========================================================================= */

/* =========================================================================
   1. Направления

   Перечень продуктов клуба, а не одно предложение с довесками. Карточки
   равного размера — это содержание, а не оформление: базовый курс здесь
   такой же продукт, как бокс или ММА, и выделять его размером значило бы
   сказать, что клуб — это базовый курс.

   Карточек нет ни рамок, ни подложек — тот же приём, что у мозаики .picks:
   кадр, имя под акцентной линейкой и строка прямо на полосе.
   ========================================================================= */

.dirs {
  display: grid;
  /* Две колонки, а не три и не четыре: кадр направления должен читаться
     как кадр, а не как значок в списке. Четыре карточки встают ровным
     квадратом, пятая и шестая продолжают его без правок сетки. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(48px * var(--air)) var(--gap);
  margin: var(--gap-lg) 0 0;
  padding: 0;
  list-style: none;
}

/* Ссылкой сделана вся карточка целиком, а не подпись под ней: попасть
   пальцем в кадр проще, чем в строку текста, и с клавиатуры остановка
   одна на направление, а не две. */
.dirs__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.dirs__link:focus-visible {
  outline-offset: 6px;
}

/* Рамка нужна, чтобы кадр не выезжал при наведении за свои границы. */
.dirs__frame {
  display: block;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--dark-2);
  margin-bottom: calc(18px * var(--air));
}

/* Соотношение исходное, 3:2: съёмка клуба идёт с водяным знаком внизу, и
   кроп его задел бы. */
.dirs__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dur-state) var(--ease);
}

.dirs__link:hover .dirs__shot,
.dirs__link:focus-visible .dirs__shot {
  transform: scale(var(--drift-zoom));
}

/* Та же линия, что у титра и у имён в мозаике: на странице это один знак,
   а не третий по счёту. */
.dirs__name {
  position: relative;
  padding-left: calc(14px * var(--air));
  font-size: var(--t-h3);
  color: var(--ink);
  margin-bottom: calc(10px * var(--air));
  transition: color var(--dur-tap) linear;
}

.dirs__name::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.16em;
  bottom: 0.16em;
  width: 2px;
  background: var(--accent);
}

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

.dirs__text {
  padding-left: calc(14px * var(--air));
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

/* Строка перехода. Карточка — ссылка целиком, но по одному кадру это не
   видно, и человеку нужно сказать словами, что дальше есть страница.
   Подчёркивание появляется при наведении: постоянное спорило бы с
   акцентной линейкой имени. */
.dirs__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: calc(14px * var(--air));
  margin-left: calc(14px * var(--air));
  min-height: 24px;
  font-size: var(--t-cap);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.dirs__more::after {
  content: '→';
  transition: transform var(--dur-tap) var(--ease);
}

.dirs__link:hover .dirs__more {
  text-decoration: underline;
  text-underline-offset: 4px;
}

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

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

/* Подгруппы перечня: Взрослым, Девушкам, Детям, Индивидуально. У трёх
   последних карточки без кадра — только имя, фраза и переход, — поэтому
   они встают по три в ряд и не тянут за собой высоту кадра. */
.dirs__group {
  margin: calc(56px * var(--air)) 0 0;
  font-size: var(--t-cap);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.dirs__group + .dirs {
  margin-top: calc(20px * var(--air));
}

@media (min-width: 761px) {
  .dirs--text {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dirs--text .dirs__name {
  font-size: var(--t-h4);
}