/* ===========================================================
   知识体系卡片 · 共享组件
   首页「著作与产品」教程卡（.kcard-compact）与 books.html 详情卡（.kcard）
   共用同一套视觉语言，只是信息密度不同——不是两套设计拼在一起。
   依赖：v3-tokens.css（--v-* 变量）
   =========================================================== */

.kcard {
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: 14px;
    box-shadow: var(--v-shadow);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    transition: .16s;
}
.kcard:hover {
    border-color: var(--v-accent);
    transform: translateY(-2px);
    box-shadow: var(--v-shadow-lg);
}

.kcard-meta {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--v-ink4);
    text-transform: uppercase;
    margin-bottom: 9px;
}

.kcard-title {
    font-family: var(--font-cn-serif, serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--v-ink);
    line-height: 1.4;
    margin-bottom: 3px;
}

.kcard-en {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    letter-spacing: .08em;
    color: var(--v-ink4);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.kcard-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.kcard-tag {
    font-size: 11px;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 9999px;
    white-space: nowrap;
    border: 1px solid var(--v-line2);
    color: var(--v-ink3);
    background: var(--v-bg2);
}
.kcard-tag.core {
    border-color: var(--v-accent);
    color: var(--v-accent);
    background: var(--v-accent-soft);
    font-weight: 600;
}
.kcard-tag.wip {
    border-style: dashed;
    color: var(--v-ink4);
    background: transparent;
}
/* 方法论标签：比核心贡献标签更轻，是「这套体系里有什么」，不是「这套体系是什么」 */
.kcard-tag.fw {
    font-size: 10.5px;
    padding: 4px 9px;
    border-color: var(--v-line);
    background: transparent;
}
.kcard-tag.fw.more {
    border-style: dashed;
    color: var(--v-ink4);
}

.kcard-foot {
    margin-top: auto;
    padding-top: 13px;
    text-align: right;
    font-family: var(--font-mono, monospace);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v-accent);
    font-weight: 600;
}

/* 首页教程卡：只留标题识别 + 标签一行，不放「适合」和阅读链接——
   整张卡本身就是链接，多一行「了解更多」是废话 */
.kcard-compact .kcard-title { font-size: 1rem; }

/* ===========================================================
   books.html 详情卡（.kcard-feature）：大字编排，「适合谁读」当主角。
   跟首页教程卡故意长得不一样——点进来是一个独立的目的地，不是同一张
   卡片放大版。标题放大、标签退到最底部变轻，「适合」用引号衬线大字，
   支持多个版本轮播（books.json 的 for 是数组，1 条就静态显示，
   2 条以上才出现小圆点和自动轮播）。
   =========================================================== */
.kcard-feature { padding: 26px 24px; }
.kcard-feature .kcard-meta { font-size: 9.5px; margin-bottom: 14px; }
.kcard-feature .kcard-title {
    font-size: 1.5rem; line-height: 1.32; margin-bottom: 6px; text-wrap: balance;
}
.kcard-feature .kcard-en { font-size: 10px; margin-bottom: 4px; }
/* 标题固定留 2 行高度、英文副标题锁 1 行——只在卡片并排的宽度下才需要:
   书名长短不一("AI 教育·培养不被 AI 替代的孩子" 两行 vs "智能密度" 一行),
   不锁高度的话同一排里短标题卡片的引号/标签会比长标题卡片整体高出一截,
   看上去参差不齐。但 621px 以下 .grid 已经收成单列(见 books.html),
   每张卡自己独占一行,没有"对齐同排"这回事,锁高度只会在短标题下面
   白留一块空——所以这条规则只在还存在多列排布的宽度下生效。 */
@media (min-width: 621px) {
    .kcard-feature .kcard-title {
        min-height: 2.64em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .kcard-feature .kcard-en { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.kcard-quote { position: relative; display: grid; margin: 18px 0 20px; padding-left: 16px; }
.kcard-quote::before {
    content: '\201C'; position: absolute; left: -4px; top: -18px;
    font-family: var(--font-serif, Georgia); font-size: 2.6rem;
    color: var(--v-accent); opacity: .32; line-height: 1; pointer-events: none;
}
/* 同一格叠放所有版本——高度跟着最长的那条走，切换时卡片不会跳高 */
.kcard-quote-slide {
    grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity .6s ease, transform .18s ease;
    font-family: var(--font-cn-serif, serif); font-size: 15px; color: var(--v-ink2); line-height: 1.75;
}
.kcard-quote-slide.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .kcard-quote-slide { transition: none; }
}
/* 拖拽跟手要即时,不能带位移过渡的延迟——按住时关掉 transform 的 transition,
   松手落定(或回弹)那一下再交给 JS 清掉行内 transform,走回上面的默认过渡 */
.kcard-quote.dragging .kcard-quote-slide { transition: opacity .6s ease; }
.kcard-quote { cursor: grab; touch-action: pan-y; }
.kcard-quote.dragging { cursor: grabbing; }
/* 引号区左右两侧的隐形悬停带——鼠标划过去直接翻上一条/下一条,不用先找圆点。
   宽度锁死在边缘一小条(不能让它跟文字格一样铺满整个宽度——早前两个方向的
   translate 区块各自 stretch 满格、后一个在 DOM 顺序上盖住前一个,导致鼠标
   一进入整段引号文字(不只是边缘)就被当成"划到下一条"，点在中间也会被判给
   next 区、点击穿透冒泡直接跳转到卡片链接页。真正的翻页/跳转现在交给下面的
   拖拽手势和圆点，这里只留一个悬停提示。 */
.kcard-quote-hz {
    grid-area: 1 / 1; display: flex; align-items: center; z-index: 2;
    width: 30px; justify-self: start;
}
.kcard-quote-hz.next { justify-self: end; justify-content: flex-end; }
.kcard-quote-hz span {
    opacity: 0; transition: opacity .15s ease;
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif, Georgia); font-size: 15px; line-height: 1; color: var(--v-accent);
    background: var(--v-card); border: 1px solid var(--v-line); box-shadow: var(--v-shadow);
}
.kcard-quote-hz.prev span { margin-left: -13px; }
.kcard-quote-hz.next span { margin-right: -13px; }
.kcard-quote-hz:hover span { opacity: 1; }
@media (hover: none) {
    /* 触屏没有 hover,这套翻页只留给鼠标用户;触屏靠圆点点选 */
    .kcard-quote-hz { display: none; }
}
.kcard-quote-dots { grid-area: 2 / 1; display: flex; gap: 5px; margin-top: 12px; }
.kcard-quote-dots button {
    width: 5px; height: 5px; padding: 0; border: none; border-radius: 50%;
    background: var(--v-line2); cursor: pointer; transition: .15s;
}
.kcard-quote-dots button.active { background: var(--v-accent); width: 14px; border-radius: 3px; }

.kcard-feature .kcard-tags { margin-top: auto; padding-top: 14px; gap: 5px; }
.kcard-feature .kcard-tag { font-size: 10px; padding: 4px 9px; background: transparent; border-color: var(--v-line); color: var(--v-ink4); }
.kcard-feature .kcard-tag.core { color: var(--v-accent); border-color: var(--v-accent); background: transparent; font-weight: 500; }
.kcard-feature .kcard-foot { font-size: 9px; opacity: .85; }