/* ===============================================================
   Блок подписки на сообщества.

   Общий файл: подключается и в каталоге материалов, и на страницах
   магазина (у них разные основные таблицы стилей). Разметку отдаёт
   materials/partials/subscribe.php.

   Блок самодостаточен по цветам. Подключающие таблицы называют
   переменные по-разному: materials.css — --terra / --border / --ink,
   legal.css в магазине — --accent / --line / --text. Поэтому здесь
   объявлены собственные переменные с цепочкой запасных значений
   и жёстким литералом в конце: блок одинаково выглядит на любой
   странице и не сломается, если подключить его куда-то ещё.
   =============================================================== */

.subscribe-card {
  --sub-accent:       var(--terra,      var(--accent,       #9B4F2A));
  --sub-accent-hover: var(--terra-l,    var(--accent,       #BF6B42));
  --sub-bg:           var(--terra-bg,   var(--accent-soft,  #FBF0EA));
  --sub-line:         var(--border,     var(--line,         #E8DDD0));
  --sub-ink:          var(--ink,        var(--text,         #2C1F14));
  --sub-ink-soft:     var(--ink-soft,   var(--muted,        #5C4A38));
  --sub-white: #FFFFFF;

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 24px;
  padding: 18px 22px;
  background: var(--sub-bg);
  border: 1px solid var(--sub-line);
  border-radius: 18px;
}

.subscribe-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.subscribe-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sub-ink);
  line-height: 1.35;
}

.subscribe-note {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--sub-ink-soft);
}

.subscribe-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.subscribe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  background: var(--sub-accent);
  color: var(--sub-white);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.subscribe-btn:hover,
.subscribe-btn:focus-visible {
  background: var(--sub-accent-hover);
  color: var(--sub-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(155, 79, 42, 0.25);
}

/* В карточке материала блок скромнее: он не должен спорить
   с кнопкой скачивания, стоящей прямо над ним. */
.modal-subscribe .subscribe-card {
  margin-top: 16px;
  padding: 14px 16px;
  background: transparent;
  border-style: dashed;
}

.modal-subscribe .subscribe-title { font-size: 0.94rem; }
.modal-subscribe .subscribe-note  { font-size: 0.85rem; }

.modal-subscribe .subscribe-btn {
  min-height: 38px;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  background: transparent;
  color: var(--sub-accent);
  border: 1.5px solid var(--sub-accent);
}

.modal-subscribe .subscribe-btn:hover,
.modal-subscribe .subscribe-btn:focus-visible {
  background: var(--sub-accent);
  color: var(--sub-white);
}

@media (max-width: 620px) {
  .subscribe-card {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .subscribe-links { width: 100%; }
  .subscribe-btn { flex: 1; }
}