/* ============================================================
   CHINAZIUM — страница новостей
   Поверх css/site.css: те же токены и карточки, что на главной.
   ============================================================ */

.page-wrap{padding:120px 20px 60px;}

.news-head{max-width:720px; margin-bottom:38px;}
.news-head h1{font-size:clamp(2rem, 5vw, 3rem); margin:12px 0 14px;}
.news-lead{color:var(--muted); line-height:1.65;}

/* Одна колонка: новость читают, а не разглядывают. Ширина ограничена не
   ради красоты — строка длиннее восьмидесяти знаков теряется на возврате. */
.news-feed{display:flex; flex-direction:column; gap:20px; max-width:820px;}
.news-loading{padding:40px 0; color:var(--muted-2);}

.news-card{
  display:flex; flex-direction:column;
  border-radius:20px; overflow:hidden;
  transition:border-color .25s, transform .25s;
}
.news-card:hover{border-color:rgba(var(--glow-rgb, 71,197,255), 0.45);}
.news-card-image{display:block; width:100%; max-height:320px; object-fit:cover;}
.news-card-copy{display:flex; flex-direction:column; gap:12px; padding:26px 28px;}
.news-card-meta{
  display:flex; gap:7px; align-items:baseline;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em;
  color:var(--muted-2);
}
.news-card h2{font-size:1.4rem; color:#fff; line-height:1.25;}
.news-card p{color:var(--muted); line-height:1.7; overflow-wrap:anywhere;}
.news-card .btn{align-self:flex-start;}

/* Пришли из колокольчика — нужная запись подсвечена. Полоской слева, а
   не миганием: подсветка должна пережить прокрутку, а не отвлечь один раз. */
.news-card.is-target{
  border-color:var(--cyan);
  box-shadow:inset 4px 0 0 var(--cyan), 0 20px 60px -30px rgba(var(--glow-rgb, 71,197,255), 0.6);
}

@media (max-width:600px){
  .page-wrap{padding:104px 16px 44px;}
  .news-card-copy{padding:20px 18px;}
  .news-card h2{font-size:1.2rem;}
}