/* ============================================================
   新闻详情-2 (news_detail_2)
   还原自 D:/desktop/新闻详情.html 的 .ly_news_detail_2 (data-visual-id=1488)。
   本文件只放"与配置无关"的骨架尺寸；颜色/字号由模板内联 <style> 按 data-module-id 落到实例上
   （本模块的 JS 只生成文章大纲、不重绘正文与卡片，所以不必走 CSS 变量那套）。
   左栏（分类 + 推荐新闻）刻意与 news_list_2.css 保持同一套尺寸与 DOM，两个页面观感一致。
   模块 CSS 自包含：模板里用 <link href="/sitebuilder/css/news_detail_2.css">，
   文件已登记进 SiteStaticPublishServiceImpl.CSS_FILES，否则发布态缺文件。
   ============================================================ */
.ly_news_detail_2 * { box-sizing: border-box; }
.ly_news_detail_2 a { text-decoration: none; color: inherit; }

.ly_news_detail_2 .wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

/* ---------- 左栏: 分类 + 推荐新闻 ---------- */
.ly_news_detail_2 .left_side { width: 20.83%; }
.ly_news_detail_2 .left_side .top_title {
    line-height: 56px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 20px;
    color: #333;
}
.ly_news_detail_2 .left_side ul.list { margin: 0; padding: 10px 0; list-style: none; }
.ly_news_detail_2 .left_side ul.list li { list-style: none; }
.ly_news_detail_2 .left_side ul.list li a {
    display: block;
    line-height: 40px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ly_news_detail_2 .left_side .category_empty { padding: 16px 0; font-size: 14px; color: #999; }

/* ---------- 推荐新闻(PC 在左栏, 移动端搬到正文底部) ----------
   标题条底色由实例配置(featuredTitleBgColor)决定, 所以这里必须给左右内边距, 否则文字贴色块边缘 */
.ly_news_detail_2 .relate_box { margin-top: 20px; }
.ly_news_detail_2 .relate_box .top_title {
    line-height: 56px;
    padding: 0 20px;
    font-size: 20px;
}
.ly_news_detail_2 .relate_box .pro_list { padding: 6px 20px; }
.ly_news_detail_2 .relate_box .related_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
}
.ly_news_detail_2 .relate_box .related_item .pic_box { flex: none; margin-right: 12px; width: 80px; }
.ly_news_detail_2 .relate_box .related_item .pic_box a {
    display: block;
    position: relative;
    padding-top: 100%;
    overflow: hidden;
}
.ly_news_detail_2 .relate_box .related_item .pic_box img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ly_news_detail_2 .relate_box .related_item .content { flex: 1; min-width: 0; }
.ly_news_detail_2 .relate_box .related_item .content .g_name {
    display: -webkit-box;
    overflow: hidden;
    line-height: 18px;
    font-size: 14px;
    color: #222;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ly_news_detail_2 .relate_box .related_item .content .g_number {
    margin-top: 10px;
    font-size: 12px;
    color: #666666;
}
/* PC 端不显示正文底部的推荐新闻(移动端媒体查询里放出) */
.ly_news_detail_2 .relate_box.list_bottom_box { display: none; width: 100%; }

/* ---------- 右栏 ---------- */
.ly_news_detail_2 .right_side { width: 71.9%; min-height: 300px; }
.ly_news_detail_2 .right_side.full { width: 100%; }
/* 新闻标题。参考站是 line-height:56px 的一行, 这里换成行高倍数 + 上下 padding:
   长标题折行时行距才正常(详情页标题经常两三行) */
.ly_news_detail_2 .right_side > .top_title {
    padding: 12px 0 16px;
    line-height: 1.4;
    border-bottom: 1px solid #e8e8e8;
}
.ly_news_detail_2 .right_side > .top_title h1 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
}
/* 移动端分类抽屉的开关条只在移动端出现 */
.ly_news_detail_2 .right_side .cate_top_title { display: none; }

/* 导语摘要与日期条: 颜色字号固定(没有对应配置项, 同参考站) */
.ly_news_detail_2 .right_side .bottom_brief {
    margin-top: 12px;
    line-height: 1.75;
    font-size: 16px;
    color: #5a5a5a;
}
.ly_news_detail_2 .right_side .right_news_info {
    margin-top: 12px;
    padding: 16px 0;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}
