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

   为什么需要这个文件：
     原站皮肤 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;
}

/* --------------------------------------------------------------------------
  6) 鼠标点击后不再显示黑色外框（保留键盘 Tab 的可见焦点）

  问题：原站皮肤 style.css 里没有任何 outline / :focus 规则（实测 0 条），
  浏览器于是用**默认焦点环**标记刚被点击的元素。分类标签是
  <a href="javascript:;">、轮播箭头是 <a class="left/right carousel-control">，
  点一下都会留下黑框。

  只靠 :focus-visible 不够：它依赖浏览器判定"这次该不该显示焦点"，
  各浏览器并不一致（有的鼠标点击后仍画框）。所以这里改成
  **输入方式判定**（见 wwwroot/js/focus-ring.js）：
    · 鼠标/触摸按下 → 给该元素加 .no-focus-ring，抑制焦点框；
    · 焦点变化 / 按 Tab → 立即撤销该标记，键盘导航照常有焦点框。

  抑制规则挂在 .js-focus-ready 下：脚本没加载时整条不生效，
  退回浏览器默认行为，保证**无 JS 环境键盘也能看到焦点**。

  注意：**不含表单控件**（input/textarea/select）——聚焦边框是必要反馈。
  -------------------------------------------------------------------------- */

.js-focus-ready .no-focus-ring,
.js-focus-ready .no-focus-ring:focus,
.js-focus-ready .no-focus-ring:focus-visible {
    outline: none !important;
}

/* 键盘导航时的焦点样式（比浏览器默认的黑色 1px 更清楚，也不刺眼） */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #165aa5;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
  7) 内页横幅按图片比例定高，消除下方空白

  问题：原模板 .banner-box 用的是**固定像素高** —— 800px，并按断点降到
  650 / 490 / 320 / 190 / 160。这几个数字是照**首页**轮播图的
  1920×800（2.4:1）量身定的。

  而后台「内容页顶部横幅」上传的图是 1920×600（3.2:1）。两者比例不一致，
  容器就比图片高：视口 1920px 时图片只渲染 600px 高，容器却有 800px，
  banner 下面空出 200px。到 2560px 才刚好校齐
  （2560 ÷ 3.2 = 800 = 容器高）—— 这正是"只有 2560×1440 正常"的原因。

  修法：给内页 banner 单独加类和比例，让容器高度**跟着图片比例走**，
  任何视口宽度都正好贴合，不再依赖那组为别的图片定死的高度。

  为什么用 aspect-ratio 而不是再写一组断点高度：
  再定死一组数字，等于把"必须和某张图的比例一致"这个隐性前提又埋回去，
  管理员下次换一张别的比例的图，空白会再次出现。用比例就一次解决。

  object-fit: cover 是兜底 —— 万一填了比例不同的图片地址，
  图片按容器裁切填满，而不是拉伸变形。旧浏览器不支持该属性时会忽略它，
  退回"按宽度缩放"的原行为，不会更差。
  -------------------------------------------------------------------------- */
.banner-box.banner-box-inner {
    height: auto;
    aspect-ratio: 1920 / 600;
}

/* 高度改由比例决定后，让轮播与每一项撑满容器 */
.banner-box.banner-box-inner .carousel,
.banner-box.banner-box-inner .carousel-inner,
.banner-box.banner-box-inner .item {
    height: 100%;
}

.banner-box.banner-box-inner img.first-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
  8) 让 banner 图片始终填满容器

  【首页的成因】首页轮播图片比例本身就不统一（实测线上）：

      1920×800 → 2.4:1   ：banner01、banner02
      1920×600 → 3.2:1   ：banner03、banner04

  .banner-box 的固定高度（800 并按断点降到 650/490/320/190/160）是照
  2.4:1 定的。3.2:1 那两张放进来"矮一截"，轮播切到它们时下面空一条。

  【关键】只在 img 上写 object-fit: cover 是**没用的**：
  实测 .banner-box 高 800px，而里面的 .banner（position: fixed）只有 600px，
  .carousel / .carousel-inner / .item 跟着塌到 600px ——
  容器高度没定，cover 就没有"要填满的框"，图片只是按宽度缩放到自然高。

  所以必须先把高度链打通：.banner → .carousel → .carousel-inner → .item → a
  逐层撑满，图片才有确定的框可以填。

  注意 .banner 用的是 **height: inherit 而不是 100%**：
  它是 position: fixed，百分比高度会按**视口**算（实测 100% 得到 900px 视口高，
  比 .banner-box 的 800px 还高，反而溢出）。inherit 才能拿到父级的 800px。
  -------------------------------------------------------------------------- */
.banner-box .banner {
    height: inherit;
}

.banner-box .carousel,
.banner-box .carousel-inner,
.banner-box .item {
    height: 100%;
}

.banner-box .item > a {
    display: block;
    height: 100%;
}

.banner-box img.first-slide {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}