/* edicao.css — capa + índice de uma publicação (view edicao.js).
 * Identidade própria do inteiro teor: marca vertical "Jurisprudência" (lombada)
 * na cor da edição sobre fundo branco/neutro + índice numerado. Só tokens de
 * tokens.css. */

.edicao-capa {
  --acento: var(--cor-bordo);
}

/* ---------- Voltar ---------- */
.edicao-capa__voltar {
  margin-bottom: var(--esp-4);
}

/* ---------- Capa (numeral gigante + info) ---------- */
.capa {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--esp-5);
  padding-bottom: var(--esp-6);
  margin-bottom: var(--esp-6);
  border-bottom: 2px solid var(--acento, var(--cor-bordo));
}
/* Marca vertical (lombada do "volume") na cor da edição. Substitui o antigo
 * numeral gigante, que duplicava o "Informativo nº NNN" do título. */
.capa__marca {
  writing-mode: vertical-rl;
  align-self: stretch;
  font-size: clamp(1.05rem, 0.7rem + 1.4vw, 1.6rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--acento, var(--cor-bordo));
}
.capa__info {
  min-width: 0;
}
.capa__eyebrow {
  font-family: var(--fonte-mono);
  font-size: var(--escala-pequena);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-label);
  margin-bottom: var(--esp-2);
}
.capa__titulo {
  font-size: var(--escala-h1);
  color: var(--cor-titulo);
  line-height: 1.05;
}
.capa__meta {
  margin-top: var(--esp-3);
  color: var(--cor-sub);
  font-size: var(--escala-pequena);
}
.capa__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-5);
  padding: var(--esp-3) var(--esp-5);
  background: var(--acento, var(--cor-bordo));
  color: var(--cor-branco);
  border-radius: var(--raio-pilula);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-pilula);
  transition: filter var(--transicao), transform var(--transicao);
}
.capa__cta:hover {
  color: var(--cor-branco);
  filter: brightness(0.92);
  transform: translateY(-1px);
}
.capa__cta-seta {
  font-size: 1.1em;
  line-height: 1;
}

/* Empilha em telas estreitas: marca na horizontal acima, info abaixo. */
@media (max-width: 32rem) {
  .capa {
    grid-template-columns: 1fr;
    gap: var(--esp-2);
  }
  .capa__marca {
    writing-mode: horizontal-tb;
    align-self: start;
  }
}

/* ---------- Índice ---------- */
.indice__eyebrow {
  font-family: var(--fonte-mono);
  font-size: var(--escala-pequena);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-sub);
  margin-bottom: var(--esp-3);
}
.indice__vazio {
  color: var(--texto-suave);
  font-size: var(--escala-pequena);
}
.indice__lista {
  display: grid;
  gap: var(--esp-2);
}
.indice__item {
  border-top: 1px solid var(--cor-fio-item);
}
.indice__item:first-child {
  border-top: none;
}
.indice__link {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-3);
  border-radius: var(--raio);
  color: var(--cor-forte);
  text-decoration: none;
  transition: background var(--transicao);
}
.indice__link:hover {
  background: var(--cor-hover-item);
  color: var(--cor-forte);
}
.indice__num {
  flex: none;
  font-family: var(--fonte-mono);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--acento, var(--cor-bordo));
}
.indice__corpo {
  display: block;
  flex: 1;
  min-width: 0;
}
.indice__cabecalho {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-2);
}
.indice__titulo {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--cor-titulo);
  line-height: 1.35;
}
.indice__tema {
  flex: none;
  padding: 0.15rem 0.6rem;
  border-radius: var(--raio-pilula);
  background: var(--acento-tint, var(--cor-realce-claro));
  color: var(--acento, var(--cor-bordo));
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.indice__meta {
  display: block;
  margin-top: 3px;
  font-size: var(--escala-pequena);
  color: var(--cor-suave);
}
.indice__previa {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: var(--esp-2);
  font-size: var(--escala-pequena);
  line-height: 1.5;
  color: var(--cor-suave);
}
.indice__seta {
  flex: none;
  font-size: 1.25rem;
  color: var(--cor-tenue);
  align-self: center;
}
.indice__link:hover .indice__seta {
  color: var(--acento, var(--cor-bordo));
}