/* ============================================================================
   行业资讯栏目列表页 · 排版优化样式 V2
   站点：www.hzvolt.com/news
   日期：2026-11-04
   用法：独立文件 assets/cms/css/hz-news-list.css，仅在 list_news.html 引入
        （不放 extend.css：.news-list 类被案例/问答/技术文章列表共用，
         放全局会连带改掉那几页）
   范围：选择器全部带 .news-list 前缀，不影响 .tuzhi-list（图纸列表）等其他栏目
   前提：顶部大图、导航、面包屑、产品推荐区均未改动

   与 V1 的差别：
   - 列表整体放进浅灰青底色版块，白卡从背景中浮起来
   - 缩略图左上角加 01、02… 序号角标（CSS 计数器生成，模板不用改）
   - 日期改为"青色短横线 + 日期"的引导样式，去掉横贯分隔线
   - 卡片悬停轻微上浮（2px）+ 加深投影
   - 分页按钮带投影的实心当前页
   注：序号角标如不需要，删掉第 4 节的 ::after 规则即可
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. 版块：浅灰青底 + 圆角面板，列表从页面里"沉"出一个阅读区
   --------------------------------------------------------------------------- */
.news-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    align-content: start;
    counter-reset: hznews;
    background: #f1f6f7;
    border: 1px solid #e2eaee;
    border-radius: 14px;
    padding: 22px;
}

/* ---------------------------------------------------------------------------
   2. 卡片：白底 + 极浅投影，悬停上浮 2px
   --------------------------------------------------------------------------- */
.news-list .items {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 16px;
    padding-bottom: 16px;
    border: 1px solid #eef2f5;
    border-bottom: 1px solid #eef2f5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .05);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.news-list .items:hover {
    transform: translateY(-2px);
    border-color: #c5e2e4;
    box-shadow: 0 10px 24px rgba(0, 105, 103, .10);
}

/* ---------------------------------------------------------------------------
   3. 缩略图：188px 宽（4:3 → 141px 高），圆角 + 悬停微放大
   --------------------------------------------------------------------------- */
.news-list .items .pic {
    position: relative;
    width: 188px;
    flex: 0 0 188px;
    margin-right: 16px;
    border-radius: 8px;
    background: #edf2f5;
}

.news-list .items .pic > a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.news-list .items .pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .45s ease;
}

.news-list .items:hover .pic img {
    transform: scale(1.06);
}

/* ---------------------------------------------------------------------------
   3b. 图片一致性补丁（2026-11-04，针对 08 号竖版图）
   10 张图的盒子实测都是 188×150，并不存在尺寸差异；观感不一致来自源图比例：
   08 号是 1440×1920 竖版，其余都是横版，cover 到横框会裁掉约 40% 高度，
   柜体被放大、上下切断，看起来"比别的图大一圈"。

   a) 给每张缩略图压一道极细内描边，浅色柜体图不会融进白卡片，边界统一
   b) 竖版原图把裁切焦点上移到仪表区，缓解主体被放大裁断（仅兜底）
   c) 根治做法：后台把 08 号换成 4:3 横版图（见 08-横版替换图.jpg）。
      换图后 URL 里的文件名会变，下面第 2 条规则自动失效，不用回来删代码
   --------------------------------------------------------------------------- */
.news-list .items .pic > a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(16, 42, 67, .07);
    pointer-events: none;
}

.news-list .items .pic img[src*="e4504c9b"] {
    object-position: center 32%;
}

/* ---------------------------------------------------------------------------
   4. 序号角标：CSS 计数器生成 01、02…，压在缩略图左上角
   不需要的话整段删除即可
   --------------------------------------------------------------------------- */
.news-list .items .pic::after {
    counter-increment: hznews;
    content: counter(hznews, decimal-leading-zero);
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 2px 9px;
    background: rgba(0, 105, 103, .82);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 1px;
    font-family: Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------------------------
   5. 文字区：纵向弹性布局，日期自动贴卡片底
   --------------------------------------------------------------------------- */
.news-list .items .text-box {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   6. 标题：17px / 600，最多两行，悬停变青
   --------------------------------------------------------------------------- */
.news-list .items .text-box h2,
.news-list .items .text-box h2.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;
    color: #182430;
    margin: 0 0 10px;
    /* 两行标题按语义均分，避免第二行只剩一个字 */
    text-wrap: balance;
}

.news-list .items .text-box h2 a {
    color: #182430;
    transition: color .18s ease;
}

.news-list .items:hover .text-box h2 a,
.news-list .items .text-box h2 a:hover {
    color: #006967;
}

/* ---------------------------------------------------------------------------
   7. 摘要：13.5px / 1.8，两行截断
   --------------------------------------------------------------------------- */
.news-list .items .text-box .desc-size {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.8;
    color: #7c8894;
    margin: 0 0 12px;
}

/* ---------------------------------------------------------------------------
   8. 日期：青色短横线 + 浅灰日期，贴卡片底、左对齐
   --------------------------------------------------------------------------- */
.news-list .items .text-box .text_r {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 0;
    border-top: none;
    text-align: left;
    font-size: 12.5px;
    color: #94a1ad;
    letter-spacing: .5px;
}

.news-list .items .text-box .text_r::before {
    content: "";
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: #006967;
    opacity: .75;
}

/* ---------------------------------------------------------------------------
   9. 分页：整行跨两栏居中，方形圆角按钮，当前页实心带投影
   --------------------------------------------------------------------------- */
.news-list .pagination {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 26px 0 2px;
    list-style: none;
}

.news-list .pagination li {
    margin: 0;
}

.news-list .pagination a,
.news-list .pagination span {
    display: block;
    min-width: 38px;
    height: 38px;
    line-height: 36px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid #e3eaef;
    border-radius: 8px;
    background: #fff;
    color: #5a6673;
    font-size: 14px;
    text-align: center;
    transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.news-list .pagination a:hover {
    border-color: #006967;
    color: #006967;
    box-shadow: 0 3px 8px rgba(0, 105, 103, .12);
}

.news-list .pagination li.active span {
    background: #006967;
    border-color: #006967;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 105, 103, .28);
}

.news-list .pagination li.disabled span {
    background: #f1f5f7;
    border-color: #edf1f4;
    color: #c4cdd6;
}

/* 上下页箭头去框 */
.news-list .pagination li:first-child a,
.news-list .pagination li:first-child span,
.news-list .pagination li:last-child a,
.news-list .pagination li:last-child span {
    border-color: transparent;
    background: transparent;
    color: #5a6673;
    font-size: 15px;
    box-shadow: none;
}

.news-list .pagination li:first-child a:hover,
.news-list .pagination li:last-child a:hover {
    color: #006967;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   10. 响应式：≤1024 单栏，≤640 收窄
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .news-list {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
        border-radius: 12px;
    }

    .news-list .items {
        padding: 14px;
        padding-bottom: 14px;
    }
}

@media (max-width: 640px) {
    .news-list {
        gap: 10px;
        padding: 12px;
    }

    .news-list .items {
        padding: 12px;
        padding-bottom: 12px;
    }

    .news-list .items .pic {
        width: 120px;
        flex: 0 0 120px;
        margin-right: 12px;
    }

    .news-list .items .text-box h2,
    .news-list .items .text-box h2.ellipsis {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .news-list .items .text-box .desc-size {
        font-size: 12.5px;
        line-height: 1.7;
        margin-bottom: 8px;
    }

    .news-list .pagination a,
    .news-list .pagination span {
        min-width: 34px;
        height: 34px;
        line-height: 32px;
        padding: 0 9px;
        font-size: 13px;
    }
}