/* ==========================================================
 * 煜通百泰 新闻列表页样式 news.css
 * 包含：新闻卡片、分页、分类高亮适配
 * 依赖：base.css（提供主题变量、分类树、弹窗等公共样式）
 * ========================================================== */

/* ==================== Banner（复用 pro-banner 结构，补充 header 偏移） ==================== */
.pro-banner { margin-top: var(--header-height); }
@media (max-width: 1199.98px) {
    .pro-banner { margin-top: 0; }
}

/* ==================== 新闻列表主体 ==================== */
.news-main{
    background: var(--color-bg);
}
.news-main-row {
    display: flex;
    gap: 6rem;                          /* 96px */
    align-items: flex-start;
}
/* 左侧分类树（样式对齐静态 list.news.html） */
.news-cat {
    width: 18.75rem;
    flex-shrink: 0;
    position: sticky;
    top: 2rem;
}
.news-cat .cat-item,
.filter-modal .cat-item {
    margin-bottom: 0;
}
/* a 标签仅去掉下划线/默认链接色，块级样式沿用 base 的 .cat-l1 / .cat-l1-all */
.news-cat a.cat-l1,
.news-cat a.cat-l1-all,
.filter-modal a.cat-l1,
.filter-modal a.cat-l1-all {
    text-decoration: none;
}
.news-cat a.cat-l1-all,
.filter-modal a.cat-l1-all {
    color: var(--color-white);
}
.news-cat a.cat-l1,
.filter-modal a.cat-l1 {
    background: #7892AC;
    color: var(--color-white);
}
.news-cat a.cat-l1:hover,
.filter-modal a.cat-l1:hover {
    background: var(--color-accent);
    color: var(--color-white);
}
.news-cat .cat-item.active a.cat-l1,
.filter-modal .cat-item.active a.cat-l1 {
    background: var(--color-accent);
    color: var(--color-white);
}

/* 右侧列表区 */
.news-list-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;                          /* 32px */
}

/* 标题栏已复用 .product-list-header / .product-list-title */
.news-list-title-text {
    font-size: 2rem;
    color: var(--color-text);
    margin: 0;
}
.news-list-wrap .product-search {
    flex-shrink: 0;
}

/* 搜索结果页：Banner 内搜索框 */
.pro-banner-search {
    display: flex;
    width: min(28rem, 100%);
    margin-top: 1rem;
    border-color: rgba(255, 255, 255, 0.55);
    background: var(--color-white);
}
.pro-banner-search .product-search-input {
    color: var(--color-text);
}
.pro-banner-search .search-submit,
.pro-banner-search .voice-btn {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
}
@media (max-width: 767.98px) {
    .pro-banner-search {
        display: flex;
        width: 100%;
        max-width: 22rem;
    }
}

/* ==================== 新闻卡片网格 ==================== */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;                          /* 48px */
}
/* 新闻卡片 */
.news-card {
    background: var(--color-white);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}
.news-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.5rem 1.5rem rgba(18, 38, 79, 0.12);
}
/* 新闻图片（3:2 比例） */
.news-card-pic {
    width: 100%;
    overflow: hidden;
}
.news-card-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.news-card:hover .news-card-pic img { transform: scale(1.05); }

