/* ==========================================================================
   Poetize 前台 · 移动端双列卡片网格
   站点：https://baby.9k.beer        生成：2026-11-02
   --------------------------------------------------------------------------
   加载顺序：index.html 中本文件排在 css/mobile-polish.css 之后，
   同特异度下后加载者胜，因此本文件用来覆盖 mobile-polish.css 第 9 节
   「文章列表卡片」的单列大卡规则。
   作用范围：仅 @media (max-width: 768px)。桌面端（>768px）零改动。
   实现方式：纯 CSS 覆盖层，不动 Vue 运行时、不动接口、不动语料库。
   参考：sucaizy.com / shahw.cn 手机端的两列小卡（封面在上、标题两行截断、
   分类胶囊、底部时间与热度），卡片之间留 12px 缝，避免正文挤在一起。

   为什么用 !important：主题样式由 JS 在运行时注入 <style>，插入位置晚于
   本文件在 <head> 里的静态 <link>，且部分规则特异度更高；mobile-polish.css
   同样全量使用 !important，这里必须同级别才能压住它。
   ========================================================================== */

@media screen and (max-width: 768px) {

  /* ---------- 1. 列表容器：单列堆叠 → 双列网格 ----------
     实测改动前：.recent-post-container 是纵向堆叠，单张卡 362×350，
     12 张卡把手机端首页拉到 7000px 以上，每屏只能看一张，信息密度极低。 */
  .recent-posts .recent-post-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---------- 2. 卡片外壳：白底圆角 + 轻微投影，卡片之间靠 gap 留白 ---------- */
  .recent-posts .recent-post-item {
    /* 主题给卡片写死了 height:350px，双列窄卡下会留出 100 多像素空白，必须放开 */
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 18px -12px rgba(16, 24, 40, .22) !important;
  }

  /* ---------- 3. 封面：从 220px 死高改成 10:7 等比，随列宽自适应 ---------- */
  .recent-posts .recent-post-item-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 10 / 7 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }
  .recent-posts .recent-post-item-image .el-image,
  .recent-posts .recent-post-item-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  /* 站内封面多为 960×1280 竖版宣传图，顶部才是大标题，故对齐顶部裁切 */
  .recent-posts .recent-post-item-image .el-image__inner {
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* ---------- 4. 卡片正文：标题 → 分类胶囊 → 热度/点赞，去掉摘要与评论数 ---------- */
  .recent-posts .recent-post-item-post {
    height: auto !important;
    padding: 9px 10px 11px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .recent-posts .recent-post-item-post h3 {
    order: 1 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    min-height: calc(2 * 1.45em) !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  /* 第一段 .post-meta 是「发布于 2026」，只有年份、信息量为零，窄卡里直接省掉 */
  .recent-posts .recent-post-item-post > .post-meta:first-child {
    display: none !important;
  }
  /* 摘要在 175px 宽的卡里会变成 3 行碎字，与参考站一致：列表页不显示摘要 */
  .recent-posts .recent-post-item-post .recent-post-desc {
    display: none !important;
  }

  .recent-posts .recent-post-item-post .sort-label {
    /* 主题把分类胶囊 absolute 钉在卡片底部，双列卡里会跑到几十像素之外，改回普通流 */
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    order: 2 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  .recent-posts .recent-post-item-post .sort-label > span {
    font-size: 11px !important;
    line-height: 1.45 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    background: rgba(81, 196, 146, .13) !important;
    color: #2f9e6e !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    margin-right: 0 !important;
  }
  /* 卡片窄，只保留「分类」这一个胶囊，第二个（标签）隐去，避免换行把卡撑高 */
  .recent-posts .recent-post-item-post .sort-label > span:not(:first-child) {
    display: none !important;
  }
  .recent-posts .recent-post-item-post .sort-label svg {
    width: 11px !important;
    height: 11px !important;
    vertical-align: -1px !important;
  }

  /* 第二段 .post-meta（热度 / 评论 / 点赞）：挪到卡片最底部，整行左右对齐 */
  .recent-posts .recent-post-item-post > .post-meta:not(:first-child) {
    order: 3 !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #98a2b3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  .recent-posts .recent-post-item-post > .post-meta:not(:first-child) span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
  }
  /* 三枚统计挤不下 157px 的内容宽，只留「热度 + 点赞」，评论数在详情页仍可见 */
  .recent-posts .recent-post-item-post > .post-meta:not(:first-child) span:nth-child(2) {
    display: none !important;
  }
  .recent-posts .recent-post-item-post > .post-meta:not(:first-child) svg {
    width: 12px !important;
    height: 12px !important;
    vertical-align: -2px !important;
  }

  /* ---------- 5. 分区标题（盘神资源分享 / 盘神活动分享）--------- */
  .recent-posts .sort-article-first {
    margin: 6px 0 10px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  .recent-posts > div:not(:last-child) {
    margin-bottom: 22px !important;
  }

  /* ---------- 6. 搜索结果提示条（由 js/search-fix.js 注入）--------- */
  .sf-bar {
    margin: 0 0 12px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    background: rgba(81, 196, 146, .10) !important;
    border: 1px solid rgba(81, 196, 146, .28) !important;
    color: #2f9e6e !important;
    word-break: break-word !important;
  }
  .sf-bar.is-empty {
    background: rgba(247, 178, 30, .12) !important;
    border-color: rgba(247, 178, 30, .35) !important;
    color: #a3710b !important;
  }

  /* ---------- 7. 搜索框：手机上加大点按目标，并把「清空」按钮塞进同一行 ---------- */
  .ais-SearchBox-input {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }
}