/**
 * Витрина Telegram-канала в статье (.tgc)
 *
 * Живёт в светлом редакционном потоке, поэтому это не баннер, а короткая
 * врезка-«что там сейчас»: три реальных заголовка и время последнего поста.
 * Единственный цветной акцент — Telegram-синий на кнопке: зелёный на этой же
 * странице занят формой подписки, два одинаковых CTA сливались бы в один шум.
 *
 * !important расставлен точечно — тема eblog-lite перебивает списки, ссылки
 * и типографику внутри .entry-content.
 */

.tgc {
  --tgc-ink: #131722;
  --tgc-mute: #5b6672;
  --tgc-dim: #8b95a1;
  --tgc-line: #e7ecf1;
  --tgc-tg: #229ed9;
  --tgc-tg-deep: #1b87ba;
  --tgc-live: #10b981;

  max-width: none;                      /* ширину задаёт колонка статьи */
  margin: 2.25rem 0 !important;
  padding: 0 !important;
  border: 1px solid var(--tgc-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(19, 23, 34, .04);
  transition: border-color .25s, box-shadow .25s, transform .25s;
  box-sizing: border-box;
  font-family: inherit;
}

.tgc:hover,
.tgc:focus-within {
  border-color: #cfdae4;
  box-shadow: 0 10px 28px rgba(19, 23, 34, .09);
  transform: translateY(-2px);
}

/* вся врезка — одна цель клика: задача блока не «почитать тут», а увести в канал */
.tgc__link {
  display: block;
  padding: 1.15rem 1.4rem 1.25rem;
  color: inherit !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.tgc__link:focus-visible {
  outline: 2px solid var(--tgc-tg);
  outline-offset: 3px;
  border-radius: 14px;
}

/* --- шапка --- */
.tgc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--tgc-line);
}

.tgc__eyebrow {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tgc-mute) !important;
}

.tgc__handle {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tgc-tg) !important;
  white-space: nowrap;
}

.tgc__tg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* --- список постов --- */
.tgc__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  counter-reset: none;
}

.tgc__list li::before,
.tgc__list li::marker {
  content: none !important;
}

.tgc__item {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  margin: 0 !important;
  padding: .66rem 0 !important;
  border-bottom: 1px solid var(--tgc-line);
  list-style: none !important;
  text-indent: 0 !important;
}

.tgc__item:last-child {
  border-bottom: 0;
  padding-bottom: .2rem !important;
}

.tgc__time {
  flex: none;
  width: 3.4rem;
  font-size: 12.5px !important;
  color: var(--tgc-dim) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: .01em;
}

.tgc__title {
  font-size: 15.5px !important;
  line-height: 1.42 !important;
  color: var(--tgc-ink) !important;
  font-weight: 500 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- подвал --- */
.tgc__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "pitch cta"
    "live  cta";
  align-items: center;
  column-gap: 1.25rem;
  row-gap: .3rem;
  margin-top: .95rem;
  padding-top: .95rem;
  border-top: 1px solid var(--tgc-line);
}

.tgc__pitch {
  grid-area: pitch;
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--tgc-mute) !important;
  text-indent: 0 !important;
}

/* строка живости: обе цифры отвечают на «а канал вообще жив?» */
.tgc__live {
  grid-area: live;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  color: var(--tgc-dim) !important;
  text-indent: 0 !important;
}

.tgc__subs + .tgc__pulse::before {
  content: '·';
  margin-right: .55rem;
  color: #c3ccd6;
}

/* пульс — единственное «украшение», и оно несёт факт: канал живой прямо сейчас */
.tgc__pulse {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}

.tgc__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tgc-live);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
  animation: tgc-pulse 2.6s ease-out infinite;
}

@keyframes tgc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
  70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.tgc__cta {
  grid-area: cta;
  align-self: center;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .62rem 1.1rem;
  border-radius: 10px;
  background: var(--tgc-tg);
  color: #fff !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  transition: background .2s, transform .2s;
}

.tgc__cta svg {
  width: 16px;
  height: 16px;
  transition: transform .2s;
}

.tgc__link:hover .tgc__cta { background: var(--tgc-tg-deep); }
.tgc__link:hover .tgc__cta svg { transform: translateX(3px); }

/* --- мобильный --- */
@media (max-width: 640px) {
  .tgc { margin: 1.75rem auto !important; }
  .tgc__link { padding: 1rem 1.05rem 1.1rem; }
  .tgc__item { gap: .6rem; padding: .6rem 0 !important; }
  .tgc__time { width: 2.9rem; font-size: 12px !important; }
  .tgc__title { font-size: 14.5px !important; }
  .tgc__foot {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "pitch" "live" "cta";
    row-gap: .6rem;
  }
  .tgc__pitch { font-size: 13px !important; }
  .tgc__cta { justify-content: center; padding: .8rem 1rem; margin-top: .15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tgc, .tgc__cta, .tgc__cta svg { transition: none; }
  .tgc:hover { transform: none; }
  .tgc__dot { animation: none; }
}

/* CPT-раскладка (колонка + sticky-TOC) описана в css/faq-redesign.css
   рядом с формами подписки — там же, где живёт ширина текста. */