/* ============================================================================
   knowledge-components.css — componentes reutilizáveis DENTRO de artigos.
   Seguem o Design System (tints, raios, mono, gradiente). Os autores usam
   estas classes no corpo do artigo. Carregado nas páginas da Knowledge.
   Ver exemplos de markup em /knowledge/content/_TEMPLATE.html.
   ============================================================================ */

/* ── Callout (Tip / Info / Warning / Success) ── */
.kb-callout {
    display: flex; gap: 14px; align-items: flex-start;
    margin: 1.7em 0; padding: 16px 18px;
    border: 1px solid var(--wdt-line); border-left-width: 3px; border-radius: var(--r-lg);
    background: var(--wdt-surface);
}
.kb-callout__icon { flex: 0 0 auto; font-size: 18px; line-height: 1.5; }
.kb-callout__body > :first-child { margin-top: 0; }
.kb-callout__body > :last-child { margin-bottom: 0; }
.kb-callout__title { font-weight: 700; color: var(--wdt-ink); margin-bottom: 4px; }
.kb-callout--tip     { border-left-color: var(--wdt-accent);     background: var(--wdt-surface-tint); }
.kb-callout--info    { border-left-color: var(--wdt-ink-muted);  background: var(--wdt-tint-info); }
.kb-callout--success { border-left-color: var(--wdt-success);    background: var(--wdt-tint-success); }
.kb-callout--warning { border-left-color: var(--wdt-warning);    background: var(--wdt-tint-warning); }

/* ── Code block com título de ficheiro ── */
.kb-codeblock { margin: 1.7em 0; border: 1px solid var(--wdt-line); border-radius: var(--r-lg); overflow: hidden; }
.kb-codeblock__title {
    padding: 10px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--wdt-ink-muted);
    background: var(--wdt-surface); border-bottom: 1px solid var(--wdt-line);
}
.kb-codeblock pre { margin: 0; border: 0; border-radius: 0; }

/* ── Pull quote ── */
.kb-pullquote {
    margin: 1.7em 0; padding: 0; border: 0;
    font-size: 22px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: var(--wdt-ink);
}
.kb-pullquote cite { display: block; margin-top: 10px; font-size: 14px; font-weight: 400; font-style: normal; color: var(--wdt-ink-muted); }

/* ── Imagem + legenda ── */
.kb-figure { margin: 1.8em 0; }
.kb-figure img { margin: 0; }
.kb-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--wdt-ink-muted); text-align: center; }

/* ── Video embed (responsivo 16:9) ── */
.kb-video {
    position: relative; padding-top: 56.25%; margin: 1.8em 0;
    border: 1px solid var(--wdt-line); border-radius: var(--r-lg); overflow: hidden;
}
.kb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Checklist ── */
.kb-checklist { list-style: none; padding: 0; margin: 1.3em 0; }
.kb-checklist li { position: relative; padding-left: 30px; margin: 0.5em 0; }
.kb-checklist li::before {
    content: "✓"; position: absolute; left: 0; top: 0; color: var(--wdt-success); font-weight: 700;
}

/* ── Comparison table ── */
.kb-table { width: 100%; border-collapse: collapse; margin: 1.7em 0; font-size: 15px; }
.kb-table th, .kb-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--wdt-line); }
.kb-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--wdt-ink-muted); }
.kb-table tbody tr:hover td { background: var(--wdt-surface-tint); }

/* ── Timeline ── */
.kb-timeline { list-style: none; margin: 1.7em 0; padding: 0; border-left: 2px solid var(--wdt-line); }
.kb-timeline li { position: relative; margin: 0 0 1.4em; padding-left: 24px; }
.kb-timeline li::before {
    content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--wdt-gradient);
}
.kb-timeline__when { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--wdt-ink-muted); margin-bottom: 2px; }

/* ── Tags do artigo (rodapé) ── */
.kb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
.kb-tags a.wdt-tag { color: var(--wdt-ink-soft); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.kb-tags a.wdt-tag:hover { color: var(--wdt-accent); border-color: var(--wdt-accent); }