/* ============================================
   ИГРА · games.html — специфичные стили страницы
   Подключается ПОСЛЕ styles.css (его не меняем)
   ============================================ */

/* ---------- шапка страницы ---------- */
.page-hero { padding: 80px 0 40px; }
.page-hero__title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.15;
}
.page-hero__sub {
  margin-top: 18px;
  max-width: 640px;
  color: var(--text-dim);
  font-size: 18px;
}
.page-hero__nav {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 30px;
}
.page-hero__nav a {
  padding: 9px 20px;
  border-radius: 50px;
  border: 1px solid var(--card-border);
  color: var(--lavender);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: border-color .15s, color .15s;
}
.page-hero__nav a:hover { border-color: var(--violet); color: var(--text); }

/* ---------- блоки направлений ---------- */
.games-dir { padding: 56px 0; }
/* отступ под липкую шапку при переходе по якорям */
.games-dir[id] { scroll-margin-top: 84px; }
.games-dir__title {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 8px;
}
.games-dir__sub { color: var(--text-dim); margin-bottom: 30px; max-width: 640px; }

/* ---------- картинка в карточке игры ---------- */
.game-card__img {
  display: block;
  width: 100%; height: 180px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

/* ---------- CTA-блок внизу ---------- */
.games-cta { padding: 40px 0 90px; }
.games-cta .promo__card { text-align: center; }
.games-cta .promo__lead { margin-left: auto; margin-right: auto; }
.games-cta__actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.games-cta__actions .btn { min-width: 200px; text-align: center; }

@media (max-width: 760px) {
  .page-hero { padding: 56px 0 28px; }
  .games-dir { padding: 44px 0; }
}

/* центрирование CTA-блока (разметка из .section + .hero__actions) */
.games-cta { text-align: center; padding-bottom: 90px; }
.games-cta .hero__actions { justify-content: center; }