/* ====== Global Font: SimSun ====== */
html, body, button, input, textarea, select {
  font-family: "SimSun", "NSimSun", "Songti SC", serif;
}

/* 系列展示区样式 */
.series-container {
  padding: 120px 0 60px; /* 上下内边距120px 0 60px，左右无内边距 */
  background-color: var(--light-color); /* 背景色调用自定义浅色变量 */
}

.series-section {
  margin-bottom: 30px; /* 底部外边距30px，区块之间留间距 */
  border-radius: 10px; /* 圆角10px */
  overflow: hidden; /* 溢出内容隐藏，防止内容超出圆角范围 */
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); /* 轻微阴影效果，提升层次感 */
  transition: all 0.3s ease; /* 所有属性变化0.3秒缓动过渡 */
  background-color: var(--white-color); /* 背景色调用自定义白色变量 */
}

.series-section:last-child {
  margin-bottom: 0; /* 选中最后一个区块，清除底部外边距 */
}

.series-toggle {
  width: 100%; /* 宽度占满父容器 */
  padding: 20px 30px; /* 上下内边距20px，左右内边距30px */
  display: flex; /* 开启弹性布局 */
  justify-content: space-between; /* 内容左右两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  background-color: var(--primary-color); /* 背景色调用自定义主色调变量 */
  color: var(--white-color); /* 文字颜色调用自定义白色变量 */
  border: none; /* 清除边框 */
  cursor: pointer; /* 鼠标移入显示手型 */
  transition: all 0.3s ease; /* 所有属性变化0.3秒缓动过渡 */
}

.series-toggle:hover {
  background-color: var(--accent-color); /* 鼠标悬停时，背景色切换为自定义强调色 */
}

.series-title {
  font-size: 4.0rem; /* 字体大小1.8倍根字号 */
  margin: 0; /* 清除默认外边距 */
  text-align: left; /* 文字左对齐 */
}

.series-toggle i {
  font-size: 1.2rem; /* 图标字体大小1.2倍根字号 */
  transition: transform 0.3s ease; /* 仅针对旋转属性做0.3秒缓动过渡 */
}

.series-content {
  display: none; /* 默认隐藏内容区域 */
  padding: 30px; /* 四周内边距30px */
  flex-wrap: wrap; /* 允许子元素换行 */
  align-items: flex-start; /* 子元素顶部对齐 */
}

.series-section.active .series-content {
  display: flex; /* 当父级有active类时，内容区域显示并开启弹性布局 */
}

.series-section.active .series-toggle i {
  transform: rotate(180deg); /* 当父级有active类时，图标旋转180度 */
}

.series-main-image {
  flex: 0 0 35%; /* 固定宽度占比35%，不拉伸不收缩 */
  max-width: 35%; /* 最大宽度35%，配合flex属性生效 */
  padding-right: 30px; /* 右侧内边距30px，与右侧内容区隔开 */
  position: relative; /* 相对定位，作为子元素定位参考 */
}

.series-main-image img {
  width: 100%; /* 宽度铺满父容器 */
  height: auto; /* 高度自适应，保持图片比例 */
  border-radius: 8px; /* 图片圆角8px */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 图片添加阴影 */
  transition: transform 0.3s ease; /* 仅针对缩放属性做0.3秒缓动过渡 */
  cursor: pointer; /* 鼠标移入显示手型 */
}

.series-main-image img:hover {
  transform: scale(1.02); /* 鼠标悬停时，图片轻微放大1.02倍 */
}

.series-info {
  margin-top: 20px; /* 顶部外边距20px，与图片隔开 */
}

.series-info p {
  font-size: 1.1rem; /* 字体大小1.1倍根字号 */
  color: var(--accent-color); /* 文字颜色调用自定义强调色 */
  line-height: 1.8; /* 行高1.8倍，提升可读性 */
  margin-bottom: 20px; /* 底部外边距20px */
}

