/* article-list.mobile.css
 * 差异覆写：仅手机端通过 <link media="(max-width:768px)"> 生效
 * 通过 mkl_enqueue_styles('article-list') 自动挂载
 * ⚠️ 铁律 #24：PC 文件 article-list.css 一字不动
 * ⚠️ 本文件不写 @media 查询
 */

/* ─── 布局容器 ─── */
/* PC: padding 60px 40px 80px → 左右收窄，上下收紧 */
.mkl-article-list {
    padding: 32px 20px 60px;
}

/* ─── Tab 栏 ─── */
/* PC: gap 32px → 20px，允许换行（排序区自然沉到第二行） */
.mkl-article-tabs {
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.mkl-article-tab {
    font-size: 13px;
    padding: 10px 12px 10px 0;
    margin-right: 20px;
}

/* 排序区：独占一行，靠左对齐，与 Tab 底线分开 */
.mkl-article-sort {
    margin-left: 0;
    width: 100%;
    padding: 12px 0 4px;
    border-top: none;
}

/* ─── 文章网格：3列 → 1列 ─── */
.mkl-article-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ─── 文章卡片 ─── */
/* hover 动效手机无意义，移除位移（避免触摸时跳动） */
.mkl-article-card:hover {
    transform: none;
}

/* 卡片正文区内边距收紧 */
.mkl-article-card__body {
    padding: 12px 16px 16px;
    gap: 6px;
}

/* 标题缩小到14px，2列宽度有限，多显示2-3字减少截断 */
.mkl-article-card__title {
    font-size: 14px;
}

/* meta 信息：字号收小一档 */
.mkl-article-card__meta {
    font-size: 12px;
    gap: 8px;
}

/* ─── 孤儿卡片：最后一张若单独成行，撑满整行作为压轴 ─── */
.mkl-article-grid .mkl-article-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* ─── meta 信息：手机端隐藏「关联X个产品」，防止折行 ─── */
.mkl-article-card__meta span:last-child:not(:first-child) {
    display: none;
}
/* meta 不折行 */
.mkl-article-card__meta {
    flex-wrap: nowrap;
    overflow: hidden;
}

/* ─── 分页 ─── */
.mkl-article-pagination {
    margin-top: 36px;
    flex-wrap: wrap;
    gap: 4px;
}

.mkl-article-pagination a,
.mkl-article-pagination span {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
}