@charset "utf-8";
/* ★★★★★ 版本戳：2026-10-05 14:55 · v4-绝对定位居中（无断点） ★★★★★
   上传后请访问下面这个地址确认版本号是否变化（必须强刷 Ctrl+F5）：
     https://www.hutlon.com/themes/Home/default/Public/css/article-fix.css
   看到 v4-绝对定位居中 = 新版已生效
   看到 v3-回退65%横版 或 max-height:300px/260px/200px = 传错了或没传成功
   -------------------------------------------------------------------- */
/* ==========================================================================
   article-fix.css —— 文章页显示样式修正（独立追加文件，不改动任何原有 CSS）
   引入位置：Public_base.html 的 </head> 前最后一行（优先级最高，可覆盖前面规则）

   解决问题：
     1. 汇泰龙小课堂列表页缩略图被强制拉伸变形
        → 改为「原比例完整显示 + 容器留白（左右或上下白边）」
     2. 详情页正文竖图占满页面 → 限制最大高度 60vh
     3. 正文字间距过紧 → 统一段距与标题呼吸感

   ★ 作用范围已刻意收窄到 .news-list（仅 Article_list.html 使用），
     避免影响共用 .imgPD 的产品列表 / 案例列表 / 图片列表 / 视频列表 / 搜索页。
     若后续确认产品列表也需同样处理，再单独追加对应选择器。

   回滚方式：从 Public_base.html 移除本文件的 link 一行即可，
             不影响任何原有规则。
   ========================================================================== */

/* --------------------------------------------------------------------------
   一、文章列表页缩略图：保持原始横版比例 + 竖图左右留白

   ★ 2026-10-05 定稿说明（四次迭代，请勿再改容器比例）

   【站点原始设计，保留不动】
     layout.css:400  .news-list .pic { padding-top:65% }   → 横向 1.54:1
     这是设计师定下的版式，列表页三列卡片的图区本就是横版，保留。

   【原始 CSS 冲突链：变形与「高度异常」的根源】
     1. common.css:51  div .imgPD                   { position:relative; padding-top:100% }
     2. common.css:52  div .imgPD img               { position:absolute; width:100%; height:100% }
     3. common.css:70  .effect-one .effect-one-img  { position:relative; width:100% }
     4. layout.css:400 .news-list .pic             { padding-top:65% }
     ② 把图片拉满容器 → 变形（压扁）。
     ③ 干扰：同样是 (0,2,0) 特异性且排在②之后，会把 position 改回 relative。

   【本版解法：absolute 四边贴合 + margin:auto 居中】
     保留②的 absolute（这是让百分比 max-height 能生效的关键），
     但不再用它拉伸图片，而是让它当「居中定位」用：
         position:absolute; top/right/bottom/left:0; margin:auto;
         max-width:100%; max-height:100%; width:auto; height:auto;
     → 图片在容器内等比内缩并居中，竖图左右留白、横图上下留白，永不变形。

   ★★ 为什么这次能彻底不用断点（v3 的真正失败原因）
     v3 把 `position` 改成 `static`，图片脱离绝对定位后，
     `max-height:100%` 失去百分比基准（padding-top 撑高 + static 定位 → 无基准），
     于是只能靠 6 个断点的固定像素兜底。而断点起点是 `min-width:1921px`，
     **1920 整宽屏正好落不进任何一档** → 没有 max-height 约束 →
     980px 宽的竖图被 max-width 压到 463 宽、等比放大到 926 高，
     而容器只有 301 高 → overflow:hidden 把上下裁掉 → 「高度显示不正常」。
     本版保留 absolute 后，包含块就是 .pic（有确定高度），
     `max-height:100%` 直接生效，**1920/1440/1024/760 全部自动正确，零断点**。

   ★ 教训（务必记住）
     1. 依赖 `max-height:100%` 时，**不能把子元素从 absolute 改成 static**，
        否则百分比失去基准，只能用像素断点兜底；而断点总有缝隙。
     2. 用像素断点兜底容器百分比高度时，**断点必须覆盖 0~∞ 全区间**，
        别写成 `min-width:1921px` 这种漏掉主流宽度的区间。
     3. 容器比例与图片约束必须同源；改一边就要同步另一边。
   -------------------------------------------------------------------------- */
.news-list .pic {
    position: relative;                  /* absolute 图片的包含块（common.css:51 已有，此处加固） */
    background-color: #ffffff;          /* 留白区域为白底 */
    overflow: hidden;
    min-height: 0;
    /* 不再使用 flex 居中：图片改用 absolute + margin:auto 居中，
       避免 flex 与 absolute 混用时产生额外约束。
       padding-top 沿用 layout.css:400 的 65%，此处不覆盖，保持原始横版设计。 */
}

