:root {
  --project-section-padding: 90px;
  --project-section-padding-mobile: 30px;
  --image-height-desktop: 414px;
  --image-height-tablet: 200px;
  --image-margin-bottom: 35px;
  --image-margin-bottom-mobile: 20px;
  --sidebar-width-desktop: 370px;
  --sidebar-width-laptop: 300px;
  --sidebar-width-tablet: 260px;
  --sidebar-gap: 30px;
  --border-color: #f0f7f2;
  --text-color: #222222;
  --text-color-white: #ffffff;
  --transition-duration: 300ms;
}

/* 主容器 */
.groundwork-project-read-block {
  padding: var(--project-section-padding) 0;
}

/* 内容视图容器 */
.groundwork-project-read-block .content-view {
  display: flex;
  gap: var(--sidebar-gap); /* 替代margin-left，更优雅的flex间距方案 */
  overflow: hidden;
}

/* 左侧内容列 */
.groundwork-project-read-block .inner-column {
  flex: 1;
  overflow: hidden;
}

/* 图片容器 */
.groundwork-project-read-block .image-box {
  width: 100%;
  height: var(--image-height-desktop);
  overflow: hidden;
  margin-bottom: var(--image-margin-bottom);
}

/* 图片自适应 */
.groundwork-project-read-block .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-object-fit: cover; /* Safari兼容性 */
}

/* Swiper轮播按钮 */
.groundwork-project-read-block .swiper-button-prev:after,
.groundwork-project-read-block .swiper-button-next:after {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-color-white);
}

.groundwork-project-read-block .swiper-button-prev {
  left: 20px;
}

.groundwork-project-read-block .swiper-button-next {
  right: 20px;
}

