/**
 * 首页特有样式
 * 基于 备份/website/css/index.css 大字版，变量名已映射到当前体系
 */

/* Banner */
.banner {
    position: relative;
    height: 320px;
    overflow: hidden;
    background: #FFF;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1120px;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.5s ease;
    display: block;
    /* 2026-08-06 hk：多 img 共存，非激活图隐藏（仍加载，切换零延迟） */
    opacity: 0;
    pointer-events: none;
}

.banner-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.banner-dots {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-sm);
}

.banner-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.banner-dots span.active {
    background: #FFF;
}

/* 新闻区 - 大字版 */
.news-section {
    background: #fff;
}

.news-wrapper {
    display: flex;
    gap: var(--module-gap);
    align-items: flex-start;
}

/* 2026-09-03 hk：dot 定位容器，承接原 .news-image 的 flex 定宽职责 */
.news-image-box {
    position: relative;
    flex-shrink: 0;
    width: 522px;
    height: 373px;
}

.news-image {
    display: block;
    width: 100%;
    height: 100%;
}

/* 综合资讯图池 dot：居中（与 banner dot 同构图），主题色实心，浅色底保证压图可见 */
.news-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.news-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.news-dots span.active {
    background: #008F98;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.35s ease;
    /* 2026-08-06 hk：方案A 浅灰衬底卡片轮廓（方形无圆角、contain 留白不空洞） */
    background: #F7F8FA;
    border: 1px solid #E7E8EA;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    /* 2026-08-06 hk：多 img 用 v-show（display:none）控制显隐——不占布局、图片已加载、切换零等待 */
}

.news-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
}

.news-header h2 {
    font-size: 28px;
    color: #000;
    font-weight: 400;
}

.news-header .more {
    font-size: 14px;
    color: #008F98;
}

.news-list {
    display: flex;
    flex-direction: column;
}

.news-item {
    display: flex;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 0px;
}

.news-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: #008F98;
    font-size: 16px;
    margin-right: var(--space-sm);
    text-decoration: none;
}

.news-tag::after {
    content: '|';
    margin-left: var(--space-sm);
    color: #008F98;
}

.news-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: #000000;
    text-decoration: none;
}

.news-date {
    flex-shrink: 0;
    color: #A3A3A3;
    font-size: 16px;
    margin-left: var(--space-md);
    cursor: default;
}

/* 当前选中项标题高亮 */
.news-item.active .news-title {
    color: #008F98;
}

/* 2026-08-06 hk 定：hover 时标题也变主题色（与选中态一致） */
.news-item:hover .news-title {
    color: #008F98;
}

/* news-date 的括号改为模板层直出 [{{item.date}}]，避免无日期时出现空 [] */

/* 标题模块 - 通用的标题区结构 */
.section-hd {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.section-title-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

.section-title-main {
    font-size: 40px;
    font-weight: normal;
    color: #008F98;
    line-height: 1.2;
}

.section-title-sub {
    font-size: 40px;
    font-weight: normal;
    color: #008F98;
    line-height: 1.2;
}

.section-action {
    flex-shrink: 0;
    /* 2026-08-07 hk：把"更多"按钮推到最右，与 section-tabs 拉开距离 */
    margin-left: auto;
}

.section-tabs {
    display: flex;
    gap: 45px;
    flex-wrap: wrap;
    align-items: flex-end;
    /* 2026-08-07 hk：tabs 起点对齐第二本书封面后（≈220px=1本书160+gap 24≈184，含安全余量取220） */
    margin-left: 280px;
}

.section-tabs span {
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    /* 2026-08-07 hk：左 padding 归零，让"重点图书"与"科技"的首字左缘严格对齐 */
    padding: 0 var(--space-sm) 0 0;
    font-size: 20px;
}

.section-tabs span:hover {
    color: var(--primary-color);
}

.section-tabs span.active {
    color: var(--primary-color);
}

.more-link {
    font-size: 14px;
    color: #008F98;
    font-weight: normal;
}

.more-link:hover {
    color: var(--primary-color);
}

/* 内容区 */
.section-bd {
    width: 100%;
}

/* 图书网格 - flex 布局 */
.book-grid {
    display: flex;
    gap: var(--space-md);
}

/* 重点推荐 - 5列，书更大 */
.book-grid-5 {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
    row-gap: 40px;
}

.book-grid-5 .book-card {
    width: 194px;
    flex-shrink: 0;
}

/* 新书推荐 - 6列，flex between，2 行 6 本布局，a 标签只包 img 和 title */
.book-grid-6 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    row-gap: 45px;
}

