/* ===== FlowZenHub – Blog/Article (escopo local) ===== */
:root {
  /* fallbacks (usa Style Guide) */
  --fz-primary: #7A5FA7;
  --fz-secondary: #5caff8;
  --fz-text: #3B3F56;
  --fz-bg: #F8F9FC;
}

:root.dark {
  --fz-text: #E7E9EE;
  --fz-bg: #0B0D12;
}

/* Wrapper do artigo */
.fz-article {
  max-width: 760px;
  margin: 32px auto 64px;
  padding: 0 20px;
  line-height: 1.8;
  font-size: 17px;
  color: var(--content-fg, var(--fz-text));
}

.fz-article-header h1 {
  position: relative;
}
.fz-article-header h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: -8px;
  width: 72px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fz-secondary), var(--fz-primary));
  opacity: .9;
}

/* Parágrafo de abertura “lead” */
.fz-article .lead {
  font-size: 19px;
  line-height: 1.9;
  opacity: .95;
  margin-bottom: 18px;
}

/* Hierarquia dos headings no corpo */
.fz-article h2 {
  margin: 28px 0 12px;
  font-size: clamp(22px, 3vw, 26px);
}
.fz-article h3 {
  margin: 24px 0 10px;
  font-size: 20px;
}

/* Listas com respiro */
.fz-article ul, .fz-article ol {
  padding-left: 1.25rem;
  margin: 10px 0 18px;
}
.fz-article li + li { margin-top: 6px; }

/* Bloco de citação */
.fz-article blockquote {
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--accent, var(--fz-primary));
  background: color-mix(in oklab, var(--fz-primary) 10%, transparent);
  border-radius: 8px;
  font-style: italic;
}

/* Código/Formula */
.fz-article pre, .fz-article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.fz-article pre {
  background: rgba(127,127,127,.08);
  border: 1px solid rgba(127,127,127,.18);
  border-radius: 10px;
  padding: 14px 16px;
  overflow: auto;
  margin: 14px 0 18px;
}
.fz-article code {
  background: rgba(127,127,127,.10);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 90%;
}

/* Imagens/figuras */
.fz-article figure {
  margin: 20px 0;
}
.fz-article img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 30px rgba(0,0,0,.18);
}
.fz-article figcaption {
  font-size: 13px;
  opacity: .75;
  text-align: center;
  margin-top: 8px;
}

/* Tabelas responsivas */
.fz-article .table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(127,127,127,.2);
}
.fz-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.fz-article th, .fz-article td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(127,127,127,.2);
}
.fz-article th { text-align: left; }

/* CTA dentro do texto */
.fz-article .btn,
.fz-article a.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(122,95,167,.35);
}

.fz-article .btn.btn-primary {
  background: linear-gradient(180deg, var(--fz-primary), color-mix(in oklab, var(--fz-primary) 85%, #000 15%));
  color: #fff;
  border: none;
}

/* Separação final do artigo */
.fz-article footer, .fz-article .article-end {
  margin-top: 28px;
  border-top: 1px dashed rgba(127,127,127,.35);
  padding-top: 16px;
  font-size: 14px;
  opacity: .8;
}

/* Prose mínima para compatibilizar texto longo (não conflita com global) */
.fz-article.prose p { margin: 10px 0 16px; }
.fz-article.prose a { color: var(--fz-secondary); text-decoration: underline; }
.fz-article.prose strong { font-weight: 600; }

.link-cta{
  color: var(--fz-secondary,#79a7fc); font-weight:600;
  text-decoration: none; border-bottom: 2px solid currentColor;
  padding-bottom: 2px; transition: gap .15s ease, color .15s ease;
  display:inline-flex; align-items:center; gap:6px;
}
.link-cta:hover{ gap:10px; color: color-mix(in oklab, var(--fz-secondary) 80%, #fff 20%); }
.link-cta:focus-visible{ outline:3px solid color-mix(in oklab, var(--fz-secondary) 50%, #fff 50%); outline-offset:2px; }

.fz-article-header .meta { font-size: 14px; opacity: .75; display:flex; gap:12px; }
/* Ícones da meta (data + leitura) */
.fz-article-header .meta time::before {
  content: "📅";
  margin-right: 6px;
  font-size: 15px;
  display: inline-block;
}

.fz-article-header .meta span::before {
  content: "⏱";
  margin-right: 6px;
  font-size: 15px;
  display: inline-block;
}