.series-thumbnails {
  flex: 0 0 65%; /* 固定宽度占比65%，不拉伸不收缩 */
  display: grid; /* 开启网格布局 */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 自适应列数，最小列宽180px，列宽平均分配 */
  gap: 20px; /* 网格项之间的间距20px */
}

.thumbnail-item {
  position: relative; /* 相对定位，作为子元素定位参考 */
  border-radius: 8px; /* 圆角8px */
  overflow: hidden; /* 溢出内容隐藏，适配圆角 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  transition: all 0.3s ease; /* 所有属性变化0.3秒缓动过渡 */
  cursor: pointer; /* 鼠标移入显示手型 */
}

.thumbnail-item:hover {
  transform: translateY(-5px); /* 鼠标悬停时，元素向上偏移5px */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* 悬停时加深阴影 */
}

.thumbnail-item img {
  width: 100%; /* 宽度铺满父容器 */
  height: 150px; /* 固定高度150px */
  object-fit: cover; /* 图片裁剪填充，保持比例不变形 */
  display: block; /* 转为块级元素，清除默认间隙 */
}

.thumbnail-name {
  display: block; /* 转为块级元素 */
  padding: 10px; /* 四周内边距10px */
  background-color: rgba(0, 0, 0, 0.7); /* 黑色半透明背景 */
  color: var(--white-color); /* 文字颜色调用自定义白色变量 */
  font-size: 0.9rem; /* 字体大小0.9倍根字号 */
  text-align: center; /* 文字居中对齐 */
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 距离底部0px */
  left: 0; /* 距离左侧0px */
  right: 0; /* 距离右侧0px */
  transition: all 0.3s ease; /* 所有属性变化0.3秒缓动过渡 */
}

.thumbnail-item:hover .thumbnail-name {
  background-color: var(--primary-color); /* 鼠标悬停时，底部文字栏背景色切换为主色调 */
}

/* 图片弹窗放大动画 */
@keyframes zoom {
  from {transform: scale(0.1)} /* 动画开始：缩放至0.1倍 */
  to {transform: scale(1)} /* 动画结束：缩放至正常1倍大小 */
}

/* 图片弹窗关闭按钮样式 */
.close-image-modal {
  position: absolute; /* 绝对定位 */
  top: 20px; /* 距离顶部20px */
  right: 40px; /* 距离右侧40px */
  color: #f1f1f1; /* 文字浅灰色 */
  font-size: 40px; /* 字体大小40px */
  font-weight: bold; /* 字体加粗 */
  transition: 0.3s; /* 所有属性变化0.3秒过渡 */
  cursor: pointer; /* 鼠标移入显示手型 */
}

.close-image-modal:hover {
  color: var(--secondary-color); /* 鼠标悬停时，文字颜色切换为自定义次要色 */
  transform: scale(1.2); /* 鼠标悬停时，按钮放大1.2倍 */
}

/* 图片弹窗下方标题说明文字样式 */
.caption {
  margin: 15px auto; /* 上下外边距15px，左右自动居中 */
  width: 80%; /* 宽度80% */
  max-width: 700px; /* 最大宽度700px */
  text-align: center; /* 文字居中对齐 */
  color: #ccc; /* 文字浅灰色 */
  padding: 10px 0; /* 上下内边距10px，左右无内边距 */
  font-size: 1.1rem; /* 字体大小1.1倍根字号 */
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .series-thumbnails {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* 屏幕≤1200px，缩略图最小列宽改为160px */
  }
}

@media (max-width: 992px) {
  .series-container {
    padding: 100px 0 50px; /* 屏幕≤992px，上下内边距缩小 */
  }
  
  .series-content {
    flex-direction: column; /* 弹性布局改为垂直排列 */
  }
  
  .series-main-image {
    flex: 0 0 100%; /* 大图区域宽度占比改为100% */
    max-width: 100%; /* 最大宽度100% */
    padding-right: 0; /* 清除右侧内边距 */
    margin-bottom: 30px; /* 底部外边距30px，与下方内容隔开 */
  }
  
  .series-thumbnails {
    flex: 0 0 100%; /* 缩略图区域宽度占比改为100% */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* 缩略图最小列宽改为140px */
  }
}

