/*
 * Casco de página — layout comum a todas as páginas internas (listagem,
 * comparação, assuntos, como funciona, apoio). Estava dentro do CSS da
 * listagem, o que deixava as outras páginas sem padding nenhum: layout
 * compartilhado não pode morar num arquivo de página.
 */

.qv-page {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 76px) var(--gutter) clamp(64px, 8vw, 104px);
}

.qv-page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 44px);
  align-items: end;
  padding-bottom: clamp(24px, 3vw, 36px);
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line-strong);
}

.qv-page-intro h1 {
  margin: 0;
  max-width: 16ch;
  color: var(--blue-dark);
  font-size: clamp(2.35rem, 5.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.qv-page-intro > div > p:not(.qv-eyebrow) {
  max-width: 52ch;
  margin: 16px 0 0;
  color: var(--ink-soft);
}

/* Menor e discreta de propósito (feedback direto da mantenedora): é
   proveniência, precisa ficar perto da contagem/título (AGENTS.md §6),
   mas não pode competir visualmente com o H1 da página. */
.qv-page-snapshot {
  display: grid;
  gap: 3px;
  margin: 0;
  text-align: right;
  color: var(--muted);
  font-size: 0.76rem;
}

/* Antes era azul forte com sublinhado permanente — feedback direto da
   mantenedora ("por que tá azul?" / "tira o sublinhado"). Sem cor nem
   sublinhado em repouso, o peso da fonte (já herdado, 700) é o único
   sinal visual constante; o sublinhado aparece em foco/hover (mesmo
   padrão do rodapé, .qv-footer a), pra continuar identificável como
   link sem "só cor" (AGENTS.md §6) no momento em que importa: ao
   interagir. */
.qv-page-snapshot a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.qv-page-snapshot a:hover,
.qv-page-snapshot a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Em tela estreita o carimbo de atualização desce para baixo do título.
   Esta regra vivia só em pages/candidates.css, então Comparar e Assuntos
   (que usam o mesmo cabeçalho) mantinham as duas colunas no celular e o
   título ficava espremido numa faixa de ~140px. Layout compartilhado mora
   aqui, não num arquivo de página. */
@media (max-width: 920px) {
  .qv-page-intro {
    grid-template-columns: 1fr;
  }

  .qv-page-snapshot {
    text-align: left;
  }
}

.qv-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.qv-page--narrow {
  max-width: 980px;
}

/* Estados compartilhados: carregando e vazio. Ambos sempre em texto
   explícito — nunca um traço, um zero ou um ícone que o leitor possa
   interpretar como "não tem". */
.qv-loading {
  padding: 34px 0;
  color: var(--muted);
}

.qv-empty {
  max-width: 62ch;
  padding: 34px 0;
  color: var(--ink-soft);
}

/* Áreas da vida relacionadas a um tema. Usado na ficha e em Assuntos, então
   vive aqui: é lista de texto com traço fino, não pílula — as áreas
   descrevem onde o tema aparece, não atribuem mérito a ninguém. */
.life-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.life-areas li {
  color: var(--ink-soft);
  font-size: 0.82rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}