/* ============================================================
 * HubBackoffice — Tipografia padrão das publicações
 * ------------------------------------------------------------
 * Modelo único de fontes, tamanhos e espaçamentos aplicado a
 * todos os artigos publicados. Todo elemento renderizado pelo
 * editor (Quill → content_html) cai dentro de .hb4-article__body
 * e herda as regras abaixo.
 *
 * Fontes:
 *   - Headings (h1–h4): Fraunces (serif) — carregada no base_v4.html
 *   - Texto corrido:    Inter (sans-serif) — herdado de body
 *   - Code:             ui-monospace / SFMono-Regular / Menlo
 *
 * Largura de leitura: 760px (corpo) e 1000px (capa).
 * ============================================================ */

:root {
  /* Cores */
  --art-ink: #1e293b;       /* texto corrido */
  --art-muted: #475569;     /* leads, citações */
  --art-rule: #cbd5e1;      /* divisores e citações */
  --art-link: #2563eb;
  --art-code-bg: #f1f5f9;

  /* Largura de leitura */
  --art-measure: 760px;
  --art-cover-measure: 1000px;

  /* Famílias */
  --art-serif: "Fraunces", Georgia, serif;
  --art-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tamanhos do corpo */
  --art-fs-body: 1.0625rem;   /* ~17px */
  --art-fs-lead: 1.125rem;    /* ~18px */
  --art-fs-h2: 1.6rem;
  --art-fs-h3: 1.3rem;
  --art-fs-h4: 1.125rem;

  /* Title (h1) é responsivo: floor 1.85rem (≈30px), teto 2.75rem (≈44px) */
  --art-fs-title: clamp(1.85rem, 1.4rem + 1.6vw, 2.75rem);

  /* Espaços */
  --art-lh-body: 1.75;
  --art-lh-tight: 1.25;
}

/* === Cabeçalho do artigo === */
.hb4-article { padding: 32px 0 48px; }
.hb4-article__head { max-width: var(--art-measure); margin: 0 auto 24px; }
.hb4-article__title {
  font-family: var(--art-serif);
  font-size: var(--art-fs-title);
  line-height: 1.15;
  margin: 12px 0 16px;
}
.hb4-article__lead {
  font-size: var(--art-fs-lead);
  color: var(--art-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* === Capa === */
.hb4-article__cover { max-width: var(--art-cover-measure); margin: 0 auto 32px; }
.hb4-article__cover img {
  width: 100%; height: auto;
  border-radius: 12px; display: block;
}

/* === Corpo do artigo (saída do editor) === */
.hb4-article__body {
  max-width: var(--art-measure);
  margin: 0 auto;
  font-size: var(--art-fs-body);
  line-height: var(--art-lh-body);
  color: var(--art-ink);
}
.hb4-article__body h1,
.hb4-article__body h2,
.hb4-article__body h3,
.hb4-article__body h4 {
  font-family: var(--art-serif);
  margin: 1.75em 0 0.6em;
  line-height: var(--art-lh-tight);
}
.hb4-article__body h2 { font-size: var(--art-fs-h2); }
.hb4-article__body h3 { font-size: var(--art-fs-h3); }
.hb4-article__body h4 { font-size: var(--art-fs-h4); }

.hb4-article__body p { margin: 0 0 1.1em; }

.hb4-article__body ul,
.hb4-article__body ol { padding-left: 1.5em; margin: 0 0 1.1em; }
.hb4-article__body li { margin-bottom: 0.4em; }

.hb4-article__body a {
  color: var(--art-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hb4-article__body blockquote {
  margin: 1.4em 0;
  padding: 0.6em 1.1em;
  border-left: 3px solid var(--art-rule);
  color: var(--art-muted);
  font-style: italic;
}

.hb4-article__body pre,
.hb4-article__body code {
  background: var(--art-code-bg);
  border-radius: 6px;
  font-family: var(--art-mono);
  font-size: 0.9em;
}
.hb4-article__body code { padding: 0.15em 0.4em; }
.hb4-article__body pre { padding: 1em; overflow-x: auto; }
.hb4-article__body pre code { background: transparent; padding: 0; }

.hb4-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1em 0;
}

/* === Tags no rodapé === */
.hb4-article__tags {
  max-width: var(--art-measure);
  margin: 32px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}