/**
 * 问答列表卡片样式
 *
 * 配合 TempParts/Ask/archive.php（子主题覆盖版）使用。
 * 仅在问答相关页面加载，见 inc/ask.php 的 b2child_is_ask_context()。
 *
 * 列数策略：用 auto-fill + minmax 让网格自己算，不写死断点。
 * 原因是这个模板服务三个页面，容器宽度各不相同 ——
 * /ask 右侧有 300px 侧栏，内容区实测只有 884px；
 * 某用户的问答页则可能是通栏。写死断点会在其中一处出错。
 *
 *   884px 容器  → 2 列（884 / 380 = 2.3）
 *   通栏 1200px → 3 列
 *   手机 390px  → 1 列
 */

.b2c-ask-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* 空状态要横跨整行，否则会被塞进第一列 */
.b2c-ask-empty {
    grid-column: 1 / -1;
}

/* ── 卡片 ──────────────────────────────────────────── */

.b2c-ask-list .ask-item.b2c-ask-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--b2c-card-bg, #fff);
    border-radius: 10px;
    padding: 18px 18px 0;
    /* 覆盖父主题 .ask-item 的横向 flex 布局 */
    align-items: stretch;
    transition: box-shadow .22s ease, transform .22s ease;
    /*
     * 静息态就要有边界。
     *
     * 第二层是用 0 0 0 1px 画的「描边」而不是 border ——
     * border 会占布局盒子，卡片宽度得跟着减 2px；
     * 用 spread 为 1px 的阴影当描边则完全不影响布局，
     * 和第一层投影写在同一条声明里，hover 时一起过渡。
     */
    box-shadow:
        0 1px 2px rgba(20, 24, 40, .06),
        0 0 0 1px rgba(20, 24, 40, .045);
}

.b2c-ask-list .ask-item.b2c-ask-card:hover {
    box-shadow:
        0 8px 24px rgba(20, 24, 40, .10),
        0 0 0 1px rgba(20, 24, 40, .05);
    transform: translateY(-2px);
}

.b2c-ask-card-body {
    flex: 1;
}

/* ── 标题 ──────────────────────────────────────────── */

.b2c-ask-card .ask-title.b2c-ask-title {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 600;
}

