/* Shared styling for the kennisbank articles and /thuisbatterij/{kwh}-kwh landing pages. */

.kb-article { max-width: 760px; margin: 0 auto; }

.kb-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; background: var(--brand-tint); color: var(--brand);
  border-radius: var(--radius-pill); padding: 4px 14px; font-size: var(--text-xs); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-bottom: var(--space-3);
}

.kb-article h1 { font-size: var(--text-3xl); font-weight: var(--weight-extra); color: var(--text-strong); margin: 0 0 var(--space-3); letter-spacing: var(--tracking-tight); }
.kb-article .kb-meta { color: var(--text-faint); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.kb-article h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-strong); margin: var(--space-7) 0 var(--space-3); }
.kb-article p, .kb-article li { font-size: var(--text-base); color: var(--text-body); line-height: 1.7; }
.kb-article ul, .kb-article ol { padding-left: 1.3rem; }

table.kb-table, .kb-article table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.kb-table th, .kb-table td, .kb-article table th, .kb-article table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: var(--text-sm); text-align: left; }
.kb-table th, .kb-article table th { background: var(--surface-muted); font-weight: var(--weight-semibold); color: var(--text-strong); }

.kb-note, .kb-article blockquote {
  background: var(--surface-muted); border-left: 3px solid var(--brand); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-4) 0;
}
.kb-article blockquote p:last-child { margin-bottom: 0; }
.kb-article code { background: var(--surface-muted); border-radius: 4px; padding: 1px 6px; font-size: .875em; }
.kb-article pre { background: var(--surface-muted); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; }
.kb-article pre code { background: none; padding: 0; }
.kb-article img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

.kb-faq dt { font-weight: var(--weight-bold); color: var(--text-strong); margin-top: var(--space-4); }
.kb-faq dd { color: var(--text-body); margin: 4px 0 0; }

.kb-cta { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-6); text-align: center; margin: var(--space-7) 0; }
.kb-cta .btn { margin: 4px 6px; }

.kb-links { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }

.kb-card-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .kb-card-list { grid-template-columns: 1fr; } }
.kb-card {
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-sm); text-decoration: none; display: block; transition: transform .15s, box-shadow .15s;
}
.kb-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kb-card h3 { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-strong); margin: 0 0 4px; }
.kb-card p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }