/* ============================================================================
   knowledge.css — Knowledge Base (lista + artigo). Fiel ao DS, leitura
   confortável com largura máx. ~720px. Reutiliza tokens.css e .wdt-*.
   ============================================================================ */

/* ── Barra de pesquisa + filtros (lista) ── */
.kb-controls { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.kb-search { max-width: 420px; }
.kb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-chip {
    font-size: 13px; font-weight: 600; color: var(--wdt-ink-soft);
    border: 1px solid var(--wdt-line); border-radius: var(--r-pill);
    padding: 7px 15px; background: var(--wdt-surface); cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kb-chip:hover { border-color: var(--wdt-line-2); }
.kb-chip.is-active { color: var(--wdt-accent); border-color: var(--wdt-accent); background: var(--wdt-surface-tint); }

.kb-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kb-filter__label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--wdt-ink-muted); margin-right: 2px; }
.kb-block-title { font-size: var(--t-h3); margin: var(--sp-2) 0 var(--sp-3); }
.kb-block { margin-bottom: var(--sp-5); }

/* ── Lista de artigos ── */
.kb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.kb-item__cat { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--wdt-accent); }
.kb-item__title { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.01em; color: var(--wdt-ink); }
.kb-item__desc { font-size: var(--t-small); color: var(--wdt-ink-muted); }
.kb-item__meta { margin-top: auto; font-size: 12px; color: var(--wdt-ink-muted); }

/* Cartão com banner-hero (imagem no topo, texto por baixo) */
.kb-card { padding: 0; gap: 0; overflow: hidden; }
.kb-card__hero { display: block; }
.kb-card__hero img { width: 100%; aspect-ratio: 1.72 / 1; object-fit: cover; display: block; border-bottom: 1px solid var(--wdt-line); }
.kb-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: var(--sp-3); }

/* Banner-hero na página do artigo */
.kb-article__hero { margin: 0 0 var(--sp-5); border: 1px solid var(--wdt-line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); }
.kb-article__hero img { width: 100%; display: block; }

/* Estado vazio / sem resultados */
.kb-empty {
    border: 1px dashed var(--wdt-line-2); border-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--wdt-ink-muted);
    background: var(--wdt-gradient-pink), var(--wdt-surface);
}
.kb-empty b { display: block; color: var(--wdt-ink); font-size: var(--t-h3); font-weight: 600; margin-bottom: 6px; }

/* ── Artigo ── */
.kb-article { max-width: 760px; margin-inline: auto; }
.kb-crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wdt-ink-muted); margin-bottom: var(--sp-4); }
.kb-crumbs a { color: var(--wdt-ink-soft); }
.kb-crumbs a:hover { color: var(--wdt-accent); }
.kb-crumbs__sep { opacity: 0.5; }

.kb-hero { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--wdt-line); text-align: center; }
.kb-hero__cat { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wdt-accent); }
.kb-hero h1 { margin-top: 16px; font-size: clamp(34px, 5.4vw, 64px); letter-spacing: -0.035em; line-height: 1.02; }
.kb-hero__desc { margin: var(--sp-3) auto 0; max-width: 600px; font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: clamp(19px, 2.4vw, 25px); color: #6a5560; line-height: 1.45; }
.kb-meta { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; color: var(--wdt-ink-muted); }
.kb-meta__sep { opacity: 0.5; }

/* ── Prosa (conteúdo do artigo) — leitura confortável ── */
.kb-prose { font-size: 19px; line-height: 1.72; color: #3a3a3a; }
.kb-prose > :first-child { margin-top: 0; }
.kb-prose p { margin: 1.1em 0; color: inherit; }
/* Drop cap no primeiro parágrafo */
.kb-prose > p:first-of-type::first-letter {
    float: left; font-family: var(--font-serif); font-style: normal; font-weight: 400;
    font-size: 78px; line-height: 0.74; padding: 6px 14px 0 0; color: var(--wdt-accent-strong);
}
.kb-prose em { font-family: var(--font-serif); font-style: italic; color: var(--wdt-accent); }
.kb-prose h2 { margin: 1.9em 0 0.6em; font-size: 26px; letter-spacing: -0.015em; color: var(--wdt-ink); }
.kb-prose h3 { margin: 1.5em 0 0.5em; font-size: 20px; letter-spacing: -0.01em; color: var(--wdt-ink); }
.kb-prose ul, .kb-prose ol { margin: 1.1em 0; padding-left: 1.3em; }
.kb-prose li { margin: 0.4em 0; }
.kb-prose a { color: var(--wdt-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.kb-prose strong { color: var(--wdt-ink); }
.kb-prose img { border-radius: var(--r-lg); margin: 1.6em 0; border: 1px solid var(--wdt-line); }
.kb-prose hr { border: none; border-top: 1px solid var(--wdt-line); margin: 2em 0; }
.kb-prose blockquote {
    margin: 1.6em 0; padding: 4px 0 4px 26px;
    border-left: 3px solid transparent; border-image: linear-gradient(180deg, #E51B15, #995C85) 1;
    font-family: var(--font-serif); font-style: italic; font-weight: 300;
    font-size: clamp(22px, 3vw, 30px); line-height: 1.34; color: var(--wdt-ink);
}
.kb-prose code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: var(--wdt-surface-tint); padding: 2px 6px; border-radius: var(--r-sm);
}
.kb-prose pre {
    margin: 1.6em 0; padding: 22px 24px; overflow-x: auto;
    background: #1c171f; border: none;
    border-radius: var(--r-lg); font-family: var(--font-mono); font-size: 13.5px; line-height: 1.8; color: #d9cfd6;
    box-shadow: 0 24px 60px rgba(28,23,31,.32);
}
.kb-prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

/* Conclusão (opcional, realçada com painel suave) */
.kb-prose .kb-conclusion {
    margin-top: 2em; padding: clamp(20px, 3vw, 28px);
    background: var(--wdt-gradient-pink), var(--wdt-surface);
    border-radius: var(--r-lg);
}
.kb-prose .kb-conclusion > :first-child { margin-top: 0; }
.kb-prose .kb-conclusion > :last-child { margin-bottom: 0; }

/* ── Rodapé do artigo: pager + relacionados ── */
.kb-foot { max-width: 760px; margin: var(--sp-6) auto 0; }
.kb-pager { display: flex; justify-content: space-between; gap: var(--sp-2); border-top: 1px solid var(--wdt-line); padding-top: var(--sp-3); }
.kb-pager a { max-width: 48%; }
.kb-pager__dir { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--wdt-ink-muted); margin-bottom: 4px; }
.kb-pager__title { color: var(--wdt-accent); font-weight: 600; font-size: var(--t-small); }
.kb-pager a:last-child { text-align: right; margin-left: auto; }

.kb-related { margin-top: var(--sp-5); }
.kb-related__title { font-size: var(--t-h3); margin-bottom: var(--sp-3); }

@media (max-width: 640px) {
    .kb-pager { flex-direction: column; }
    .kb-pager a, .kb-pager a:last-child { max-width: 100%; text-align: left; }
}