@media (max-width: 768px) {
  .series-title {
    font-size: 1.5rem; /* 屏幕≤768px，标题字号缩小为1.5倍 */
  }
  
  .series-toggle {
    padding: 15px 20px; /* 按钮内边距缩小 */
  }
  
  .series-content {
    padding: 20px; /* 内容区内边距缩小 */
  }
  
  .series-info p {
    font-size: 1rem; /* 说明文字字号缩小为1倍 */
  }
  
  .thumbnail-item img {
    height: 120px; /* 缩略图高度缩小为120px */
  }
  
  .modal-content {
    max-width: 95%; /* 弹窗内容最大宽度95% */
    max-height: 70vh; /* 弹窗内容最大高度70%视口高度 */
  }
  
  .close-image-modal {
    top: 15px; /* 关闭按钮距离顶部缩短 */
    right: 20px; /* 关闭按钮距离右侧缩短 */
    font-size: 30px; /* 关闭按钮字号缩小 */
  }
}

@media (max-width: 576px) {
  .series-container {
    padding: 80px 0 40px; /* 屏幕≤576px，上下内边距继续缩小 */
  }
  
  .series-title {
    font-size: 1.3rem; /* 标题字号继续缩小为1.3倍 */
  }
  
  .series-thumbnails {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* 缩略图最小列宽改为120px */
    gap: 15px; /* 缩略图间距缩小为15px */
  }
  
  .thumbnail-item img {
    height: 100px; /* 缩略图高度缩小为100px */
  }
  
  .thumbnail-name {
    font-size: 0.8rem; /* 缩略图底部文字字号缩小 */
    padding: 8px; /* 底部文字栏内边距缩小 */
  }
}

/* ====== =========================================系列入口：两行三列毛玻璃卡片 ====== */
.series-grid{
  display: grid; /* 开启网格布局 */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 网格列数：重复3列，每列最小宽度0，最大宽度1fr（平均分配） */
  gap: 28px; /* 网格项之间的间距（行+列）28px */
  margin: 34px auto 26px; /* 外边距：上34px 左右自动居中 下26px */
}

/* 单个卡片 */
.series-card{
  position: relative; /* 相对定位，作为伪元素和子元素定位参考 */
  display: block; /* 转为块级元素，确保链接可点击区域完整 */
  padding: 26px 26px; /* 卡片内边距：上下左右均为26px */
  min-height: 210px; /* 卡片最小高度210px（保证卡片高度统一） */
  border-radius: 22px; /* 卡片圆角22px */
  text-decoration: none; /* 清除链接默认下划线 */

  /* 毛玻璃底 */
  background: rgba(255,255,255,0.06); /* 白色半透明背景，透明度14% */
  border: 1px solid rgba(255,255,255,0.18); /* 白色半透明边框，透明度28% */
  /*backdrop-filter: blur(5px); /* 背景模糊14px，实现毛玻璃效果 */

  box-shadow: 0 18px 55px rgba(0,0,0,0.25); /* 卡片阴影：垂直偏移18px，模糊55px，黑色半透明（透明度25%） */
  overflow: hidden; /* 隐藏溢出内容，适配圆角和伪元素缩放 */
  color: rgba(255,255,255,0.92); /* 文字颜色：白色，透明度92% */
}

/* 卡片底图（你给的背景图放这里） */
.series-card::before{
  content:""; /* 伪元素必须设置content，此处为空仅占位 */
  position:absolute; /* 绝对定位，覆盖整个卡片 */
  inset:0; /* 等同于top:0; right:0; bottom:0; left:0; 填满父容器 */
  background-image: var(--bg); /* 背景图调用自定义CSS变量--bg */
  background-size: cover; /* 背景图覆盖整个伪元素区域 */
  background-position: center; /* 背景图居中显示 */
  filter: blur(0px); /* 滤镜：亮度55%（压暗）、饱和度105%（轻微提升），保证文字清晰 */
  transform: scale(1.05); /* 背景图轻微放大1.05倍，避免边缘露白 */
  z-index: 0; /* 层级0，低于文案层 */
}