.ly_news_detail_2 .right_side .right_news_info span {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    color: #666666;
}
/* 日期(带日历图标) 与 浏览次数。图标是模板里的内联 SVG, 不引图标字体;
   fill 用 currentColor, 跟着 .right_news_info 的文字色走, 以后要配置颜色只改一处。 */
.ly_news_detail_2 .right_side .right_news_info .n_date {
    display: inline-flex;
    align-items: center;
}
.ly_news_detail_2 .right_side .right_news_info .n_icon {
    flex: none;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    fill: currentColor;
}
.ly_news_detail_2 .right_side .right_news_info .n_views {
    margin-left: 24px;
}

/* ---------- 文章大纲 ----------
   容器由模板输出, 目录树(.outline_list / .outline_item / .outline_sublist)由 news_detail_2.js
   扫正文的 h1~h6 生成(最多 3 级)。展开/收起全靠 .current: JS 只切 class, 显隐交给这里, 免得回写行内样式。
   箭头用 CSS 边框画(参考站用 iconfont, 我们不引图标字体)。 */
.ly_news_detail_2 .global_article_outline {
    margin-top: 20px;
    background-color: #f7f7f7;
}
.ly_news_detail_2 .global_article_outline .outline_title {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #e0e0e0;
    line-height: 24px;
    font-size: 17px;
    color: #000000;
    cursor: pointer;
}
.ly_news_detail_2 .global_article_outline .outline_title span { flex: 1; }
/* 目录标题左侧的列表图标(模板里的内联 SVG), 与右侧箭头一起把标题条撑成三段 */
.ly_news_detail_2 .global_article_outline .outline_title .outline_icon {
    flex: none;
    width: 17px;
    height: 17px;
    margin-right: 8px;
    fill: currentColor;
}
.ly_news_detail_2 .global_article_outline .outline_title::after {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}
.ly_news_detail_2 .global_article_outline .outline_title.current::after {
    transform: rotate(225deg) translateY(-2px);
}
/* 目录树默认收起, .outline_title.current 时展开(首屏展开由 outlineExpanded 配置决定) */
.ly_news_detail_2 .global_article_outline .outline_list { display: none; }
.ly_news_detail_2 .global_article_outline .outline_title.current + .outline_list { display: block; }
.ly_news_detail_2 .global_article_outline ul {
    margin: 0;
    padding: 10px 0;
    list-style: none;
}
.ly_news_detail_2 .global_article_outline li { list-style: none; }
.ly_news_detail_2 .global_article_outline .outline_item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    line-height: 20px;
    font-size: 14px;
    cursor: pointer;
}
.ly_news_detail_2 .global_article_outline .outline_item .outline_link { flex: 1; }
/* 有下级的条目右侧给一个 +/- , 点它展开下级 */
.ly_news_detail_2 .global_article_outline .outline_item.haschildren::after {
    content: '+';
    flex: none;
    width: 16px;
    text-align: center;
    font-size: 16px;
    line-height: 1;
}
.ly_news_detail_2 .global_article_outline .outline_item.haschildren.current::after { content: '-'; }
.ly_news_detail_2 .global_article_outline .outline_sublist { display: none; padding: 0; }
.ly_news_detail_2 .global_article_outline .outline_item.current + .outline_sublist { display: block; }
.ly_news_detail_2 .global_article_outline .level_2 .outline_item { padding-left: 32px; }
.ly_news_detail_2 .global_article_outline .level_3 .outline_item { padding-left: 48px; }

/* ---------- 正文富文本 ----------
   后台新闻正文是富文本, 直接 th:utext 出来; 这里给常见标签一套基线(同 product_description_1),
   不依赖后台过滤结果。颜色/字体走 .deco-content 继承全局设置, 本文件不重复配。 */
