/* cn3-plus / engagement */


/* ---- Читают на этой неделе: вертикальные карточки в 2–4 колонки ---- */
.cn3x-trending { margin: 3rem auto; }
.cn3x-trending__list, .cn3x-history__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) { .cn3x-trending__list, .cn3x-history__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cn3x-trending__list, .cn3x-history__list { grid-template-columns: repeat(4, 1fr); gap: 22px 20px; } }

.cn3x-trending__item { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cn3x-trending__thumb { order: -1; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--greyBg); }
.cn3x-trending__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cn3x-trending__num {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  min-width: 2.2ch; padding: 3px 8px; border-radius: 8px;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: var(--t-meta, .78rem); line-height: 1.2; font-weight: var(--bold, 600); font-variant-numeric: tabular-nums; text-align: center;
}
.cn3x-trending__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cn3x-trending__cat {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-label, .65rem); font-weight: var(--bold, 600); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cn3Muted, var(--greyColor));
}
.cn3x-trending__link, .cn3x-history__link span {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  font-size: var(--t-card, .95rem); font-weight: var(--medium, 500); line-height: 1.3; color: inherit; text-decoration: none;
}
.cn3x-trending__link:hover, .cn3x-history__link:hover span { color: var(--hoverColor); text-decoration: none; }

/* ---- Вы читали: те же карточки ---- */
.cn3x-history { margin: 2.4rem auto; }
.cn3x-history[hidden] { display: none; }
.cn3x-history__item { min-width: 0; }
.cn3x-history__link { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.cn3x-history__link:hover { text-decoration: none; }
.cn3x-history__link img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: var(--greyBg); }