/* 再加一层渐变，防止背景太花 */
.series-card::after{
  content:""; /* 伪元素必须设置content，此处为空仅占位 */
  position:absolute; /* 绝对定位，覆盖整个卡片 */
  inset:0; /* 等同于top:0; right:0; bottom:0; left:0; 填满父容器 */
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.05)); /* 线性渐变：从左到右，黑色半透明（45%→15%），弱化背景 */
  z-index: 0; /* 层级0，低于文案层，与::before同层级 */
}
/*------------------------------------------------------改动之后的惠安系列展示页面，三个框一行，共两行---------------------------------*/
/* 文案层放上面 */
.series-card-kicker,
.series-card-title,
.series-card-desc{
  position: relative; /* 相对定位，脱离默认文档流层级 */
  z-index: 1; /* 层级1，高于背景伪元素，保证文案显示在最上层 */
}

.series-card-kicker{
  font-size: 12px; /* 小字标签字体大小12px */
  letter-spacing: .18em; /* 字间距18% */
  text-transform: uppercase; /* 文字转为大写 */
  opacity: .75; /* 透明度75%，略微淡化 */
  margin-bottom: 12px; /* 底部外边距12px，与标题隔开 */
}

.series-card-title{
  font-size: 26px; /* 卡片标题字体大小26px */
  font-weight: 700; /* 字体加粗（700为bold） */
  margin-bottom: 12px; /* 底部外边距12px，与描述隔开 */
}

.series-card-desc{
  font-size: 16px; /* 卡片描述字体大小14px */
  line-height: 1.65; /* 行高1.65倍，提升可读性 */
  opacity: .9; /* 透明度90% */
  max-width: 26ch; /* 最大宽度26个字符，防止描述文字过宽 */
}

/* 悬停动效 */
.series-card:hover{
  transform: translateY(-4px); /* 鼠标悬停时，卡片向上偏移4px */
  transition: transform .18s ease, box-shadow .18s ease; /* 过渡动画：变换和阴影，时长0.18秒，缓动效果 */
  box-shadow: 0 26px 70px rgba(0,0,0,0.32); /* 悬停时阴影加重：垂直偏移26px，模糊70px，黑色半透明（32%） */
}
.series-card:hover::before{
  filter: brightness(.62) saturate(1.1); /* 悬停时背景图滤镜调整：亮度62%（略亮）、饱和度110%（略高），增强视觉反馈 */
}

/* 响应式：小屏变两列/一列 */
@media (max-width: 992px){
  .series-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .series-grid{ grid-template-columns: 1fr; }
}
/* ====== =====================================================覆盖整页 Overlay ====== */
.series-overlay{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}
.series-overlay.is-open{ display: block; }

.series-overlay__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}

.series-overlay__panel{
  position: relative;
  width: min(1200px, 92vw);
  height: min(88vh, 920px);
  margin: 6vh auto 0;
  background: rgba(255,255,255,.80);   /* 白灰半透明 */
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 22px;
  box-shadow: 0 30px 120px rgba(0,0,0,.45);
  overflow: auto;
}

.series-overlay__close{
  position: sticky; /* 滚动时也一直在上面 */
  top: 12px;
  margin: 12px 12px 0 auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: rgba(0,0,0,.15);
  color: rgba(0,0,0,.85);
  font-size: 26px;
  line-height: 42px;
  cursor: pointer;
}

.series-overlay__body{
  padding: 18px 22px 26px;
}

/* 让 overlay 里显示原本 series-section 的内容 */
.series-overlay__body .series-section{
  display: block;
}

/* 不想要旧的长条按钮，就在 overlay 里隐藏它 */
.series-overlay__body .series-toggle{
  display: none;
}
.series-card::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(10,10,10,.08);   /* 轻微雾面 */
  backdrop-filter: blur(8px);
  pointer-events:none;
}

.series-card > *{ position: relative; z-index: 1; }