/* HAC-696: /tendencias/ (PT) e /en/trends/ (EN) — páginas de tendências da semana.
   Ranking semanal (Steam Charts + AniList) vindo de cache/tendencias.json.
   CSS em arquivo próprio (CSP live: style-src 'self', nada inline).
   Press Sheet: ranking como tabela de jornal (igual a /livros/) — posição em Bodoni itálico no acento,
   linhas separadas por fio tracejado, nada de cartões. Tokens do /style.css. */

/* <ol> sem números nativos: a posição vem no .tend-pos */
.grade-tendencias {
  list-style: none;
  counter-reset: none;
  margin: 0 0 10px;
  padding: 0;
  border-top: 1px solid var(--fio-forte);
}

.item-tendencia {
  display: grid;
  grid-template-columns: 3.4rem 120px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  padding: 16px 0 18px;
  border-bottom: 1px dashed var(--fio);
}

/* HAC-617 (revisão): capa do título, hospedada em /img/tendencias/ (img-src 'self') */
.tend-capa {
  display: block;
  width: 120px;
  height: 68px;
  object-fit: cover;
  border: 1px solid var(--fio-forte);
}

.tend-pos {
  display: block;
  font: italic 600 2.4rem/.9 var(--serif);
  font-variation-settings: "opsz" 96;
  font-variant-numeric: lining-nums;
  color: var(--acento);
}

.tend-corpo h3 {
  margin: 0 0 4px;
  font: 600 1.25rem/1.2 var(--serif);
  overflow-wrap: anywhere;
}

/* direção: subindo / caindo / estável / novo — etiqueta mono, sem pílula colorida */
.tend-badge {
  display: inline-block;
  margin: 0 0 6px;
  font: 600 .68rem/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tend-up, .tend-novo { color: var(--acento); }
.tend-down, .tend-same { color: var(--tinta-3); }

.tend-meta {
  margin: 0;
  font: 500 .72rem/1.45 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* linha curta "por que está em alta" */
.tend-porque {
  margin: 8px 0 0;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}

.tend-porque strong { color: var(--tinta); }

.tend-coleta {
  margin: 0 0 14px;
  font: 400 .74rem/1.45 var(--mono);
  letter-spacing: .03em;
  color: var(--tinta-3);
}

.tend-vazio {
  margin: 0 0 10px;
  font: italic 500 1.05rem/1.45 var(--serif);
  color: var(--tinta-3);
}

@media (max-width: 640px) {
  .item-tendencia {
    grid-template-columns: 2.6rem 92px minmax(0, 1fr);
    column-gap: 12px;
  }

  .tend-capa { width: 92px; height: 52px; }
  .tend-pos { font-size: 1.9rem; }
}

/* HAC-1566: aviso de link de afiliado — aparece ao lado do link da loja só quando
   o programa está ativo (ID real no config.json). Inline não: CSP live é style-src 'self'. */
.aviso-afiliado { font: 400 .62rem/1.2 var(--mono); letter-spacing: .04em; color: var(--tinta-3); text-transform: none; }