/* ============================================================
   pages/tg-channels — блок шорткода [tg_channels] (inc/tg-channels.php): запись /raznoe/telegram-chat-01/.
   Порт блока стилей из css/styles.css СТАРОЙ темы (строки .category … .info-view-tb + правила .lwptoc и
   медиа ≤700 / ≤550 / ≤480 / ≤430) «как есть»: те же размеры, отступы и брейкпоинты. Классы прода слишком
   общие (.category, .channel-row, .col--page), поэтому всё под скоупом .cr-tgch — обёртки шорткода.
   Что подогнано под cparip2 (только там, где иначе ломалось):
    — цвета переведены на токены темы (бордеры, текст, плюс/минус подписчиков);
    — таблице возвращён межстрочный 1.65 прода: от .cr-article наследовался бы 1.85 и строки вырастали;
    — оглавление наследует типографику статьи, как настоящие оглавления LuckyWP в cparip2; цвет его ссылок —
      литерал из настроек плагина (у настоящих оглавлений его печатает сам плагин инлайном);
    — якорям секций дан scroll-margin-top: на мобайле шапка cparip2 липкая (на проде — нет);
    — подсказка «Охват» открывается ещё и по фокусу (тап на телефоне): на проде только :hover;
    — ≤430: граница колонок «Охват/Подписчики» сдвинута на 12px, шапка таблицы 13px — «Подписчики» больше не рвётся.
   ============================================================ */

