/* Страницы новостей: лента /news/ и запись /news/<slug>. Шапка и база — из
   app.css и release.css; здесь только сама колонка текста. */

.news { max-width: 760px; margin: 0 auto; padding: 20px 22px 90px; }
.news h1 { font-size: 30px; line-height: 1.2; margin: 6px 0 8px; }
.newsback { color: var(--dim); text-decoration: none; font-size: 13.5px; }
.newsback:hover { color: var(--ink); }

.post .meta { color: var(--dim-2); font-size: 13px; margin: 0 0 22px; }
.post .body { font-size: 16.5px; line-height: 1.6; }
.post .body h2 { font-size: 22px; margin: 34px 0 10px; }
.post .body h3 { font-size: 19px; margin: 20px 0 4px; }
.post .body p { margin: 0 0 14px; }
.post .body a { color: var(--accent); }
.post .body img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 14px 0; }
.post .body ul, .post .body ol { padding-left: 24px; }
.post .body blockquote { margin: 10px 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid var(--line-2); color: var(--dim); }
.post .body blockquote p:last-child { margin-bottom: 0; }
.post .body hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.post .body hr + h2, .post .body hr + h3 { margin-top: 16px; }

/* Ролик — как «сцена» на странице релиза: свой кадр карты, кнопка во всю
   рамку, плеер — по клику (news.js). */
.ytpost {
  position: relative; margin: 14px 0 16px; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius, 10px); border: 1px solid var(--line); background: #05070a;
}
/* Сильнее общего «.post .body img» (отступы, height:auto, скругление, max-width). */
.post .body .ytpost img, .ytpost img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
/* Обложки YouTube (запасной вариант) несут тонкую чёрную кромку сверху и снизу — на 2% крупнее рамки. */
.post .body .ytpost img.yt, .ytpost img.yt { inset: -2%; width: 104%; height: 104%; }
.ytpost iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }
.ytpost .play {
  all: unset; cursor: pointer; position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; transition: background 200ms;
}
.ytpost .play:hover { background: rgba(0, 0, 0, .18); }
.ytpost .play svg { width: 74px; height: 52px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.ytpost .play .pbg { fill: #1e2229; opacity: .82; transition: fill 160ms, opacity 160ms; }
.ytpost .play .parrow { fill: #fff; }
.ytpost .play:hover .pbg { fill: #cc0000; opacity: 1; }
.ytpost .play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

.newslist { list-style: none; margin: 18px 0 0; padding: 0; }
.newslist li { border-top: 1px solid var(--line); }
.newslist li:last-child { border-bottom: 1px solid var(--line); }
.newslist a {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 16px; align-items: baseline;
  padding: 14px 6px; text-decoration: none; color: var(--ink);
}
.newslist a:hover { background: var(--panel); }
.newslist time { color: var(--dim-2); font-size: 13px; }
.newslist b { font-weight: 600; font-size: 16px; }
.newslist i { color: var(--dim); font-style: normal; font-size: 12.5px; }
.newslist .none { padding: 24px 6px; color: var(--dim); border: 0; }
@media (max-width: 620px) {
  .newslist a { grid-template-columns: 1fr; gap: 4px; }
}

.admbanner {
  position: sticky; top: 0; z-index: 9; margin: 0 0 14px; padding: 8px 14px; border-radius: 8px;
  background: #8a4b12; color: #ffe9d2; font: 600 13px system-ui; text-align: center;
}