.b2c-ask-card .ask-title.b2c-ask-title a {
    color: var(--b2c-text, #1a1a1a);
    /* 标题最多两行，保证卡片高度整齐 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.b2c-ask-card:hover .ask-title.b2c-ask-title a {
    color: var(--b2c-primary, #ff3a55);
}

/* ── 首条回答预览 ──────────────────────────────────── */

.b2c-ask-answer {
    background: var(--b2c-primary-08, rgba(0, 0, 0, .035));
    border-radius: var(--b2c-radius, 4px);
    padding: 12px 14px;
    margin-bottom: 12px;
}

/*
 * 回答者署名行。
 *
 * 1.32.0 起这里没有头像了（原来是 .b2c-ask-ava，一张卡两个圆头像分不清主次）。
 * gap 取 6px，和上方提问者行「昵称 ↔ 提出了问题」的间距保持一致 ——
 * 两行是一对，间距不同会看出来。
 */
.b2c-ask-answer-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.b2c-ask-answer-name {
    font-size: 13px;
    color: var(--b2c-text-muted, #8a8a8a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*
     * ⚠️ min-width:0 不能省。flex 项默认 min-width:auto，
     * 不会收缩到内容宽度以下 —— 长昵称会把「回答了问题」挤出卡片，
     * 上面那三条 ellipsis 也永远不会生效。
     * 1.32.0 之前这行只有昵称一个元素，看不出来；加了后缀才暴露。
     */
    min-width: 0;
}

.b2c-ask-answer-name:hover {
    color: var(--b2c-primary, #ff3a55);
}

/* 「回答了问题」固定文案。flex:none —— 它是身份标识，不能被长昵称压掉 */
.b2c-ask-answer-suffix {
    flex: none;
    font-size: 12.5px;
    color: var(--b2c-text-muted, #b0b0b0);
}

.b2c-ask-best {
    margin-left: auto;
    flex: none;
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 3px;
    color: #fff;
    background: var(--b2c-primary, #ff3a55);
}

.b2c-ask-answer-text {
    display: block;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--b2c-text-muted, #6b6b6b);
}

.b2c-ask-answer-text span {
    /* 摘要最多三行 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.b2c-ask-answer-text:hover { color: var(--b2c-text, #1a1a1a); }

/* 无回答时的引导态：弱化处理，不要抢标题的注意力 */
.b2c-ask-answer.is-empty {
    background: transparent;
    border: 1px dashed var(--b2c-border, rgba(0, 0, 0, .1));
    padding: 14px;
    text-align: center;
}

.b2c-ask-answer.is-empty a {
    font-size: 13px;
    color: var(--b2c-text-muted, #9a9a9a);
}

.b2c-ask-answer.is-empty:hover {
    border-color: var(--b2c-primary, #ff3a55);
}

.b2c-ask-answer.is-empty:hover a {
    color: var(--b2c-primary, #ff3a55);
}

/* ── 标签 ──────────────────────────────────────────── */

.b2c-ask-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.b2c-ask-tags .ask-tag-item {
    font-size: 12px;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .04);
}

/* ── 底栏 ──────────────────────────────────────────── */

/*
 * 底栏只在有悬赏、或本人可编辑时才渲染（见模板的 v-if），
 * 所以这里不再设 min-height —— 不存在"空底栏占位"的情况了。
 */
.b2c-ask-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    margin-top: 4px;
    border-top: 1px solid var(--b2c-border, rgba(0, 0, 0, .06));
    font-size: 12.5px;
    color: var(--b2c-text-muted, #9a9a9a);
}

/* 没有底栏时，卡片底部留出与左右一致的内边距 */
.b2c-ask-list .ask-item.b2c-ask-card > .b2c-ask-card-body:last-child {
    padding-bottom: 18px;
}

/*
 * 提问者署名行 —— 位于标题正下方。
 * 排版上要弱于标题、也弱于下方回答块里的回答者，
 * 读起来像一句署名而不是又一个信息块。
 */
.b2c-ask-asker {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--b2c-text-muted, #9a9a9a);
}

.b2c-ask-asker-in {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex-shrink: 1;
}

/* 「提出了问题」固定文案，不参与压缩 */
.b2c-ask-asker-suffix {
    flex: none;
    color: var(--b2c-text-muted, #b0b0b0);
}

.b2c-ask-asker-ava {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    background: rgba(0, 0, 0, .06);
}

.b2c-ask-asker-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.b2c-ask-asker .ask-user-name {
    color: var(--b2c-text-muted, #7a7a7a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.b2c-ask-asker a:hover .ask-user-name { color: var(--b2c-primary, #ff3a55); }

.b2c-ask-foot-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.b2c-ask-reward {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    color: #e6a23c;
}

.b2c-ask-op { cursor: pointer; }

/* ── 骨架屏 ────────────────────────────────────────── */

.b2c-ask-list .gujia .b2c-ask-card * {
    background: rgba(0, 0, 0, .05);
    border-radius: 3px;
    color: transparent;
}

.b2c-ask-list .gujia .ask-title { height: 18px; width: 85%; }
.b2c-ask-list .gujia .b2c-ask-answer { height: 84px; }

/* 署名行骨架与真实结构对齐：圆形头像 + 一段昵称，避免加载完成时布局跳动 */
.b2c-ask-list .gujia .b2c-ask-asker { gap: 7px; }
.b2c-ask-list .gujia .b2c-ask-asker-ava { width: 22px; height: 22px; border-radius: 50%; }
.b2c-ask-list .gujia .b2c-ask-sk-name { height: 12px; width: 96px; display: block; }

/* ── 窄屏 ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .b2c-ask-grid {
        /* 手机上强制单列。若仍用 minmax(340px)，在 360px 视口下
           网格会退化成一列但卡片被撑到 340px，反而横向溢出。 */
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .b2c-ask-list .ask-item.b2c-ask-card { padding: 15px 15px 0; }

    .b2c-ask-card .ask-title.b2c-ask-title { font-size: 15px; }

    .b2c-ask-answer-text span { -webkit-line-clamp: 2; }
}

/* =========================================================================
 * 让卡片真正「独立」出来
 *
 * ── 问题 ──────────────────────────────────────────────────────────
 * 卡片本身是 #fff，而它外面的 .content-area.box 也是 #fff ——
 * 两层同色，卡片的边界完全看不出来，看着还是一列贴在一起的条目。
 *
 * 线上实测：
 *   .content-area.wrapper.box.ask-archive   background: rgb(255,255,255)
 *   .ask-item.b2c-ask-card                  background: rgb(255,255,255)
 *   #page.site（页面底色）                   background: rgb(247,249,250)
 *
 * ── 做法 ──────────────────────────────────────────────────────────
 * 把外层白盒子改成透明，让卡片直接落在 #f7f9fa 的页面底色上，
 * 白卡片与灰底之间自然就有了对比；盒子里原本靠白底撑着的两块
 * （顶部标题栏、底部分页）各自补一个白面板，不至于裸在灰底上。
 *
 * 这和 1.13.0 处理快讯列表是同一个套路 —— 卡片化的前提是
 * 卡片和它的容器不能同色。
 * ====================================================================== */

/*
 * ⚠️ 两条选择器写的是同一件事，故意分开：
 *
 *   :has() 那条覆盖面更广 —— 问答分类页、某用户的问答页用的是同一个
 *   列表模板，但外层盒子不一定带 .ask-archive 这个类。
 *   然而 :has() 在老浏览器里是无效选择器，整条规则会被丢弃。
 *
 *   所以再写一条按 .ask-archive 命中的，保证问答首页在任何浏览器上都对。
 */
.content-area.box.ask-archive {
    background: transparent;
    box-shadow: none;
}

.content-area.box:has(> .ask-list) {
    background: transparent;
    box-shadow: none;
}

/*
 * 顶部标题栏（问答 / 提问 / 搜索 / 热门·最新·等待回答）。
 *
 * ⚠️ 父主题给它的是：
 *      background: linear-gradient(0.12turn, rgb(255 255 255), transparent);
 *      border-radius: var(--b2radius) var(--b2radius) 0 0;
 *    —— 渐变顶部是**透明**的，圆角也只有上面两个角。
 *    这两条都建立在「它下面还压着一个白盒子」的前提上。
 *    白盒子一透明，这块的上半截就会直接透出灰底，圆角也只剩一半。
 *    所以必须把底色补成实色、圆角补全。
 */
.ask-archive .ask-top,
.content-area.box:has(> .ask-list) .ask-top {
    background: var(--b2c-card-bg, #fff);
    border-radius: 10px;
    margin-bottom: 16px;
}

/* 分页条同理，补一个白面板 */
.ask-archive .ajax-pager,
.content-area.box:has(> .ask-list) .ajax-pager {
    background: var(--b2c-card-bg, #fff);
    border-radius: 10px;
    margin-top: 16px;
}

/* =========================================================================
 * 问题详情页：去掉阅读数
 *
 * 站点目前阅读量还小，露出来反而拉低观感。
 *
 * ── 为什么用 CSS 而不是覆盖模板 ────────────────────────────────────
 * 这个 span 在父主题 single-ask.php 第 126 行，而 single-ask.php 是
 * 250 多行的根模板，里面全是 Vue 模板字符串。为了去掉一个 span
 * 而整份接管，父主题每次升级都得逐行比对，代价远大于收益。
 *
 * ── 选择器为什么这么写 ────────────────────────────────────────────
 * 那个 span 身上**没有任何 class**，同级四个 span 里只有后两个带
 * .ask-favorite。可用的稳定特征只剩里面的图标类名 b2-eye-fill，
 * 所以用 :has() 按图标命中，比 :nth-child(2) 稳 ——
 * 前面那个「回答」span 若哪天变成条件渲染，序号就会错位。
 *
 * 已在线上确认页面里另外两处「阅读」不会被误伤：
 *   .answer-show-more 里的「阅读全部」（展开长回答）
 *   侧栏挂件标题「推荐阅读」
 * ====================================================================== */

.single-ask .ask-metas > span:has(.b2-eye-fill) {
    display: none;
}