/* ==========================================================================
   News & Article pages — extends assets/css/style.css and documentation.css.
   Reuses existing design tokens (--bg/--panel/--line/--beam/--teal/--red).
   ========================================================================== */

/* ---------- NEWS GRID CARDS AS LINKS ---------- */
.news-item{ display:block; cursor:pointer; }
.news-item .tag{
  display:inline-block; font-family:'JetBrains Mono'; font-size:10px; color:var(--beam);
  border:1px solid rgba(255,194,75,0.3); background:rgba(255,194,75,0.08);
  padding:3px 9px; border-radius:20px; margin-bottom:12px; letter-spacing:0.3px; text-transform:uppercase;
}
.news-item .date{ display:block; margin-bottom:2px; }
.news-item .arrow{
  display:inline-block; font-family:'JetBrains Mono'; font-size:12.5px; color:var(--beam);
  margin-top:16px; border-bottom:1px solid transparent; transition:border-color 0.2s, gap 0.2s;
}
.news-item:hover .arrow{ border-color:var(--beam); }
.news-item.static{ cursor:default; }
.news-item.static:hover{ transform:none; border-color:var(--line); }

.news-filter{
  display:flex; gap:8px; flex-wrap:wrap; margin:-24px 0 40px;
}
.news-filter button{
  font-family:'JetBrains Mono'; font-size:12px; padding:7px 14px; border-radius:20px;
  border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer;
  transition:border-color 0.2s, color 0.2s, background 0.2s;
}
.news-filter button:hover{ color:var(--text); }
.news-filter button.active{ color:var(--beam); border-color:rgba(255,194,75,0.4); background:rgba(255,194,75,0.08); }

/* ---------- ARTICLE HERO ---------- */
.article-hero{ max-width:820px; }
.back-link{
  display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono'; font-size:12.5px;
  color:var(--muted); margin-bottom:26px; transition:color 0.2s;
}
.back-link svg{ width:13px; height:13px; }
.back-link:hover{ color:var(--beam); }
.article-hero .chip{ margin-bottom:16px; }
.article-hero h1{
  font-family:'Space Grotesk'; font-weight:600; font-size:clamp(28px,4vw,42px);
  line-height:1.18; letter-spacing:-0.4px;
}
.article-meta{
  display:flex; align-items:center; gap:12px; margin-top:16px;
  font-family:'JetBrains Mono'; font-size:12px; color:var(--muted);
}
.article-lede{
  color:var(--text); opacity:0.85; font-size:17px; line-height:1.7; margin-top:22px; max-width:720px;
}
.article-cover{
  display:block; width:100%; max-width:820px; height:auto; aspect-ratio:16/9;
  border-radius:14px; border:1px solid var(--line); margin-top:32px; object-fit:cover;
}

/* ---------- ARTICLE BODY ---------- */
.article-wrap{ max-width:760px; }
.article-wrap .doc-section{ padding-bottom:40px; margin-bottom:40px; }
.article-wrap .doc-section h2{ font-size:clamp(20px,2.4vw,25px); }
.article-wrap .doc-section p{ max-width:none; font-size:15px; }
.article-wrap .doc-note p{ color:var(--text); opacity:0.9; }

.article-faq{ display:flex; flex-direction:column; gap:22px; margin-top:8px; }
.article-faq-item h4{
  font-family:'Space Grotesk'; font-size:15px; font-weight:600; color:var(--text); margin-bottom:6px;
}
.article-faq-item p{ color:var(--muted); font-size:14.5px; line-height:1.65; margin:0; max-width:none; }

@media(max-width:640px){
  .article-meta{ flex-wrap:wrap; }
}

/* ---------- AUTHOR BYLINE (article meta) ---------- */
.author-byline{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--text); text-decoration:none; font-family:'Inter';
}
.author-byline img{
  width:28px; height:28px; border-radius:50%; object-fit:cover;
  border:1px solid var(--line);
}
.author-byline span{ font-size:14px; font-weight:500; }
.author-byline:hover span{ color:var(--beam); }