/* ═══════════════════════════════════════════════════════════════
   Карточки бесплатных гайдов.

   Каждая карточка — во всю ширину строки: обложка слева, текст
   справа. Не плитка в два столбца, потому что текста у гайдов много
   и в узкой колонке он читается хуже, чем в статье.

   Цвета берутся из общих переменных темы, поэтому светлая и тёмная
   получаются сами.
   ═══════════════════════════════════════════════════════════════ */

.ht-guide {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  background: var(--sf);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 0 0 18px;
}

/* Комплект — золотом, как и всё «сверх обычного» на сайте. */
.ht-guide--set { border-color: var(--gold); }

.ht-guide__cover {
  margin: 0;
  padding: 10px;
  background: var(--sunk);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}
.ht-guide__cover img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 168px;
  /* В статьях у картинок рамка, здесь она мешает — фон уже есть. */
  border: 0;
}

.ht-guide__label {
  font-family: "Golos Text", "Golos fallback", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 8px;
}

.ht-guide__title {
  font-family: Spectral, "Spectral fallback", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}

.ht-guide__text {
  font-family: "Golos Text", "Golos fallback", sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--sub);
}
.ht-guide__text p { margin: 0 0 10px; }
.ht-guide__text p:last-child { margin-bottom: 0; }

.ht-guide__ways {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.ht-guide__way {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-family: "Golos Text", "Golos fallback", sans-serif;
  font-size: 14.5px;
  line-height: 1;
  text-decoration: none;
}
.ht-guide__way:hover,
.ht-guide__way:focus-visible {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--on-acc);
}
.ht-guide__way svg { flex: none; }

.ht-guide__word {
  font-family: "Golos Text", "Golos fallback", sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--faint);
  margin: 10px 0 0;
}
.ht-guide__word b { font-weight: 600; color: var(--sub); }

/* На узком экране обложка встаёт сверху и может быть крупнее. */
@media (max-width: 620px) {
  .ht-guide {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }
  .ht-guide__cover { justify-self: start; }
  .ht-guide__cover img { max-height: 210px; }
}

/* ── Отдельная страница гайда ────────────────────────────────── */
/*
 * Человек пришёл по ссылке забрать один файл. Всё выстроено в одну
 * колонку по центру и ведёт к кнопке: обложка, две-три строки, кнопка.
 * Кнопки здесь залиты цветом, а не обведены, как в перечне гайдов:
 * там их пять пар и они спорили бы друг с другом, а тут действие одно.
 */

.ht-magnet { max-width: 720px; margin-inline: auto; }

.ht-magnet__head { text-align: center; margin: 0 0 22px; }
.ht-magnet__eyebrow {
  font-family: "Golos Text", "Golos fallback", sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink);
  margin: 0 0 10px;
}
.ht-magnet .entry-title {
  font-size: clamp(27px, 4.2vw, 38px); line-height: 1.15; margin: 0;
  text-wrap: balance;
}

.ht-magnet__cover {
  margin: 0 auto 26px; padding: 18px; max-width: 430px;
  background: var(--sunk); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); display: grid; place-items: center;
}
.ht-magnet__cover img {
  display: block; width: auto; max-width: 100%; max-height: 320px; border: 0;
}

.ht-magnet__body {
  max-width: 600px; margin-inline: auto; text-align: center;
  font-size: 17.5px;
}
/* Буквица нужна длинной статье, а не двум строкам по центру. */
.ht-magnet__body > p:first-of-type::first-letter {
  float: none; font-size: inherit; line-height: inherit;
  padding: 0; color: inherit; font-weight: inherit;
}

.ht-magnet__back {
  text-align: center; margin: 28px 0 0;
  font-family: "Golos Text", "Golos fallback", sans-serif; font-size: 14.5px;
}

/* ── Кнопки получения ────────────────────────────────────────── */

.ht-get { margin: 26px 0 0; text-align: center; }
.ht-get__note {
  font-family: "Golos Text", "Golos fallback", sans-serif; font-size: 15px;
  color: var(--sub); margin: 0 0 14px;
}
.ht-get__ways { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ht-get__way {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px;
  background: var(--acc); border: 1px solid var(--acc); color: var(--on-acc);
  font-family: "Golos Text", "Golos fallback", sans-serif; font-size: 16px; line-height: 1;
  text-decoration: none;
}
.ht-get__way:hover,
.ht-get__way:focus-visible {
  background: var(--acc-hover); border-color: var(--acc-hover); color: var(--on-acc);
}
.ht-get__way svg { flex: none; }
.ht-get__word {
  font-family: "Golos Text", "Golos fallback", sans-serif; font-size: 13.5px; line-height: 1.5;
  color: var(--faint); margin: 14px 0 0;
}
.ht-get__word b { font-weight: 600; color: var(--sub); }

@media (max-width: 620px) {
  .ht-magnet__cover { padding: 14px; }
  .ht-magnet__cover img { max-height: 260px; }
  .ht-get__way { padding: 13px 22px; font-size: 15.5px; }
}