/* 卡片内容 */
.news-card-body {
    padding: 1.5rem;                    /* 24px */
    display: flex;
    flex-direction: column;
    gap: 3rem;                          /* 48px */
    flex: 1;
}
.news-card-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;                          /* 16px */
}
/* 标题：2 行截断 */
.news-card-title {
    font-size: 1.5rem;                  /* 24px */
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 描述：1 行截断 */
.news-card-desc {
    font-size: 0.875rem;                /* 14px */
    color: var(--color-text-2);
    margin: 0;
    line-height: 1.5;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 发布时间 */
.news-card-time {
    font-size: 0.75rem;                 /* 12px */
    color: var(--color-text-3);
    margin: 0;
}
/* 了解更多 */
.news-card-more {
    font-size: 0.75rem;                 /* 12px */
    color: #0066CC;                     /* 主题色 */
    text-decoration: none;
    align-self: flex-start;
    transition: color 0.2s;
}
.news-card-more:hover { color: var(--color-accent); }


/* ==================== 响应式 ==================== */
@media (max-width: 1600px) {
    .news-card-desc{
        font-size: 1rem;
    }
    .news-card-time{
        font-size: 0.875rem;
    }
}
@media (max-width: 1400px) {
    .news-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 平板：<1200px */
@media (max-width: 1199.98px) {
    .news-main-row { gap: 2rem; }
    .news-cat { width: 15rem; }
    .news-grid { gap: 1.5rem; }
}
/* 移动端：<992px —— 分类隐藏，显示筛选按钮 */
@media (max-width: 991.98px) {
    .news-cat { display: none; }
    .product-filter { display: inline-flex; }
    .news-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .news-card-title { font-size: 1.125rem; }
    .news-card-more{display: none;}
    .news-list-title-text { font-size: 1.25rem; }
}
/* 小屏：<480px */
@media (max-width: 479.98px) {
    .news-grid { grid-template-columns: 1fr;  gap: 1rem;}
}

/* ============================================================
 * 新闻详情页样式（show.new.html）
 * ============================================================ */

.news-detail-row {
    display: flex;
    gap: 6rem;                            /* 96px */
    align-items: flex-start;
}

/* ---------- 左侧：新闻详情内容 ---------- */
.news-detail-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;                           /* 32px */
}
.news-detail-title {
    font-size: 3rem;                     /* 48px */
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}
/* 信息行（发布时间 + 浏览次数） */
.news-detail-meta {
    display: flex;
    align-items: center;
    gap: 2rem;                           /* 32px */
}
.news-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;                  /* 12px */
    color: var(--color-text-3);
}
.news-detail-meta-item img { width: 1rem; height: 1rem; }
/* 正文段落 */
.news-detail-text {
    font-size: 1.125rem;                 /* 18px */
    line-height: 2em;
    color: var(--color-text);
    margin: 0;
    text-indent: 2.375rem;               /* 38px 首行缩进 */
}
/* 正文配图 */
.news-detail-pic {
    width: 100%;
    height: 28.6875rem;                  /* 459px */
    border-radius: 0.5rem;
    overflow: hidden;
}
.news-detail-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 右侧：推荐新闻 ---------- */
.news-detail-side {
    width: 25rem;                        /* 400px */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem; 
    position: sticky;
    top: 2rem;
}
.news-detail-side-title {
    font-size: 1.25rem;                  /* 20px */
    color: var(--color-text);
    margin: 0;
    padding-bottom: 1rem;
}
.news-related-list {
    display: flex;
    flex-direction: column;
}
.news-related-item {
    display: flex;
    gap: 1rem;                           /* 16px */
    padding: 1rem 0;
    border-top: 1px solid #EEEEEE;
    text-decoration: none;
    transition: background 0.2s;
}
.news-related-item:first-child { border-top: none; padding-top: 0; }
.news-related-item:hover { background: transparent; }
.news-related-item:hover .news-related-item-title { color: var(--color-accent); }
.news-related-pic {
    width: 8.625rem;                     /* 138px */
    height: 5.75rem;                     /* 92px */
    flex-shrink: 0;
    border-radius: 0.5rem;
    overflow: hidden;
}
.news-related-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.news-related-item:hover .news-related-pic img { transform: scale(1.08); }
.news-related-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.25rem;
}
.news-related-item-title {
    font-size: 1rem;                     /* 16px */
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.news-related-item-time {
    font-size: 0.75rem;                  /* 12px */
    color: var(--color-text-3);
    margin: 0;
}
/* 返回列表按钮 */
.news-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #DDDDDD;
    border-radius: 3.75rem;
    color: var(--color-text-2);
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
    align-self: flex-start;
}
.news-detail-back:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.news-detail-back img { width: 1.5rem; height: 1.5rem; transform: rotate(180deg); }

/* ---------- 新闻详情页响应式 ---------- */
@media (max-width: 1199.98px) {
    .news-detail-row { flex-direction: column; gap: 3rem; }
    .news-detail-side { width: 100%; gap: 0;}
}
@media (max-width: 767.98px) {
    .news-detail { padding: 3rem 0; }
    .news-detail-title { font-size: 1.75rem; }
    .news-detail-meta { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .news-detail-text { font-size: 1rem; text-indent: 2rem; }
    .news-detail-pic { height: auto; aspect-ratio: 3/2; }
}
@media (max-width: 479.98px) {
    .news-related-pic { width: 7rem; height: 4.67rem; }
    .news-detail-back { width: 100%; justify-content: center; }
}