/* Hub de conteúdo do blog: temas, "Comece por aqui" e bloco do blog na home.
   Arquivo complementar ao campeche.css (que é minificado: não editar lá). */
/* ---- tema do artigo (kicker) ---- */
.article-kicker a.article-tema { color: inherit; text-decoration: none; }
.article-kicker a.article-tema:hover, .article-kicker a.article-tema:focus-visible { text-decoration: underline; }

/* ---- chips de tema ---- */
.tema-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.8rem; }
.tema-chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem;
  color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: .8rem; font-weight: 700; white-space: nowrap; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.tema-chip span { padding: .05rem .5rem; color: var(--ink-soft); background: var(--paper); border-radius: 999px; font-size: .72rem; }
.tema-chip:hover, .tema-chip:focus-visible { color: var(--ocean); border-color: var(--ocean); }
.tema-chip[aria-current="true"] { color: var(--white); background: var(--ocean); border-color: var(--ocean); }
.tema-chip[aria-current="true"] span { color: var(--white); background: rgba(255, 255, 255, .22); }
.blog-lista-titulo { margin: 3.2rem 0 1.1rem; font-family: "Playfair Display", Georgia, serif; font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; }
.blog-vazio { margin: 0 0 1.4rem; color: var(--ink-soft); }
.article-card[hidden] { display: none; }
/* capa dos cards sempre 3:2 (igual às capas 1600×1067), para a grade ficar alinhada */
.article-card-media { aspect-ratio: 3 / 2; min-height: 0; }

/* ---- "Comece por aqui" e blocos de 3 cards ---- */
.blog-destaques { margin: 0 0 .5rem; }
.blog-destaques .eyebrow { margin-bottom: 1.1rem; }
.blog-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.blog-grid--3 .article-card-body h2 { font-size: 1.2rem; }
/* tablet: 2 colunas com 3 cards deixaria 2+1; mostra só os 2 primeiros. Celular: 1 coluna com os 3 */
@media (min-width: 721px) and (max-width: 980px) {
  .blog-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-grid--3 .article-card:nth-child(3) { display: none; }
}
@media (max-width: 720px) {
  .blog-grid--3 { grid-template-columns: 1fr; }
  /* celular: chips em uma linha deslizável */
  .tema-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 1.4rem; padding: 2px 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tema-chips::-webkit-scrollbar { display: none; }
  .tema-chip { flex: none; }
}

/* ---- bloco "Do blog" na home ---- */
.section-sand { background: var(--paper-deep); }
.home-blog .blog-intro { display: block; margin-bottom: 1.6rem; }
.home-blog .blog-intro .section-copy { max-width: 60ch; margin-top: .9rem; }
.home-blog-link { margin-top: 2rem; text-align: center; }

/* formulário de cotação: campo de código promocional discreto (abre sob demanda) */
.quote-fields .q-codigo-link{grid-column:1/-1;justify-self:start;margin:0;padding:0;color:var(--ocean-deep);background:none;border:0;font:inherit;font-size:.82rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.quote-fields .q-codigo{grid-column:1/3;max-width:260px}
/* iPhone/Safari: campo de data ignora a largura da coluna e vaza do cartão; sem a aparência nativa ele obedece */
.quote-fields input[type=date]{-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;text-align:left}
.quote-fields input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.2em}

/* destaque em itálico legível sobre o painel verde (antes herdava o azul do fundo) */
.contact-panel .section-heading em{color:#f2d5ac}