/* Блок «Статьи по теме» в каталоге и на странице канала */
.bli { margin: 14px 0; background: #fff; border: 1px solid #e6ebf2; border-radius: 16px; padding: 16px 18px 18px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 30px -18px rgba(15,23,42,.25); }
.bli-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bli-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: #0f172a; }
.bli-head a { font-size: 13px; font-weight: 700; color: #0284c7; text-decoration: none; white-space: nowrap; }
.bli-head a:hover { text-decoration: underline; }
.bli-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bli-card { display: flex; flex-direction: column; border: 1px solid #e6ebf2; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; transition: transform .18s, box-shadow .18s, border-color .18s; }
.bli-card:hover { transform: translateY(-2px); border-color: #bae6fd; box-shadow: 0 14px 28px -18px rgba(2,132,199,.45); }
.bli-img { display: block; aspect-ratio: 1200 / 630; background: #e2e8f0; overflow: hidden; }
.bli-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bli-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 12px; flex: 1; }
.bli-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0ea5e9; }
.bli-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #0f172a; }
.bli-meta { margin-top: auto; font-size: 11.5px; color: #64748b; }
html[data-theme="dark"] .bli, html[data-theme="dark"] .bli-card { background: var(--tgd-ink-1, #111d33); border-color: var(--tgd-line, rgba(125,165,220,.16)); }
html[data-theme="dark"] .bli-card { background: var(--tgd-ink-2, #16243f); }
html[data-theme="dark"] .bli-head h2, html[data-theme="dark"] .bli-title { color: var(--tgd-text, #e6edf7); }
html[data-theme="dark"] .bli-meta { color: var(--tgd-text-3, #9fb2cb); }
html[data-theme="dark"] .bli-head a, html[data-theme="dark"] .bli-cat { color: #7dd3fc; }
html[data-theme="dark"] .bli-img { background: var(--tgd-ink-2, #16243f); }
@media (max-width: 760px) { .bli { padding: 12px; } .bli-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .bli-title { font-size: 12.5px; } }