/* insights.css — folha da listagem de artigos (insights.html).
   Os cards sao .article-list > .article-card (layout proprio desta pagina, mais
   abaixo). Aqui tambem vivem os hooks do filtro e as chips de severidade.

   HOOKS que o /js/insights.js exige (NAO remover):
     .filter-btn · .filter-btn.active · .article-card[data-cat] · .article-card.hidden */

/* ---------- Barra de filtro (chips-pilula, tema-aware) ---------- */
.filter-bar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(2rem,4vw,3rem); }
.filter-btn {
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  padding:9px 16px; border-radius:100px;
  border:1px solid var(--c-line2); background:transparent; color:var(--c-muted);
  cursor:pointer; line-height:1;
  transition:color .18s, border-color .18s, background .18s;
}
.filter-btn:hover { color:var(--c-fg); border-color:var(--c-accent); }
/* background-origin:border-box: gradiente sobre borda transparente -- sem isto o
   1px da borda ladrilha o gradiente e mostra a cor da ponta OPOSTA. Explicado por
   extenso no .btn.primary do base.css. */
.filter-btn.active { background:var(--grad); background-origin:border-box; border-color:transparent; color:#fff; }

/* ---------- Estado oculto do card (hook do filtro) ---------- */
.article-card.hidden { display:none; }

/* ---------- LISTA DE ARTIGOS ----------
   UM artigo por linha: capa de 340px a esquerda, texto a direita. O formato dá
   largura ao titulo e ao resumo, e devolve espaco a capa -- que numa grade de
   tres colunas ficava pequena demais para ser lida. */
.article-list { display:flex; flex-direction:column; gap:22px; }

.article-card {
  position:relative; display:grid; grid-template-columns:340px 1fr;
  background:var(--c-card); border:1px solid var(--c-line); border-radius:20px;
  overflow:hidden; text-decoration:none; color:var(--c-fg);
  box-shadow:var(--c-shadow);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s;
}
.article-card:hover { transform:translateY(-4px); border-color:transparent; }
/* Contorno em gradiente no hover, pela mascara (borda gradiente sem pseudo-fundo). */
.article-card::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:3;
}
.article-card:hover::before { opacity:1; }

/* A capa e' opcional: o gradiente + o icone .ph ficam no fundo, e se a <img> nao
   carregar o insights.js a remove e sobra o placeholder (nunca um buraco).
   O fundo e' escuro cravado, nao os tokens da secao: a listagem vive numa secao
   clara, e um gradiente translucido ali some com o placeholder branco. O navy
   tambem casa com as capas, que sao todas imagens escuras. */
.article-media {
  position:relative; min-height:210px; overflow:hidden;
  background:linear-gradient(135deg,rgba(4,107,210,.45),rgba(224,53,53,.35)),#0d1728;
  display:grid; place-items:center;
}
.article-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; }
.article-media .ph { width:60px; height:60px; color:rgba(255,255,255,.5); }

.article-body { padding:26px 30px; display:flex; flex-direction:column; justify-content:center; }
.post-meta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.meta-item { display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--c-faint); }
.meta-item svg { width:13px; height:13px; flex:none; }
.article-body h2 { margin:0 0 10px; font-size:clamp(1.18rem,2vw,1.44rem); font-weight:800; line-height:1.3; letter-spacing:-.01em; color:var(--c-fg); }
.article-body p { color:var(--c-muted); margin:0 0 16px; font-size:.95rem; line-height:1.55; }
.article-body p code { font-family:var(--mono); font-size:.86em; }
.read-more { display:inline-flex; align-items:center; gap:6px; font-size:.9rem; font-weight:600; color:var(--c-accent); transition:gap .2s; }
.article-card:hover .read-more { gap:10px; }

/* No celular a capa vira faixa horizontal no topo. */
@media (max-width:760px) {
  .article-card { grid-template-columns:1fr; }
  .article-media { min-height:auto; aspect-ratio:16/10; }
  .article-body { padding:22px; }
}

/* ---------- Chips de severidade das CVEs (aditivo ao base.css) ----------
   Otimizadas para a secao clara onde a listagem vive. */
.chip.crit   { color:#b91c1c; background:rgba(224,53,53,.12); border-color:rgba(224,53,53,.35); }
.chip.danger { color:#b91c1c; background:rgba(224,53,53,.08); border-color:rgba(224,53,53,.25); }
.chip.warn   { color:#a16207; background:rgba(234,179,8,.14); border-color:rgba(234,179,8,.40); }

/* insight-meta ja' vem do base.css; garante respiro depois da chip */
.t-card > .chip + .insight-meta { margin-top:12px; }