/*
 * Knowledge & Visits Index Page Styles
 * Shared body styles for knowledge/index.html and visits/index.html
 * across all language versions.
 *
 * Page-specific blocks (keep inline):
 *   visits/index.html  → .visits-cta
 *   knowledge/index.html → .knowledge-subscribe
 *
 * Also inline (shared across languages):
 *   #footer h2, #footer .alt li, #footer p
 *   .wechat-modal-text
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Page Header ── */
.knowledge-header { text-align: center; margin-bottom: 40px; }
.knowledge-header h1 { font-size: 32px; font-weight: 700; margin-bottom: 10px; color: #1a1a1a; }
.knowledge-header p { font-size: 15px; color: #666; margin: 0; letter-spacing: 0.5px; }

/* ── Category Cards ── */
.knowledge-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; }
.kcat-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px; background: #fff; border-radius: 12px; border: 1.5px solid #e8e8e8; text-decoration: none; color: inherit; transition: all 0.25s; }
.kcat-card:hover { border-color: #00a8e8; box-shadow: 0 4px 20px rgba(0,168,232,0.15); transform: translateY(-2px); }
.kcat-card i { font-size: 32px; color: #00a8e8; margin-bottom: 12px; }
.kcat-card h3 { font-size: 15px; margin: 0 0 6px; color: #222; }
.kcat-card p { font-size: 12px; color: #888; margin: 0 0 12px; line-height: 1.5; }
.kcat-count { font-size: 11px; background: rgba(0,168,232,0.1); color: #00a8e8; padding: 2px 10px; border-radius: 10px; font-weight: 600; }

/* ── Section ── */
.knowledge-section { margin-bottom: 56px; }
.ks-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid rgba(0,168,232,0.15); }
.ks-header i { font-size: 22px; color: #00a8e8; }
.ks-header h2 { font-size: 20px; font-weight: 700; margin: 0; color: #1a1a1a; }

/* ── Article List ── */
.ks-list { display: flex; flex-direction: column; gap: 12px; }
.ks-article-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: #fff; border-radius: 10px; border: 1px solid #e8e8e8; text-decoration: none; color: inherit; transition: all 0.2s; }
.ks-article-card:hover { border-color: #00a8e8; box-shadow: 0 3px 14px rgba(0,168,232,0.1); }
.ks-article-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 10px; background: rgba(0,168,232,0.08); display: flex; align-items: center; justify-content: center; }
.ks-article-icon i { font-size: 20px; color: #00a8e8; }
.ks-article-body { flex: 1; }
.ks-article-body h3 { font-size: 15px; margin: 0 0 6px; color: #1a1a1a; }
.ks-article-body p { font-size: 14px; color: #555; margin: 0 0 8px; line-height: 1.55; }
.ks-article-meta { display: flex; gap: 14px; }
.ks-article-meta span { font-size: 12px; color: #888; display: flex; align-items: center; gap: 4px; }
.ks-arrow { font-size: 20px; color: #ccc; transition: color 0.2s, transform 0.2s; }
.ks-article-card:hover .ks-arrow { color: #00a8e8; transform: translateX(4px); }

/* ── Responsive ── */
@media (max-width: 900px) { .knowledge-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .knowledge-cats { grid-template-columns: 1fr; } .ks-article-card { flex-wrap: wrap; } .ks-arrow { display: none; } }