.ly_news_detail_2 .contents {
    margin-top: 30px;
    padding-bottom: 20px;
    line-height: 1.8;
    font-size: 16px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.ly_news_detail_2 .contents img { max-width: 100%; height: auto; }
.ly_news_detail_2 .contents video,
.ly_news_detail_2 .contents iframe { max-width: 100%; }
.ly_news_detail_2 .contents a { text-decoration: underline; }
.ly_news_detail_2 .contents table {
    max-width: 100%;
    border-collapse: collapse;
    /* 窄屏下表格整体横向滚动, 避免撑破容器 */
    display: block;
    overflow-x: auto;
}
.ly_news_detail_2 .contents th,
.ly_news_detail_2 .contents td {
    border: 1px solid #e5e5e5;
    padding: 6px 10px;
}
.ly_news_detail_2 .contents p { margin: 0 0 12px; }
.ly_news_detail_2 .contents ul,
.ly_news_detail_2 .contents ol { margin: 0 0 12px; padding-left: 24px; }
.ly_news_detail_2 .contents li { margin-bottom: 4px; }
.ly_news_detail_2 .contents h1,
.ly_news_detail_2 .contents h2,
.ly_news_detail_2 .contents h3,
.ly_news_detail_2 .contents h4,
.ly_news_detail_2 .contents h5,
.ly_news_detail_2 .contents h6 { margin: 16px 0 8px; font-weight: 600; }
.ly_news_detail_2 .contents h1 { font-size: 24px; }
.ly_news_detail_2 .contents h2 { font-size: 20px; }
.ly_news_detail_2 .contents h3 { font-size: 17px; }
.ly_news_detail_2 .contents h4 { font-size: 15px; }
.ly_news_detail_2 .contents h5,
.ly_news_detail_2 .contents h6 { font-size: 14px; }
.ly_news_detail_2 .contents blockquote {
    margin: 0 0 12px;
    padding: 4px 12px;
    border-left: 3px solid #e5e5e5;
    color: #888888;
}
/* 锚点滚动时不被吸顶导航压住 */
.ly_news_detail_2 .contents [id] { scroll-margin-top: 90px; }

/* 移动端单独正文: 模板只在 mobileContentEnabled == 1 且 mobileContent 非空时输出两个容器,
   这里默认隐藏移动容器, 1000px 内互换 —— 不用 JS 判断视口, 缩放窗口不会错位 */
.ly_news_detail_2 .contents.mobile_contents { display: none; }

/* ---------- 上一条 / 下一条 ----------
   照参考站还原: 上下两行, 每行是"底色标签 + 单行标题"的左右两块(标签定宽 85px, 标题吃掉剩下的宽度)。
   两块都用 float, 行尾靠 .clear 收口 —— 与参考站一致, 也避免 flex 下长标题把标签压窄。
   颜色字号固定: 没有对应配置项(同分享条)。 */
.ly_news_detail_2 .news_box { margin-top: 24px; }
.ly_news_detail_2 .news_box .item { margin-top: 30px; }
/* 只有一侧(首条/末条)时那一条就是第一行, 不留上边距 */
.ly_news_detail_2 .news_box .item:first-child { margin-top: 0; }
.ly_news_detail_2 .news_box .item .fl { float: left; }
.ly_news_detail_2 .news_box .item .clear { clear: both; }
.ly_news_detail_2 .news_box .item .icon {
    padding: 0 10px;
    width: 85px;
    line-height: 30px;
    background-color: #fecf00;
    color: #000000;
    font-size: 14px;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}
.ly_news_detail_2 .news_box .item .icon > a { color: #000000; text-decoration: none; }
/* 标题单行, 超出省略 —— 标题很长时不要把这块撑成一大段 */
.ly_news_detail_2 .news_box .item .title {
    width: calc(100% - 85px);
    padding-left: 12px;
    line-height: 30px;
    box-sizing: border-box;
    color: #222222;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.ly_news_detail_2 .news_box .item .title > a { color: #222222; text-decoration: none; }

/* ---------- 正文底部社媒分享条 ----------
   只有一排彩色图标: 不出"Share"小标题、也不加顶部分隔线(与产品详情页那条的区别就在这里)。
   出不出由全局配置 share 组决定, 模块级没有配置项, 所以颜色尺寸都是固定值。 */
.ly_news_detail_2 .share_toolbox {
    margin-top: 24px;
}
.ly_news_detail_2 .share_toolbox ul { margin: 0; padding: 0; list-style: none; font-size: 0; }
.ly_news_detail_2 .share_toolbox li { display: inline-block; margin-right: 16px; }
.ly_news_detail_2 .share_toolbox li:last-child { margin-right: 0; }
.ly_news_detail_2 .share_toolbox .share_s_btn {
    display: block;
    width: 26px;
    height: 26px;
    cursor: pointer;
    transition: transform .2s;
}
.ly_news_detail_2 .share_toolbox .share_s_btn:hover { transform: translateY(-3px); }
/* 图标常态彩色, 悬停转灰: 直接铺 social/color/ 下的品牌图, 灰度交给 filter —— 用 gray/ 那套
   svg 换背景要多加载一次图、切换还会闪, 而 grayscale 是同一张图上的滤镜 */
.ly_news_detail_2 .share_toolbox .share_s_btn i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--share-icon) no-repeat center / contain;
    transition: filter .2s;
}
.ly_news_detail_2 .share_toolbox .share_s_btn:hover i { filter: grayscale(1); }

/* ---------- 空态 ---------- */
.ly_news_detail_2 .detail_empty {
    padding: 24px 0;
    color: #999999;
    font-size: 14px;
}

/* ============================================================
   移动端
   ============================================================ */
@media screen and (max-width: 1000px) {
    /* 左栏收成分类开关条下方的抽屉, 由 .right_side .cate_top_title 触发 */
    .ly_news_detail_2 .left_side {
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
        z-index: 10001;
        width: 92%;
        border: 1px solid #484a4e;
    }
    .ly_news_detail_2 .left_side.show { display: block; }
    .ly_news_detail_2 .left_side .top_title { display: none; }
    .ly_news_detail_2 .left_side ul.list { padding: 0; height: 225px; overflow: auto; }
    .ly_news_detail_2 .left_side ul.list li a {
        padding: 0 15px;
        line-height: 45px;
        font-size: 14px;
    }
    /* 左栏推荐新闻在移动端隐藏, 改由正文底部的 list_bottom_box 显示 */
    .ly_news_detail_2 .left_side .relate_box { display: none; }
    .ly_news_detail_2 .relate_box.list_bottom_box { display: block; margin-top: 30px; }

    .ly_news_detail_2 .right_side,
    .ly_news_detail_2 .right_side.full { width: 100%; }
    .ly_news_detail_2 .right_side .cate_top_title {
        display: block;
        position: relative;
        margin-top: 8px;
        padding: 0 45px 0 0;
        height: 35px;
        line-height: 35px;
        border-bottom: 1px solid #f0f0f0;
        overflow: hidden;
        font-size: 16px;
        cursor: pointer;
    }
    .ly_news_detail_2 .right_side .cate_top_title i {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 14px;
        width: 16px;
        height: 16px;
        font-style: normal;
    }
    .ly_news_detail_2 .right_side .cate_top_title i::before,
    .ly_news_detail_2 .right_side .cate_top_title i::after {
        content: '';
        position: absolute;
        background-color: currentColor;
    }
    .ly_news_detail_2 .right_side .cate_top_title i::before { top: 7px; left: 2px; width: 12px; height: 2px; }
    .ly_news_detail_2 .right_side .cate_top_title i::after { top: 2px; left: 7px; width: 2px; height: 12px; }
    /* 抽屉展开时把 + 变成 - */
    .ly_news_detail_2 .right_side .cate_top_title i.cur::after { display: none; }

    .ly_news_detail_2 .right_side > .top_title { margin-top: 20px; }
    .ly_news_detail_2 .right_side .bottom_brief { margin-top: 20px; font-size: 14px; line-height: 1.6; }
    .ly_news_detail_2 .contents { margin-top: 20px; font-size: 14px; }
    .ly_news_detail_2 .contents.pc_contents { display: none; }
    .ly_news_detail_2 .contents.mobile_contents { display: block; }

    /* 上/下一条: 窄屏标签略宽一点, 标题不再限一行(手机上长标题折两三行比截断好读) */
    .ly_news_detail_2 .news_box .item { margin-top: 20px; }
    .ly_news_detail_2 .news_box .item .icon { width: 88px; }
    .ly_news_detail_2 .news_box .item .title {
        padding-left: 15px;
        width: calc(100% - 88px);
        line-height: 20px;
        -webkit-line-clamp: unset;
    }
    .ly_news_detail_2 .news_box .item .title a { font-size: 14px; }
}