/* ==========================================================================
   原站皮肤的补充规则（仅补齐原模板自身引用却未定义的样式）
   ==========================================================================

   为什么需要这个文件：
     原站皮肤 template/skin/css/style.css 里有几处“标记里用到、CSS 里却没定义”
     的类，以及一个并未随模板附带的占位图。若不在外部补齐，分类切换与缩略图
     排列就无法正常工作。这些规则**不改变原设计**，只是把原模板缺失的部分补上。

   为什么不直接改 style.css：
     style.css 由迁移工具从原站原样复制（见 Pauloq.Migrator），直接修改会在
     重新导入时被覆盖。因此补充规则独立成本文件，原站皮肤保持一字未改。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) 分类切换的显示/隐藏
   原站首页用 displayPro、内页用 displayN 控制非当前分类的隐藏，
   但 style.css 里没有这两条规则。
   -------------------------------------------------------------------------- */
.displayPro { display: none !important; }
.displayN   { display: none !important; }

/* --------------------------------------------------------------------------
   2) 分类切换标签的选中态
   原站首页标签用 subTitleActive、内页标签用 .on。
   选中时为黑底白字；用 !important 保证文字一定为白色（不被链接色覆盖）。
   -------------------------------------------------------------------------- */
.subTitleActive,
.index-subtitle a.on,
.index-subtitle a.subTitleActive {
    border: 1px solid #000 !important;
    background: #000 !important;
    color: #FFF !important;
}

.subTitleActive:hover,
.index-subtitle a.on:hover,
.index-subtitle a.subTitleActive:hover {
    color: #FFF !important;
}

/* --------------------------------------------------------------------------
   5) 列表页辅助样式
   注意：日期块 .list-date 的排版（width/float/字号）**原站 style.css 已经定义**
   （第 318-320 行），这里绝对不能再加 clear/overflow，否则会覆盖 float 导致
   日期块与标题重叠。此文件只补原站确实缺失的部分。
   -------------------------------------------------------------------------- */

/* 列表页标题区与分页间距 */
.section2 .list-container {
    margin-top: 10px;
}

/* 分页选中态 */
.pagination > .active > a,
.pagination > .active > span {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* 右侧栏（原站新闻页为 col-md-8 正文 + col-md-4 侧栏） */
.content-right-list h3 {
    font-size: 18px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
}

.content-right-list h3 small {
    color: #a1a1a1;
    font-size: 12px;
}

.content-right-list ol {
    padding-left: 18px;
}

.content-right-list ol li {
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sub_menu .breadcrumb li a.on {
    border: 1px solid #000 !important;
    background: #000 !important;
    color: #FFF !important;
}

/* --------------------------------------------------------------------------
   3) 案例项目 / 产品 缩略图统一比例
   原站轮播项由 style.css 的 "#owl-demo3 .owl-item { height:256px }" 约束高度；
   改成普通栅格后没有这层约束，尺寸不一的原图会把栅格撑得参差不齐，所以补规则。
   · 案例项目：沿用原站高度 256px
   · 产品缩略图：统一为 16:9（首页产品中心、/c/product 两处共用这套标记）
   注意：owl 轮播会把 .item 重新挂到 .owl-item 之下，故用后代选择器。
   -------------------------------------------------------------------------- */
.section2 .chanpin .item .s2-img,
.section2 .chanpin .item .s2-img.img-auto {
    height: 256px;
    overflow: hidden;
}

.section2 .chanpin .item .s2-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 产品缩略图：固定 16:9 比例（图片按 cover 裁切填满，不变形）。
   首页产品中心与 /c/product 列表共用 .row.chanpin.product-list 这套标记。 */
.section2 .chanpin.product-list .item .s2-img,
.section2 .chanpin.product-list .item .s2-img.img-auto {
    height: auto;
    aspect-ratio: 16 / 9;
}

/* 内页列表的栅格间距（原站列表页同样是 row chanpin + col-sm-3） */
.section2 .chanpin > [class*="col-"] {
    margin-bottom: 20px;
}