.book-card {
    background: #fff;
    overflow: hidden;
    transition: transform var(--transition-base);
    display: flex;
    flex-direction: column;
    width: 160px;
    flex-shrink: 0;
}

.book-card:hover {
    transform: translateY(-4px);
}

/* 封面内 <a>：填满 book-cover，消除行框幽灵 */
.book-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    line-height: 0;
}

.book-link-title {
    line-height: inherit;            /* 继承 h4.book-title 的 line-height */
}

.book-cover {
    width: 194px;
    height: 274px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid #E7E7E8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* 新书推荐特殊样式 */
.book-grid-6 .book-cover {
    width: 160px;
    height: 223px;
    border: 1px solid #E7E7E8;
}

.book-grid-6 .book-link-title {
    margin-top: 0;
}

.book-grid-5 .book-meta,
.book-grid-6 .book-meta {
    margin-top: 3px;                /* 书名到 meta 紧凑间距 */
}

.book-info {
    height: 70px;                      /* 75px 内容 + 2px 底边预留（重点推荐用） */
    display: flex;
    flex-direction: column;
    padding: 6px 10px 7px 10px;       /* 上6 下6，水平10 */
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;            /* padding/border 计入 height */
}

.new-books .book-info {
    background: #F5F3F2;
}

/* 重点推荐：book-info 底部 2px 灰线（border-box 内含，外部仍为 77px） */
.book-grid-5 .book-info {
    border-bottom: 2px solid #D6D6D6;
}

.newsbg {
    background: #F5F3F2;
}

.book-title {
    font-size: 14px;
    font-weight: normal;
    color: #040000;
    line-height: 1.4;                /* 紧凑：14×1.4×2 = 39.2px，2 行能装下 */
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    min-height: calc(1.4em * 2);    /* 1行也占2行高，保证同卡片标题区对齐 */
}

.book-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.book-category {
    font-size: 10px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-price {
    font-size: 10px;
    color: #999;
}

.book-divider {
    height: 1px;
    background: #e8e8e8;
    margin-top: var(--space-sm);
}

/* 新书推荐 - 已整合到通用 section-hd 结构中 */

/* 科普专栏 */
.science-section {
}

.science-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.science-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #000;
}

.science-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #A3A3A3;
}

.science-title h2 {
    color: #000;
    font-weight: normal;
    font-size: 30px;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    margin-top: 0;
    margin-left: 2px;
}

.science-title .more {
    font-size: 14px;
    color: #00A8A8;
    padding-top: var(--space-sm);
}

/* 科普标签切换 */
.science-tabs {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
    background: #fff;
}

.science-tab {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    padding: 0 var(--space-lg);
    cursor: pointer;
    font-size: 20px;
    color: var(--text-primary);
    background: #e8e8e8;
    transition: all var(--transition-fast);
    position: relative;
}

.science-tab:hover {
    background: #f0f0f0;
}

.science-tab.active {
    background: #4BCFCE;
    color: #fff;
}

.science-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -2px;
    right: -2px;
    height: 6px;
    background: #00ADAF;
    border-radius: 4px;
}

/* 科普内容区域 */
.science-content {
    background: #F5F3F2;
    height: 460px;  /* 锁死容器高度，3 个 tab 切换无跳动；好书/活动/知识各自内部 padding 配齐到 460 */
}

