/*
 * ChaoApps 文章卡片样式（.chao-card）
 * ------------------------------------------------------------------
 * 来源：原为 WPCode 代码片段 #2456「ChaoApps 文章卡片短代码」中内嵌的 <style> 块。
 * 2026-10-04 迁出至子主题，原因：
 *   1. 该 <style> 块位于 <article> 内部，导致 AI 内容抽取与正文向量中混入约 4KB CSS；
 *   2. 内联样式无法被浏览器缓存，每篇文章都要重复传输。
 * 迁出后由 functions.php 在 is_single() 时通过 wp_enqueue_style 加载。
 *
 * 2026-10-04 二次调整：「替代方案」改为与「特色」一致的 flex + 图标布局，
 *   去掉原先贯穿整组的 3px 左竖线；两者仅以图标形状与配色区分：
 *     特色      ★  橙 #f0ad4e
 *     替代方案  ◆  粉 #e91e63
 */

.chao-card { max-width: 100%; font-size: 15px; line-height: 1.7; color: #333; }
.chao-card h2 { font-size: 1.4em; margin: 0 0 8px; padding: 0; }
.chao-card .chao-name { font-size: 1.6em; font-weight: 700; margin-bottom: 6px; }
.chao-card .chao-intro { color: #555; margin-bottom: 10px; }
.chao-card .chao-platforms { margin-bottom: 12px; }
.chao-card .chao-platforms span { display: inline-block; background: #f0f0f0; border-radius: 4px; padding: 2px 10px; margin: 2px 4px 2px 0; font-size: .85em; }
.chao-card .chao-divider { border: 0; border-top: 1px solid #e8e8e8; margin: 20px 0; }
.chao-card .chao-divider h2 { display: inline-block; background: #fff; padding: 0 16px; margin: -12px 0 0; position: relative; top: -6px; font-size: 1.1em; color: #888; }
.chao-card .chao-screenshots { display: flex; flex-wrap: wrap; gap: 8px; }
.chao-card .chao-screenshots img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid #e8e8e8; }
.chao-card .chao-links { margin: 12px 0; }
.chao-card .chao-links .chao-btn { display: inline-block; background: #1aad19; color: #fff; padding: 6px 18px; border-radius: 4px; text-decoration: none; margin: 0 6px 6px 0; font-size: .9em; }
.chao-card .chao-links .chao-btn.chao-btn-dark { background: #333; }
.chao-card .chao-tags { margin: 8px 0; }
.chao-card .chao-tags .chao-tag { display: inline-block; background: #e3f2fd; color: #1565c0; border-radius: 4px; padding: 2px 10px; margin: 2px 4px 2px 0; font-size: .85em; text-decoration: none; }

/* 特色：★ 橙色图标 + 标题 + 描述 */
.chao-card .chao-features .chao-feat { display: flex; align-items: flex-start; margin-bottom: 8px; }
.chao-card .chao-features .chao-feat-icon { color: #f0ad4e; margin-right: 8px; flex-shrink: 0; }
.chao-card .chao-features .chao-feat-title { font-weight: 700; }

/* 替代方案：与特色同构，仅图标与配色不同（◆ 粉色），无左竖线 */
/* 标签分组标题：带方形图标，多标签时组间留出间距 */
.chao-card .chao-alts .chao-alt-group { display: flex; align-items: center; font-weight: 700; margin: 16px 0 8px; }
.chao-card .chao-alts .chao-alt-group:first-child { margin-top: 0; }
.chao-card .chao-alts .chao-alt-group-icon { color: #e91e63; margin-right: 6px; flex-shrink: 0; font-size: .85em; }
/* 条目：结构同特色；描述在 HTML 中保留完整文本（利于 SEO/AI），
   视觉上桌面端只显示一行，超出以省略号截断，悬停可用 title 查看全文 */
.chao-card .chao-alts .chao-alt { display: flex; align-items: flex-start; margin-bottom: 12px; }
.chao-card .chao-alts .chao-alt > div { min-width: 0; flex: 1; }
.chao-card .chao-alts .chao-alt-icon { color: #e91e63; margin-right: 8px; flex-shrink: 0; }
.chao-card .chao-alts .chao-alt-title { font-weight: 700; color: #333; }
.chao-card .chao-alts .chao-alt-title:hover { color: #e91e63; }
.chao-card .chao-alts .chao-alt-desc { color: #777; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }