/* ============================================================
   CTAs AUTOMATICOS DO BLOG — inc/blog-cta.php (tarefa 23/60)
   Carrega so em post. Os dois blocos moram dentro do texto
   (#single article), entao as regras sao escritas com o prefixo
   do bloco e zeram o que o CSS do artigo aplica a p, ul e li.
   Breakpoints do tema: 1220 / 970 / 680.
   ============================================================ */

#single article .qs-bcta {
  clear: both;
  margin: 32px 0px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 10px);
  background-color: var(--surface-blue, #eef4fa);
}

#single article .qs-bcta p { margin: 0px; }

/* ---------- CTA inline ---------- */

#single article .qs-bcta-titulo {
  margin-bottom: 14px;
  font-size: 18px; font-weight: 800; line-height: 1.35;
  color: var(--darkblue);
}
#single article .qs-bcta-pilula { max-width: 560px; }
/* o artigo sublinha todo link; o botao da pilula nao e link de texto */
#single article .qs-bcta-pilula a { text-decoration: none; }
#single article .qs-bcta-link { margin-top: 12px; }
#single article .qs-bcta-link a { font-weight: 700; color: var(--blue); }

/* ---------- Onde ficar ---------- */

#single article .qs-bcta--onde { background-color: #fff; }
#single article .qs-bcta-h {
  font-size: 22px; font-weight: 900; line-height: 1.25; color: var(--darkblue);
}
#single article .qs-bcta-sub { margin-top: 6px; font-size: 15px; color: var(--black); }

#single article ul.qs-bcta-hoteis {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin: 18px 0px 0px; padding: 0px; list-style: none;
}
#single article ul.qs-bcta-hoteis li { margin: 0px; padding: 0px; list-style: none; }
#single article ul.qs-bcta-hoteis li::before { display: none; content: none; }

#single article .qs-bcta-hotel a {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-card, 10px);
  overflow: hidden; background-color: #fff; text-decoration: none; color: var(--black);
}
#single article .qs-bcta-hotel a:hover { border-color: var(--blue); }
#single article .qs-bcta-hotel img.qs-bcta-foto {
  display: block; width: 100%; height: 180px; object-fit: cover; margin: 0px;
}
#single article .qs-bcta-hotel-txt { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
#single article .qs-bcta-hotel-nome { font-size: 16px; line-height: 1.3; color: var(--darkblue); }
#single article .qs-bcta-estrelas { color: #f5b301; letter-spacing: 2px; font-size: 14px; }
#single article .qs-bcta-nota { font-size: 14px; }
#single article .qs-bcta-nota b {
  display: inline-block; padding: 1px 6px; margin-right: 4px;
  border-radius: 4px; background-color: var(--blue); color: #fff;
}
#single article .qs-bcta-ver { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--blue); }

#single article .qs-bcta-selo {
  margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--black);
}
#single article .qs-bcta-selo i { margin-right: 6px; color: var(--blue); }

@media (max-width: 680px) {
  #single article .qs-bcta { margin: 24px 0px; padding: 18px 14px; }
  #single article .qs-bcta-titulo { font-size: 17px; }
  #single article ul.qs-bcta-hoteis { grid-template-columns: 1fr; }
  #single article .qs-bcta-hotel img.qs-bcta-foto { height: 160px; }
  /* a pilula dentro do bloco: sem os icones, o texto cabe inteiro */
  #single article .qs-bcta-pilula .qs-rp-icone { display: none; }
  #single article .qs-bcta-pilula .qs-rp-ver { padding: 0px 12px; }
}