.science-tab-content {
    background: #F5F3F2;
    width: 100%;
}

/* 科普好书 */
.books-content {
    padding: 23px 73px 20px;  /* 460 = 23 上 + 348 封面 + ~49 标题/meta + 20 下 */
}

.books-list {
    display: flex;
    justify-content: space-between;
    gap: 110px;
}

/* 科普好书 meta：分类左 / 价格右（字号沿用全站 .book-category/.book-price 10px） */
.books-content .book-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.book-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 247px;
}

/* 封面图链接 + 标题链接：去下划线、继承色 */
a.book-image,
.book-title-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.book-title-link:hover .book-title {
    color: var(--primary-color);
}

.book-image {
    width: 247px;
    height: 348px;
    overflow: hidden;
    border: 1px solid #E7E7E8;
}

.book-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* ========= 原子化工具类 ========= */
.no-padding {
    padding: 0;
}

/* 科普活动（2026-06-22 单图模式：图片自含完整信息，铺满 tabs，无 padding） */
.activity-content {
    padding: 0;
}

.activity-image {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.activity-image img {
    width: 100%;
    height: 460px;
    display: block;
}

/* 科普知识 - 首页专用，加 index- 前缀避免污染 services-science-kno.html */
.index-knowledge-layout {
    display: flex;
    gap: 18px;
    padding: 30px 15px 30px 30px;  /* 460 = 30 上 + 400 内容 + 30 下 */
}

.index-knowledge-image {
    width: 720px;
    height: 400px;
    flex-shrink: 0;
    overflow: hidden;
    background: #F7F8F8;
}

a.index-knowledge-image {
    display: block;
}
.index-knowledge-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 右侧文章列表 宽340px */
.index-knowledge-list {
    width: 340px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 每个item */
.index-knowledge-item {
    cursor: default;
    text-align: left;
    padding: 20px 15px;
    height: 184px;
    border-bottom: 1px solid #898989;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.3s;
}

.index-knowledge-item:last-child {
    border-bottom: none;
}

/* active状态 */
.index-knowledge-item.active {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background: #F5F3F2;
    border-bottom-color: transparent;  /* 2026-06-22 active 项隐藏底边线，避免与卡片浮起样式冲突；保留 1px 占位防止下方位移 */
}

/* 标题 20px；常态#000，active时#008F98 */
.index-knowledge-title {
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    color: #000;
    margin-bottom: var(--space-sm);
    transition: color 0.3s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.index-knowledge-item.active .index-knowledge-title {
    color: #008F98;
}

/* 简介 14px #000 2行省略 */
.index-knowledge-desc {
    font-size: 14px;
    color: #000;
    line-height: 1.5;
    max-height: 3em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: var(--space-sm);
}

/* 日期 12px #898989 */
.index-knowledge-date {
    font-size: 12px;
    color: #898989;
    margin-top: auto;
}

/* 科普后续模块标题 */
.science-subsections {
    margin-top: var(--space-xl);
}

/* 数字平台 - flex 布局，两端对齐 */
.platform-grid {
    display: flex;
    justify-content: space-between;  /* 首尾贴边，中间均分 */
    align-items: flex-start;         /* 顶部对齐 */
}

.platform-item {
    display: block;
    line-height: 0;          /* 消除 a 标签 inline 行框幽灵 */
    flex-shrink: 0;          /* 防止图被压缩 */
    transition: all 0.3s ease;
}

.platform-item:hover {
    opacity: 0.8;
}
/* 2026-07-24: 数字平台卡片 disabled 态（临时关链，保留卡片展示） */
.platform-item-disabled {
    cursor: default;
}
.platform-item-disabled:hover {
    opacity: 1;               /* 无链接行为，不暗化 */
}

.platform-item img {
    display: block;
    width: 215px;
    height: 338px;
    object-fit: contain;
    margin: 0;
    vertical-align: top;     /* 防御基线对齐 */
}

.platform-item span {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* 数字平台 - 容器占位，让 ::before/::after 能相对 section 定位 */
.platform-section {
    position: relative;
    overflow: hidden;
}

.platform-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xxl);
}

.platform-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #000;
}

.platform-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #000;
}