/* 加载更多/翻页区域 */
.groundwork-project-read-block .load-more-option {
  position: relative;
  display: flex; /* 改用flex布局，彻底解决浮动塌陷问题 */
  justify-content: space-around;
  align-items: center;
  margin-top: 70px;
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.groundwork-project-read-block .load-more-option li {
  font-size: 14px;
  line-height: 30px;
  color: var(--text-color);
  font-weight: 400;
  text-transform: uppercase;
  display: inline-block;
  padding-left: 30px;
}

/* 翻页箭头通用样式 */
.groundwork-project-read-block .load-more-option li a::before,
.groundwork-project-read-block .load-more-option li a::after {
  content: "";
  height: 6px;
  width: 6px;
  border-width: 1px 1px 0 0;
  border-color: inherit;
  border-style: solid;
  transition: var(--transition-duration) ease;
  display: inline-block;
  vertical-align: 2px;
}

/* 上一页箭头 */
.groundwork-project-read-block .load-more-option li.prev a::before {
  transform: rotate(-135deg);
  margin-right: 10px;
  margin-left: 10px;
}

/* 下一页箭头 */
.groundwork-project-read-block .load-more-option li.next a::after {
  transform: rotate(45deg);
  margin-left: 10px;
  margin-right: 10px;
}

/* 翻页链接 */
.groundwork-project-read-block .load-more-option li a {
  color: var(--text-color);
  display: inline-block;
  transition: color var(--transition-duration) ease;
}

.groundwork-project-read-block .load-more-option li a:hover {
  color: var(--color-primary);
}

/* 加载更多按钮 */
.groundwork-project-read-block .load-more-option li.load-more {
  font-size: 24px;
  display: inline-block;
}

.groundwork-project-read-block .load-more-option li.load-more a .iconfont {
  font-size: 24px;
  color: var(--color-primary);
}

/* 右侧信息侧边栏 */
.groundwork-project-read-block .info-column {
  position: relative;
  flex: 0 0 var(--sidebar-width-desktop);
}

/* 侧边栏信息列表 */
.groundwork-project-read-block .info-list {
  background-color: var(--color-primary);
  padding: 20px 25px;
}

/* 表单文字颜色 */
.groundwork-project-read-block .info-list .inqury_title_text,
.groundwork-project-read-block .info-list .inqury_titl_desc,
.groundwork-project-read-block .info-list .input-label {
  color: var(--text-color-white);
}

/* ==============================================
   响应式断点（从大到小排列，优先级递增）
   ============================================== */

/* 1. 桌面小屏：≤1199px */
@media (max-width: 1199px) {
  .groundwork-project-read-block .info-column {
    flex-basis: var(--sidebar-width-laptop);
  }
  
  .groundwork-project-read-block .info-list {
    padding: 20px;
  }
}

/* 2. iPad横屏：≤1024px（新增，解决平板显示问题） */
@media (max-width: 1024px) {
  .groundwork-project-read-block .info-column {
    flex-basis: var(--sidebar-width-tablet);
  }
  
  .groundwork-project-read-block .image-box {
    height: var(--image-height-tablet);
  }
}

/* 3. 平板竖屏：≤991px */
@media (max-width: 991px) {
  .groundwork-project-read-block .content-view {
    flex-direction: column;
    gap: 0;
  }
  
  .groundwork-project-read-block .info-column {
    flex-basis: auto;
    margin-top: 30px;
  }
}

/* 4. 手机竖屏：≤767px */
@media (max-width: 767px) {
  .groundwork-project-read-block {
    padding: var(--project-section-padding-mobile) 0;
  }
  
  .groundwork-project-read-block .image-box {
    margin-bottom: var(--image-margin-bottom-mobile);
  }
  
  .groundwork-project-read-block .load-more-option {
    margin-top: 40px;
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .groundwork-project-read-block .load-more-option li.load-more {
    order: -1; /* 移动端加载更多按钮置顶 */
    
    text-align: center;
  }
  
  .groundwork-project-read-block .sticky-box {
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }
}



/* ==============================================
   纯CSS实现表格单独滚动 | 零HTML改动
   ✅ 仅表格横向滚动，图片/文字/按钮完全不动
   ✅ 不破坏任何原有布局和功能
   ✅ 兼容所有主流浏览器和移动端
   ============================================== */

/* 1. 移除父容器的滚动能力（关键！） */
.groundwork-project-read-block .inner-column {
  overflow-x: visible !important; /* 恢复默认，让表格可以溢出父容器 */
  padding-bottom: 0 !important;
}

/* 2. 把表格本身变成独立滚动容器（核心魔法） */
.groundwork-project-read-block table {
  display: block !important;
  max-width: 100% !important;
  /* 仅水平方向滚动 */
  overflow-x: auto !important;
  /* iOS顺滑滚动 */
  -webkit-overflow-scrolling: touch !important;
  /* 给滚动条留出空间，避免遮挡表格底部边框 */
  padding-bottom: 0 !important;
  /* 保持表格原有间距 */
  margin: 15px 0 !important;
  /* 覆盖硬编码宽度 */
  width: auto !important;
  min-width: auto !important;
}

/* 3. 强制覆盖所有内部硬编码宽度 */
.groundwork-project-read-block colgroup,
.groundwork-project-read-block col,
.groundwork-project-read-block tbody,
.groundwork-project-read-block tr,
.groundwork-project-read-block td {
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
}

/* 4. 保持表格内部的原生布局特性 */
.groundwork-project-read-block table > tbody {
  display: table !important;
  /* 表格最小宽度，防止内容被过度压缩 */
  min-width: 650px !important;
  /* 保持表格边框合并 */
  border-collapse: collapse !important;
  /* 宽度自适应内容 */
  width: 100% !important;
}

/* 5. 优化表格可读性 */
.groundwork-project-read-block td {
  word-wrap: break-word !important;
  word-break: break-word !important;
  vertical-align: top !important;
  padding: 10px 12px !important;
}

/* 6. 移动端优化 */
@media (max-width: 767px) {
  .groundwork-project-read-block table > tbody {
    min-width: 580px !important;
  }
  
  .groundwork-project-read-block td {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
}