/* --- Оглавление (разметка LuckyWP TOC, собранная шорткодом вручную; CSS плагина на этой странице не грузится) --- */
.cr-tgch .lwptoc{ margin:32px 0; }
.cr-tgch .lwptoc_i{
  padding:14px 18px 18px;
  text-align:left;
}
.cr-tgch .lwptoc_header{ margin-bottom:6px; }
.cr-tgch .lwptoc_title{ font-weight:var(--fw-bold); }
.cr-tgch .lwptoc_item{ margin-top:2px; }
.cr-tgch .lwptoc_item:first-child{ margin-top:0; }
.cr-tgch .lwptoc_item_number{ margin-right:2px; }
/* #2b7abf — цвет ссылок оглавления из настроек LuckyWP TOC (в токенах нет); так выглядят оглавления всех статей */
.cr-tgch .lwptoc_i a{ color:#2b7abf; }
.cr-tgch .lwptoc_i a:hover{ color:#2b7abf; text-decoration:underline; }

/* --- Секция категории --- */
.cr-tgch .category{
  margin-bottom:40px;
  scroll-margin-top:24px;
}
.cr-tgch .category-title{
  margin-bottom:15px;
  font-size:26px;      /* размеры прода; в токенах нет */
  line-height:32px;
  font-weight:var(--fw-bold);
  color:var(--text-heading);
}

/* --- Таблица каналов (флекс-строки) --- */
.cr-tgch .channel-table{
  border:1px solid var(--border);
  border-radius:var(--radius-10);
  overflow:hidden;
  line-height:1.65;    /* межстрочный прода; от статьи пришёл бы 1.85 */
  color:var(--text-primary);
}
.cr-tgch .row--page{
  display:flex;
  background-color:var(--surface-base);
}
.cr-tgch .channel-header{
  border-bottom:1px solid var(--border);
  font-size:16px;
  line-height:22px;
  font-weight:var(--fw-medium);
}
.cr-tgch .channel-row{
  position:relative;
  align-items:flex-start;
}
/* разделитель строк с полями по 15px — как на проде */
.cr-tgch .channel-row::before{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translate(-50%);
  width:calc(100% - 30px);
  height:1px;
  background-color:var(--border);
}
.cr-tgch .channel-row:last-child::before{ display:none; }

.cr-tgch .col--page{ padding:10px 15px; }
.cr-tgch .col-channel{
  flex-grow:1;
  min-width:0;
}
.cr-tgch .col-view{
  flex-shrink:0;
  width:140px;
  margin-left:auto;
  text-align:right;
}
.cr-tgch .col-subscribers{
  flex-shrink:0;
  width:140px;
  text-align:right;
}

.cr-tgch .channel-info-wrap{ display:flex; }
.cr-tgch .channel-avatar{
  flex-shrink:0;
  width:48px;
  height:48px;
  margin-right:10px;
  border-radius:50%;
  overflow:hidden;
  background:var(--surface-image); /* пока аватар не загрузился (ленивая загрузка) */
}
.cr-tgch .channel-avatar a{ display:block; width:100%; height:100%; }
.cr-tgch .channel-avatar img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  border-radius:0;
}
.cr-tgch .channel-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.cr-tgch .channel-name{
  display:block;
  font-size:15px;
  line-height:18px;
  font-weight:var(--fw-bold);
  color:var(--text-heading);
  word-break:break-word;
}
.cr-tgch .channel-name a{
  color:var(--text-heading);
  word-break:break-word;
}
.cr-tgch .channel-login{
  display:block;
  font-size:14px;
}
.cr-tgch .channel-login a{
  color:var(--text-muted);
  word-break:break-word;
}
.cr-tgch .channel-name a:hover,
.cr-tgch .channel-login a:hover{ color:var(--accent); }

.cr-tgch .total-view{
  font-size:16px;
  line-height:20px;
}
.cr-tgch .total-subs{
  display:block;
  font-size:16px;
  font-weight:var(--fw-bold);
  color:var(--text-heading);
}
.cr-tgch .subs-diff{
  display:block;
  font-size:14px;
}
.cr-tgch .subs-diff.negative{ color:var(--danger); }
.cr-tgch .subs-diff.positive{ color:var(--success); }

/* --- Подсказка «i» у «Охват» --- */
.cr-tgch .info-view-tb{
  display:inline-block;
  position:relative;
  width:14px;
  height:14px;
}
.cr-tgch .info-view-tb-icon{
  display:flex;
  width:14px;
  height:14px;
  cursor:pointer;
  border-radius:50%;
}
.cr-tgch .info-view-tb-icon svg{
  display:block;
  width:14px;
  height:14px;
  fill:currentColor;
}
.cr-tgch .info-view-tb-icon:focus-visible{
  outline:none;
  box-shadow:var(--ring-focus);
}
.cr-tgch .info-view-tb-modal{
  display:none;
  position:absolute;
  top:19px;
  left:0;
  z-index:3;
  width:157px;
  padding:7px 11px;
  border:1px solid var(--border);
  border-radius:var(--radius-15);
  background-color:var(--surface-base);
  font-size:14px;
  line-height:16px;
  font-weight:var(--fw-regular);
  text-align:left;
}
.cr-tgch .info-view-tb:hover .info-view-tb-modal,
.cr-tgch .info-view-tb:focus-within .info-view-tb-modal{ display:block; }

/* --- Адаптив: брейкпоинты прода --- */
@media (max-width:1023px){
  /* липкая мобильная шапка cparip2 (≤1023, mobile.css): 59 + воздух (на проде шапка не липкая); под липким A1 (768–1023) — 24, ads.css */
  .cr-tgch .category{ scroll-margin-top:70px; }
}
@media (max-width:700px){
  .cr-tgch .info-view-tb-modal{
    left:auto;
    right:0;
  }
}
@media (max-width:550px){
  .cr-tgch .category{ margin-bottom:20px; }
  .cr-tgch .category-title{
    font-size:16px;
    line-height:22px;
  }
  .cr-tgch .channel-header{
    font-size:14px;
    line-height:16px;
  }
  .cr-tgch .col--page{ padding:5px 10px; }
  .cr-tgch .col-view{ width:113px; }
  .cr-tgch .col-subscribers{ width:103px; }
  .cr-tgch .channel-avatar{
    width:30px;
    height:30px;
  }
  .cr-tgch .channel-name a{
    display:inline-block;
    font-size:14px;
    line-height:16px;
  }
  .cr-tgch .total-view{
    font-size:14px;
    line-height:18px;
  }
  .cr-tgch .total-subs{ font-size:14px; }
}
@media (max-width:480px){
  .cr-tgch .col--page{ padding:5px; }
}
@media (max-width:430px){
  /* На проде 85 + 75: в 65px контента «Подписчики» не влезало и рвалось посреди слова («Подписч/ики»).
     Сумма колонок та же (160), граница сдвинута на 12px, шапка 13px: «Подписчики» = 76px из 78, «Охват i» = 55 из 62. */
  .cr-tgch .col-view{ width:72px; }
  .cr-tgch .col-subscribers{ width:88px; }
  .cr-tgch .channel-header{ font-size:13px; }
}