/**
 * @versao_deploy 2026-10-08-a-o-cartao-da-campanha
 * 📣 08/10 (F5): o cartão da campanha do Catarse (o módulo js/cartao_campanha.js). Cores PRÓPRIAS, de propósito:
 *    é um cartaz, e lê-se igual no tema claro e no escuro das duas telas (o Literário e o Grupo).
 */
[data-cartao-campanha][hidden] { display: none !important; }

.cartao-campanha {
  --cc-fundo: #fff7e8;
  --cc-borda: #ecd3a4;
  --cc-texto: #2b2116;
  --cc-suave: #7a5a2b;
  --cc-botao: #c2410c;
  --cc-botao-forte: #9a3412;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #fffaf0 0%, var(--cc-fundo) 60%, #fbe7c6 100%);
  color: var(--cc-texto);
  border: 1px solid var(--cc-borda);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(80, 50, 10, 0.10);
  overflow: hidden;
}
.cartao-campanha *, .cartao-campanha *::before, .cartao-campanha *::after { box-sizing: border-box; }
.cartao-campanha-img { display: block; height: auto; object-fit: cover; }
.cartao-campanha-corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.cartao-campanha-botao {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--cc-botao); color: #fff !important; text-decoration: none !important;
  font-weight: 700; font-size: 0.95rem; line-height: 1.2; white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.cartao-campanha-botao:hover, .cartao-campanha-botao:focus-visible { background: var(--cc-botao-forte); transform: translateY(-1px); }
.cartao-campanha-botao:focus-visible { outline: 3px solid #fdba74; outline-offset: 2px; }

/* — o CARTAZ (o feed): a imagem à esquerda e a frase ao lado; no telemóvel, a frase por baixo — */
.cartao-campanha--cartaz { margin: 0 0 14px; padding: 0; align-items: stretch; }
.cartao-campanha--cartaz .cartao-campanha-img { width: 46%; max-width: 360px; aspect-ratio: 16 / 9; flex-shrink: 0; }
.cartao-campanha--cartaz .cartao-campanha-corpo { padding: 16px 18px 16px 2px; justify-content: center; }
.cartao-campanha-selo {
  font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-suave);
}
.cartao-campanha-titulo {
  margin: 0; font-size: 1.3rem; line-height: 1.25; font-weight: 800; color: var(--cc-texto);
  font-family: Georgia, "Times New Roman", serif;
}
@media (max-width: 640px) {
  .cartao-campanha--cartaz { flex-direction: column; gap: 0; }
  .cartao-campanha--cartaz .cartao-campanha-img { width: 100%; max-width: none; }
  .cartao-campanha--cartaz .cartao-campanha-corpo { padding: 12px 14px 14px; }
  .cartao-campanha-titulo { font-size: 1.12rem; }
  .cartao-campanha--cartaz .cartao-campanha-botao { align-self: stretch; justify-content: center; }
}

/* — o COMPACTO (o grupo): uma faixa fina fixa no topo da conversa — FORA da área que rola (é irmã do #gMensagens
     na coluna flex do #gConversa) e sem encolher: a lista das mensagens começa por baixo dela, nunca por trás. */
.g-conversa > [data-cartao-campanha] { flex: 0 0 auto; }
.cartao-campanha--compacto { margin: 6px 10px; padding: 6px 10px 6px 6px; gap: 10px; border-radius: 12px; }
.cartao-campanha--compacto .cartao-campanha-img { width: 72px; aspect-ratio: 16 / 9; border-radius: 8px; flex-shrink: 0; }
.cartao-campanha--compacto .cartao-campanha-corpo { flex: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.cartao-campanha-frase { margin: 0; font-size: 0.88rem; font-weight: 700; line-height: 1.25; }
.cartao-campanha--compacto .cartao-campanha-botao { padding: 7px 12px; font-size: 0.82rem; }
@media (max-width: 480px) {
  .cartao-campanha--compacto .cartao-campanha-img { display: none; }
  .cartao-campanha-frase { font-size: 0.8rem; }
  .cartao-campanha--compacto .cartao-campanha-botao { padding: 6px 10px; font-size: 0.76rem; }
}