.platform-title h2 {
    color: #000;
    font-weight: normal;
    font-size: 30px;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    margin: 0;
}

/* 期刊 - 容器占位，让 ::before/::after 能相对 section 定位 */
.journal-section {
    position: relative;
    overflow: hidden;
}

.journal-section .section-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 75px;
}

.journal-section .section-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #000;
}

.journal-section .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #A3A3A3;
}

.journal-section .section-title h2 {
    color: #000;
    font-weight: normal;
    font-size: 30px;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    margin: 0;
}

.journal-header {
    text-align: center;
    padding: var(--space-lg) 0;
}

.journal-header h3 {
    font-size: 18px;
    color: #040000;
    font-weight: 500;
    line-height: 1.6;
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(5, 171px);  /* 固定列宽 171px，复刻原设计 */
    column-gap: 48px;                         /* 4 个 gap 平均 48px（实测 48/44/46/50 取均） */
    padding-left: 39px;                       /* 复刻原设计不对称内边距 */
    padding-right: 34px;
    justify-content: start;                   /* 左对齐，保留左 39px 间距 */
    padding-bottom: 45px;
    position: relative;
}

.journal-grid::before {
    content: '';
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
    height: 12px;
    background: #EBEBF2;
}

.journal-grid::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: linear-gradient(to bottom, #B8B8B8, #FFFFFF);
    transform: skewX(15deg);
    transform-origin: top center;
}

.journal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 2px;
    overflow: hidden;
    line-height: 0;                    /* 消除 a 标签 inline 行框幽灵 */
    transition: all var(--transition-base);
    justify-content: flex-end;
}

.journal-item:hover {
    transform: translateY(-4px);
}

.journal-item img {
    width: 171px;
    height: 232px;
    object-fit: none;
    display: block;
}

.journal-item h3 {
    width: 135px;
    height: 52px;
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;             /* 单行时垂直居中 */
    justify-content: center;         /* 水平居中 */
}
.journal-item h3 p,
.journal-item h3 span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    font-size: 20px;
    font-weight: normal;
    color: #040000;
    line-height: 1.3;
    margin: 0;             /* 兜底 p 标签浏览器默认 16px 上下 margin */
}

/* 右侧悬浮框：2026-06-26 提取到 common.css 全站通用，本处删除 */

/* ===== 骨架屏加载态 ===== */
@keyframes sk-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.5s ease-in-out infinite;
}

/* Banner 骨架 */
.banner-sk {
    width: 100%;
    height: 320px;
}

/* 新闻资讯骨架 */
.news-img-sk {
    width: 480px;
    height: 270px;
    flex-shrink: 0;
    border-radius: 8px;
}
.news-content-sk {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 0;
}
.news-row-sk {
    width: 100%;
    height: 20px;
    border-radius: 4px;
}

/* 图书卡片骨架（通用） */
.sk-book {
    border-radius: 8px;
    overflow: hidden;
}
.book-grid-5 .sk-book {
    width: 194px;
    flex-shrink: 0;
}
.book-grid-6 .sk-book {
    width: 160px;
    flex-shrink: 0;
}
.sk-cover {
    border-radius: 4px;
}
.book-grid-5 .sk-cover {
    height: 272px;
}
.book-grid-6 .sk-cover {
    height: 223px;
}
.sk-line {
    height: 18px;
    border-radius: 4px;
}

/* 科普专栏骨架 */
.science-content-sk {
    width: 100%;
    height: 460px;
    border-radius: 8px;
}

/* ========== 首页私有容器（1120px 内容区，复刻首页设计） ========== */
.container-index {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}