/* ==========================================================================
   Lanet — /blog/ · overrides do widget Soro
   --------------------------------------------------------------------------
   O embed injeta o próprio <style id="soro-blog-styles-light"> no <head> em
   runtime, ou seja DEPOIS deste arquivo. Por isso todo seletor leva o id
   #soro-blog: (1,1,0) ganha de (0,1,0) sem depender de ordem de carga.
   Estrutura gerada pelo widget:
     #soro-blog > .soro-blog > (.soro-blog-header, .soro-blog-content)
     lista:  .soro-blog-list > a.soro-blog-card > (img, .soro-blog-card-content)
     artigo: .soro-blog-article > (title, date, image, content)
   Só cores, fontes e raios — o JS do widget não é tocado.
   Tudo em tokens semânticos (--surface, --foreground, --border, --link…),
   então tema claro e escuro saem de graça.
   ========================================================================== */

#soro-blog { margin-top: var(--space-8); }

#soro-blog .soro-blog {
  max-width: none;
  font-family: var(--font-sans);
  color: var(--subtle-foreground);
}
#soro-blog .soro-blog a { color: inherit; }

/* ── lista ────────────────────────────────────────────────────────────── */
#soro-blog .soro-blog-list { gap: var(--space-4); }

#soro-blog .soro-blog-card {
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
#soro-blog .soro-blog-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
#soro-blog .soro-blog-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}
#soro-blog .soro-blog-card-image { border-radius: var(--radius-md); }

#soro-blog .soro-blog-card-title,
#soro-blog h2.soro-blog-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: 600;
  color: var(--foreground);
}
#soro-blog .soro-blog-card:hover .soro-blog-card-title { color: var(--link); }

#soro-blog .soro-blog-card-excerpt {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--muted-foreground);
}
#soro-blog .soro-blog-card-date {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--muted-foreground);
}

/* ── artigo aberto (?post=<slug>) ─────────────────────────────────────── */
/* o widget faz container.scrollIntoView({block:'start'}); o header é sticky */
#soro-blog, #artigos { scroll-margin-top: 80px; }

#soro-blog .soro-blog-article-title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
#soro-blog .soro-blog-article-date {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--muted-foreground);
}
#soro-blog .soro-blog-article-image { border-radius: var(--radius-lg); }

#soro-blog .soro-blog-article-content {
  font-size: var(--text-base);
  line-height: var(--leading-lg);
  color: var(--subtle-foreground);
}
#soro-blog .soro-blog-article-content h1,
#soro-blog .soro-blog-article-content h2,
#soro-blog .soro-blog-article-content h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--foreground);
}
#soro-blog .soro-blog-article-content strong { color: var(--foreground); }
#soro-blog .soro-blog-article-content a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 4px;
}
#soro-blog .soro-blog-article-content a:hover { color: var(--link-hover); }
#soro-blog .soro-blog-article-content img { border-radius: var(--radius-md); }
#soro-blog .soro-blog-article-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}
#soro-blog .soro-blog-article-content pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
}
#soro-blog .soro-blog-article-content pre code { background: none; padding: 0; }
#soro-blog .soro-blog-article-content blockquote {
  margin: 0 0 1rem;
  padding: 0.25rem 0 0.25rem var(--space-4);
  border-left: 3px solid var(--border-strong);
  color: var(--muted-foreground);
}
#soro-blog .soro-blog-article-content table { border-collapse: collapse; width: 100%; }
#soro-blog .soro-blog-article-content th,
#soro-blog .soro-blog-article-content td {
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

/* ── controles do widget ──────────────────────────────────────────────── */
#soro-blog .soro-blog-back {
  height: 2rem;
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: 500;
  color: var(--foreground);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
#soro-blog .soro-blog-back:hover {
  background: var(--muted);
  border-color: var(--border-strong);
}
#soro-blog .soro-blog-spinner {
  border-color: var(--border);
  border-top-color: var(--link);
}
#soro-blog .soro-blog-empty,
#soro-blog .soro-blog-loading { color: var(--muted-foreground); }
#soro-blog .soro-blog-error { color: var(--danger); }

/* CTA do cabeçalho: o .btn do sistema é white-space:nowrap com altura fixa,
   e a frase inteira ("Fale com o comercial no WhatsApp +55 11 4858-2482")
   estoura a viewport no celular. Abaixo de 560px deixa quebrar em duas
   linhas em vez de vazar. Escopo só do /blog/ — este arquivo não é
   carregado nas outras páginas. */
.page-header .btn-row .btn { max-width: 100%; }
@media (max-width: 560px) {
  .page-header .btn-row .btn {
    height: auto;
    min-height: 2.5rem;
    padding-block: var(--space-2);
    white-space: normal;
    text-align: center;
    line-height: var(--leading-sm);
  }
}

/* Aviso enquanto o widget não responde (o embed reescreve o innerHTML de
   #soro-blog quando carrega, então isto some sozinho). */
.blog-fallback {
  padding: var(--space-6);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