.news-list .pic img,
.news-list .pic .effect-one-img {
    /* ★ 关键：仍用 absolute，但四边贴合 + margin:auto 实现居中。
         absolute 元素的包含块就是 .pic（position:relative），
         而 .pic 的高度由 padding-top:65% 确定 → 百分比 max-height 能正常解析，
         不存在「padding-top 撑高时 max-height:100% 失效」的老问题。
         这样就不需要任何断点兜底，1920/1440/1024 全部自动正确。 */
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;                        /* 四边贴合 + auto 外边距 = 水平垂直居中 */
    display: block;
    max-width: 100% !important;         /* 横图横向不出血 */
    max-height: 100% !important;        /* 竖图纵向不出血，且随容器自动缩放 */
    width: auto !important;              /* 关键：压过 common.css:70 的 width:100% */
    height: auto !important;             /* 关键：压过 common.css:52 的 height:100% */
    object-fit: contain;                /* 兜底：按比例内缩，绝不裁切 */
    opacity: 1;
    transition: transform .4s ease-in-out;
}

/* 无图占位：无缩略图的文章不留空洞（配合模板中的 no-thumb 类） */
.news-list .pic.no-thumb {
    background-color: #f5f5f5;
}

/* hover 放大时避免被 overflow:hidden 裁切（common.css:71 是 scale(1.1)） */
@media screen and (hover: hover) {
    .news-list .pic img,
    .news-list .pic .effect-one-img { will-change: transform; }
}

/* --------------------------------------------------------------------------
   二、详情页正文图片：限制高度 + 等比例
   -------------------------------------------------------------------------- */
.content.wor img,
.detailEs .content img {
    max-width: 100% !important;         /* 不超出正文栏宽 */
    max-height: 60vh !important;        /* 竖图最高占视口 60%，用户要求的比例 */
    width: auto !important;             /* 保持原始比例，禁止拉伸 */
    height: auto !important;
    display: block;
    margin: 18px auto !important;       /* 居中 + 上下留白 */
    border-radius: 2px;
    box-sizing: border-box;
}

/* 图片过窄时（图标类）不放大，保持原尺寸 */
.content.wor img[width],
.content.wor img[height] {
    max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   三、正文排版：段距 + 标题呼吸感
   注意：publish.php 已在正文内联写入行高与段距，此处仅兜底处理
        后台手工发布（未经 API）的文章，避免两种来源观感不一致。
   -------------------------------------------------------------------------- */
.content.wor > p,
.detailEs .content > p {
    line-height: 1.9;
    margin: 0 0 22px 0;
    color: #555;
    text-align: justify;
}

.content.wor > p:last-child,
.detailEs .content > p:last-child {
    margin-bottom: 0;
}

.content.wor h2,
.detailEs .content h2 {
    font-size: 22px;
    line-height: 1.5;
    margin: 34px 0 16px 0;
    padding-left: 12px;
    border-left: 4px solid #e60039;     /* 与站点主色一致 */
    font-weight: bold;
}

.content.wor h3,
.detailEs .content h3 {
    font-size: 19px;
    line-height: 1.5;
    margin: 28px 0 14px 0;
    font-weight: bold;
}

.content.wor h4,
.detailEs .content h4 {
    font-size: 17px;
    line-height: 1.5;
    margin: 24px 0 12px 0;
    font-weight: bold;
}

.content.wor ul,
.content.wor ol,
.detailEs .content ul,
.detailEs .content ol {
    margin: 0 0 22px 0;
    padding-left: 28px;
    line-height: 1.9;
}

.content.wor li,
.detailEs .content li {
    margin-bottom: 8px;
}

.content.wor blockquote,
.detailEs .content blockquote {
    margin: 0 0 22px 0;
    padding: 14px 18px;
    background: #fafafa;
    border-left: 4px solid #ddd;
    color: #777;
    line-height: 1.8;
}

.content.wor table,
.detailEs .content table {
    width: 100% !important;
    margin-bottom: 22px;
    border-collapse: collapse;
}

.content.wor table td,
.content.wor table th,
.detailEs .content table td,
.detailEs .content table th {
    border: 1px solid #eee;
    padding: 10px 12px;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   四、兼容 IE8（站点仍在用 IE8 兼容页，此处仅保证不崩、不变形）
   object-fit 在 IE8 不支持，但前面的 max-width/max-height + width/height:auto
   已能保证等比例，故无需额外 hack。
   -------------------------------------------------------------------------- */