/* ====================================================================
   components/card.css — 列表页卡片与分页【公共基类】
   ====================================================================

   来源：list_common.css（原 list_product.css）与 list_news.css 中
   「逐字符相同」的部分，抽为一份，消除审计清单 E2 点名的重复。

   抽取纪律（改动前请先读）：
   1. 只抽两文件完全一致的声明。任何数值差异一律留在页面文件里并写明原因，
      不得擅自统一 —— 依据《网站模板工作日期0828.md:740》：
      "同名不同值含真正的视觉设计差异，不宜擅自统一"。
   2. 本文件必须在页面 CSS【之前】加载：页面侧 delta 靠源码顺序胜出。
   3. 选择器组取两侧成员的并集。页面上不存在的类名不会命中任何元素，
      因此合并成员不改变任何页面的渲染。
   4. 只服务列表页三件套（lists_common / lists_news / lists_tags）。
      首页栏目入口卡是另一个组件（index.css 的 .entry-card），不在此列。
   5. 【层叠陷阱】两文件 !important 用法不同：list_news 的组 hover 阴影带
      !important，list_common 的不带。若 level1 的 inset 阴影抽到本文件
      （提前加载），而组规则仍命中 level1，同权重同 important 时赢家会翻转，
      新闻页 level1 卡悬停阴影就从 inset 粗边变成普通投影。
      因此 list_news.css 已把组 hover 按类拆开，level1 的阴影只由本文件提供。
      改这里之前务必复测。
   ==================================================================== */

/* ---------- 卡片基类（三种卡 + 新闻条目卡共用） ---------- */
/* 基类：边框、过渡，以及【已统一】的静置阴影。
   原漂移（列表页 0 2 8px / 新闻页 0 2 10px）已于 2026-09-22 裁定统一为 8px，
   与首页 .entry-card 一致；新闻页 .news-item 因此从 10px 收到 8px（2px 模糊差）。
   .level2-card / .item-card 在各自组件规则里覆写为更实的 0 4px 14px，
   那是有意的层级差，不是漂移。 */
.level1-card, .level2-card, .item-card, .news-item {
    border: 1px solid #d1d9e6 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    transition: all 0.3s ease;
}

/* 两文件一致的 hover 部分只有边框色。
   transform 与 box-shadow 两版均不同值（上浮 -4/-5、两种阴影），留在各自文件。 */
.level1-card:hover, .level2-card:hover, .item-card:hover, .news-item:hover {
    border-color: #0d6efd !important;
}

/* ---------- 一级目录大卡片（一行一个，图文同行） ---------- */
/* 以下 6 条两文件逐字符相同（list_news 版另有 margin-bottom:24px，留在该文件）。
   常态边框 transparent 是把"边框"整个留给 hover，两态差异最大化；
   !important 用于压过上方基类的 #d1d9e6 !important。 */
