/* ==========================
   JORNAL DE CAMPANHA
   Depende das variáveis e componentes de style.css,
   home.css, propostas.css.
========================== */

/* ---- Linha do tempo (trajetória na Polícia Civil) ---- */
.jornal-linha-tempo {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.jornal-linha-tempo-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0;
  border-top: 1px solid var(--borda);
}

.jornal-linha-tempo-item:last-child {
  padding-bottom: 0;
}

.jornal-linha-tempo-ano {
  color: var(--azul-medio);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.jornal-linha-tempo-titulo {
  font-weight: 700;
  font-size: 16px;
  color: var(--preto-marca);
}

.jornal-linha-tempo-texto {
  font-size: 13px;
  color: var(--preto-marca);
  opacity: 0.7;
  line-height: 1.6;
}

/* ---- Selo de destaque (reconhecimento) ---- */
.jornal-destaque {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 28px;
  padding: 20px;
  border-radius: 16px;
  background: var(--azul-marinho);
  color: var(--branco);
}

.jornal-destaque strong {
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.35;
}

.jornal-destaque strong span {
  color: var(--dourado);
}

.jornal-destaque p {
  font-size: 13px;
  color: var(--areia);
  opacity: 0.9;
}

/* ---- Chips de municípios ---- */
.jornal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.jornal-chips li {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--areia);
  color: var(--azul-marinho);
  font-size: 12px;
  font-weight: 700;
}

/* ---- Citação em destaque ---- */
.jornal-citacao {
  margin-top: 28px;
  padding: 18px 22px;
  border-left: 3px solid var(--dourado);
  font-family: var(--font-heading);
  font-size: clamp(17px, 3.6vw, 22px);
  line-height: 1.4;
}

/* ---- Número gigante (voz da região) ---- */
/* Fica em fundo claro: dourado sobre branco reprova em AA, por isso usa azul-marinho. */
.jornal-numero-gigante {
  font-family: var(--font-heading);
  color: var(--azul-marinho);
  font-size: clamp(64px, 20vw, 130px);
  line-height: 0.95;
}

/* ---- Selo de perfil (avatar + nome, cabeçalho do jornal) ---- */
.jornal-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(239, 201, 117, 0.5);
  flex: none;
}

.jornal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

@media (min-width: 640px) {
  .jornal-linha-tempo-item {
    flex-direction: row;
    align-items: baseline;
    gap: 20px;
  }

  .jornal-linha-tempo-ano {
    flex: none;
    width: 130px;
  }
}