.level1-card {
    background: #f2f2f2;
    border: 1px solid transparent !important;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

/* 【悬停强化】底色加深 + 边框显形，两版同值。
   inset 0 0 0 1px 与 1px 边框叠成"视觉 2px"粗边；改 border-width 会抖 1px，故用阴影模拟。
   上浮值两版不同（list_common -4px / list_news -5px），留在页面文件。
   必须带 !important：压过基类的 #d1d9e6 !important。 */
.level1-card:hover {
    background: #dce7f5;
    border-color: #0d6efd !important;
    box-shadow: inset 0 0 0 1px #0d6efd, 0 10px 24px rgba(13, 110, 253, 0.25) !important;
    /* 【漂移已统一 2026-09-22】上浮原为列表页 -4px / 新闻页 -5px，
       取 -4px 收进本基类：家族内 .entry-card 与 .item-card 都是 -4px，
       -5px 是全族唯一的孤立值且无任何理由记录。 */
    transform: translateY(-4px);
}

/* 【漂移已统一 2026-09-22】min-height 原为列表页 clamp(170,18vw,220) /
   新闻页 clamp(180,20vw,220)，统一取 180/20vw 并上收到本基类。
   取较大值的理由：本属性只在新闻页真正承重——那侧 img 是
   height:100% + object-fit:cover，盒高由 min-height 决定；
   列表页侧 img 是 height:auto，min-height 只是地板，抬高地板最多
   给极短的图多出 10px 留白。两值在 ≥1222px 视口下同被 220px 夹住，
   差异仅存在于 850–1222px 这一段。 */
.level1-img {
    min-height: clamp(180px, 20vw, 220px);
    width: 35%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #dee4ef !important;
}

/* 【漂移已统一 2026-09-22】padding 原为列表页 clamp(14,2vw,24) /
   新闻页 clamp(16,2.2vw,30)，统一取 16/2.2vw/30。
   这是三项里唯一在桌面端也看得见的差异：1600px 下两版分别被夹到
   24px 与 30px，差 6px。.level1-card 是全族最宽的卡（整行一个），
   文本区约占 950px，取更宽松的一档。 */
.level1-info {
    padding: clamp(16px, 2.2vw, 30px);
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.level1-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 15px;
    transition: color 0.3s;
}

/* 必须带 !important：模板里 h3 带 Bootstrap 的 .text-dark（color !important），
   不加则标题变蓝从不生效。两版逐字符相同。 */
.level1-card:hover .level1-info h3 {
    color: #0d6efd !important;
}

.level1-info p {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ---------- 条目卡（lists_common 的产品 / 应用 / 案例三栏卡） ---------- */
/* 该族只有 list_common.css 一处【活】定义：list_news.css 里的同名副本无宿主
   （lists_news 与 lists_tags 都不渲染 .item-card），已随本次合并删除。
   两版曾有差异的 5 项（aspect-ratio 1/1 对 16/12、padding 1rem 对 10px、
   border-bottom 色、title 的 padding 与 height 对 min-height、title 底色）
   随死副本一起消失。若将来新闻页要启用这张卡，必须先裁定采用哪一版，
   不要默默把下面这段复制过去 —— 那正是本次要消除的漂移来源。 */
.item-card {
    background: #ffffff;
    /* 8px → 12px：与 .level1-card / .level2-card 一致，列表页三档卡统一 12px。
       （16px 是首页 .entry-card 的圆角，不在这组里。） */
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    /* 【视觉加深】边框与 transition 不在此重复——本文件顶部的公共基类
       （.level1-card, .level2-card, .item-card, .news-item）已带 !important 提供。
       这里只补本卡真正缺的东西：一档更实的静置阴影。
       原先静态只有 list_common.css 那条 0 2 8px 普通灰投影，
       悬停又没有 level1 的 inset 蓝环，两态差异偏弱。 */
    box-shadow: 0 4px 14px rgba(10, 37, 64, 0.16);
}

/* 悬停：inset 蓝环叠成视觉 2px 粗边 + 阴影放大 + 上浮 4px，
   与 .level1-card 同一套两态语言。border-color 由顶部基类的 !important 提供。 */
.item-card:hover {
    box-shadow: inset 0 0 0 1px #0d6efd, 0 12px 28px rgba(13, 110, 253, 0.25);
    transform: translateY(-4px);
}

.item-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* #f7fafc 与白底只差不到 2%，等于没有分隔；提到 #e2e8f0，与 .level1-img 同色。 */
    border-bottom: 1px solid #e2e8f0;
}

.item-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: 0.5s;
}

.item-card:hover .item-card-img img {
    transform: scale(1.08);
}

/* min-height 而非 height：短标题等高、长标题可完整显示两行不被裁切。
   模板侧曾有的内联 style="height:3.5rem" 已删（见 lists_common.htm A1 注释）。
   注：本条无 transition（悬停变蓝是瞬时切换）；list_news 的死副本里曾有
   transition:color .3s 而无 border-top —— 两份不要互相"取平均"。 */
.item-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    /* 【视觉加深】#2d3748 → #0a2540（--primary-color），与 .level1-info h3 同色。 */
    color: #0a2540;
    padding: 10px;
    text-align: center;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3rem;
    /* 标题条与图片区真正分层：#f8f9fa→#f1f5f9、#edf2f7→#dfe5ee。 */
    background-color: #f1f5f9;
    border-top: 1px solid #dfe5ee;
}

.item-card:hover .item-card-title {
    color: #0d6efd;
}

/* ---------- 分页 ---------- */
/* 只抽两版逐字符相同的 4 条。
   .pagination a / span 的 padding 与 border-radius 两版不同值
   （列表页 8px 16px + 4px / 新闻页 10px 18px + 6px），留在 list_news.css；
   .pagination .disabled 仅 list_common.css 曾有、而 lists_common.htm 无分页
   markup（全站只有 lists_news.htm:96 与 lists_tags.htm:75 有 {eyou:pagelist}），
   属死规则，已删除未搬。将来若给 lists_common 加分页，需到此处补齐这两项。 */
.pagination-wrapper {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    gap: 5px;
    list-style: none;
    padding: 0;
}

.pagination a:hover {
    background-color: #e9ecef;
}

.pagination .active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}