/* ==================== 公共基础样式 ==================== */
/* 防止入场动画（左右滑入）过程中产生横向滚动条 */
html,
body {
  overflow-x: hidden;
}

/* ==================== 页面结构样式 ==================== */
/* 头部横幅：背景图按 1920×1019 设计稿等比缩放，高度由 Logo 区 + 下留白构成 */
.header {
  width: 100%;
  overflow: hidden;
}
.header-banner {
  height: 100vh;
  background: url("../images/banner-bg.png") no-repeat center top / 100% 100%;
}

/* 第一部分：个人信息保护科普区，背景按 1920×747 设计稿等比缩放 */
.info-section {
  padding: 4.06% 0;
  background: url("../images/info-bg.png") no-repeat center top / 100% auto;
}
.info-content {
  display: flex;
  align-items: flex-start;
}

/* 第二部分：种植手册-第一铲区域，背景按 1920×1078 设计稿等比缩放 */
.manual-section {
  padding-bottom: 2.13%;
  background: url("../images/manual-bg.png") no-repeat center top / 100% auto;
}
/* 第一铲内容面板：虚线框作为容器背景拉伸填充，内部元素普通流排布 */
.step1-box {
  width: 59.72%;
  margin: 13.61% 0 0 19.73%;
  padding: 5.24% 0 3.02%;
  background: url("../images/step1-panel.png") no-repeat center / 100% 100%;
}
.step1-pills {
  display: flex;
  align-items: center;
  margin-top: 2.78%;
}

/* 第二部分：第二铲/第三铲区域（白色背景） */
.prune-section {
  padding-bottom: 7.37%;
  background-color: #ffffff;
}
/* 第三铲卡片行：装饰土层以背景图形式衬于卡片后方 */
.step3-cards {
  display: flex;
  align-items: flex-start;
  margin-top: 3.23%;
  background: url("../images/step3-soil.png") no-repeat center 67.7% / 55.57% auto;
}

.footer {
  padding: 32px;
  background-color: #0d62bd;
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  color: #fff;
  font-size: 14px;
}
.footer .footer-shield img {
  width: 62px;
  height: 72px;
  display: block;
}
.footer .footer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.footer .footer-info .footer-filing {
  display: flex;
  gap: 20px;
}
.footer .footer-info .footer-filing .footer-filing-link {
  display: flex;
  align-items: center;
  gap: 4px;
}
.footer .footer-placeholder {
  width: 62px;
}

/* ==================== 组件样式 ==================== */
/* 头部 Logo 条：按设计稿 left:48px / top:49px / 宽 418px（基于 1920 换算） */
.header-logos {
  display: block;
  width: 21.77%;
  position: absolute;
  left: 50px;
  top: 50px;
}

/* 第一部分：标题艺术字与对照表卡片按设计稿坐标换算为流式外边距 */
.info-title {
  display: block;
  width: 38.8%;
  margin: 7.45% 0 0 21.98%;
}
.info-table {
  display: block;
  width: 16.72%;
  margin-left: 1.41%;
}

/* 第一铲：虚线标题框与面板内元素均按面板宽度换算 */
.manual-title-card {
  display: block;
  width: 51.09%;
  margin: 6.26% 0 0 24.43%;
}
.step1-title {
  display: block;
  width: 32.09%;
  margin-left: 35.9%;
}
.step1-pill-left {
  display: block;
  width: 28.91%;
  margin-left: 1.75%;
}
.step1-pill-center {
  display: block;
  width: 28.91%;
  margin-left: 4.69%;
}
.step1-pill-right {
  display: block;
  width: 29%;
  margin-left: 3.65%;
}
.step1-action {
  display: block;
  width: 69.58%;
  margin: 5% 0 0 18.51%;
}

/* 第二铲/第三铲：场景图居中，标题与卡片按设计稿坐标换算 */
.step2-scene {
  display: block;
  width: 48.69%;
  margin: 0 auto;
}
.step3-title {
  display: block;
  width: 20.05%;
  margin: 5.61% 0 0 38.41%;
}
.step3-card-1 {
  display: block;
  width: 20.63%;
  margin-left: 18.31%;
}
/* 设计稿中三张卡片两两重叠 10px，用负外边距还原 */
.step3-card-2 {
  display: block;
  width: 21.93%;
  margin-left: -0.52%;
}
.step3-card-3 {
  display: block;
  width: 21.88%;
  margin-left: -0.52%;
}

.part_3 .part_3-banner .part_3-banner-img {
  width: 100%;
  display: block;
}

.part_3-content {
  background-image: url(../images/ai-bg.png);
  background-size: 100% 100%;
  padding: 50px;
}
.part_3-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.part_3-list .part_3-item {
  width: 1000px;
  margin: 0 auto;
  background-size: 100% 100%;
  border-radius: 8px;
  padding: 20px 50px;
  color: #fff;
}
.part_3-list .part_3-item h3 {
  font-size: 24px;
  margin-bottom: 20px;
}
.part_3-list .part_3-item p {
  line-height: 2;
  font-size: 18px;
}
.part_3-list .part_3-item:nth-child(1) {
  background-image: url(../images/ai-card-case.png);
}
.part_3-list .part_3-item:nth-child(2) {
  background-image: url(../images/ai-card-risk.png);
}
.part_3-list .part_3-item:nth-child(3) {
  background-image: url(../images/ai-card-tips.png);
}

.part_3 .ai-warning {
  width: 30%;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}

.part_4 {
  background-image: url(../images/part-4-bg.png);
  padding-bottom: 50px;
}

.part_4-title {
  display: block;
  margin: 0 auto;
}
.part_4-content {
  width: 1200px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 auto;
}
.part_4-item img {
  width: 100%;
  display: block;
}
.part_4-item {
  border-radius: 8px;
  overflow: hidden;
}
.part_4-item-btn {
  background-color: #f5f9fa;
  text-align: right;
  padding: 10px 12px;
  color: #1b63b1;
}
/* 专题资料条目添加手型光标，提示可点击放大 */
.part_4-item {
  cursor: zoom-in;
}

/* 图片放大查看器：半透明遮罩铺满全屏，原图居中显示并保持原始比例 */
.img-viewer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.75);
}
.img-viewer.open {
  display: flex;
}
.img-viewer-pic {
  display: block;
  max-width: 92%;
  max-height: 88vh;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
/* 右上角关闭按钮：44px×44px 满足移动端触控区域要求 */
.img-viewer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  color: #333333;
  font-size: 24px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
}

/* ==================== 响应式媒体查询 ==================== */
/* 手机适配：768px 及以下 */
@media (max-width: 768px) {
  .part_4 {
    padding-bottom: 0;
  }
  .part_4-title {
    width: 50%;
    display: block;
    margin: 0 auto;
  }
  .part_4-content {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 auto;
    padding: 20px;
  }
  .part_4-item img {
    width: 100%;
    display: block;
  }
  .part_4-item {
    border-radius: 8px;
    overflow: hidden;
  }
  .part_4-item-btn {
    background-color: #f5f9fa;
    text-align: right;
    padding: 10px 12px;
    font-size: 14px;
  }
  .part_3-content {
    padding: 0;
  }
  .part_3-list {
    padding: 20px;
  }
  .part_3-list .part_3-item {
    width: 100%;
  }
  .part_3 .ai-warning {
    width: 72%;
    padding-bottom: 20px;
  }
  /* 头部：Logo 放大保证可辨识，下留白相应收减 */
  .header-banner {
    height: auto;
    padding-bottom: 38.27%;
    background: url("../images/banner-bg.png") no-repeat center top / 100% auto;
  }
  .header-logos {
    width: 32%;
    left: 10px;
    top: 10px;
  }

  /* 第一部分：纵向排列，背景裁切铺满保证展示高度 */
  .info-section {
    padding: 40px 0;
    background-position: center;
    background-size: cover;
  }
  .info-content {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .info-title {
    width: 88%;
    margin: 0;
  }
  .info-table {
    width: 72%;
    max-width: 321px;
    margin: 0;
  }

  /* 第一铲：纵向排列；虚线面板改用 CSS 绘制，避免背景图拉伸变形 */
  .manual-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    background-position: center;
    background-size: cover;
  }
  .manual-title-card {
    display: none;
  }
  .step1-box {
    width: 92%;
    margin: 0;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 2px dashed #9ec9f5;
    border-radius: 12px;
  }
  .step1-title {
    width: 60%;
    margin: 0 auto;
  }
  .step1-pills {
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }
  .step1-pill-left,
  .step1-pill-center,
  .step1-pill-right {
    width: 100%;
    margin: 0;
  }
  .step1-action {
    width: 100%;
    margin: 16px 0 0;
  }

  /* 第二铲/第三铲：纵向堆叠，隐藏装饰土层与卡片重叠 */
  .prune-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 0;
  }
  .step2-scene {
    width: 92%;
    margin: 0;
  }
  .step3-title {
    width: 56%;
    margin: 0;
  }
  .step3-cards {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin-top: 0;
    background: none;
  }
  .step3-card-1,
  .step3-card-2,
  .step3-card-3 {
    width: 88%;
    max-width: 420px;
    margin: 0;
  }

  /* 图片放大查看器：小屏下放大图更宽、关闭按钮贴近屏幕边缘 */
  .img-viewer-pic {
    max-width: 94%;
    max-height: 82vh;
  }
  .img-viewer-close {
    top: 12px;
    right: 12px;
  }

  .footer {
    flex-direction: column;
  }
  .footer .footer-placeholder {
    display: none;
  }
  .footer .footer-info .footer-filing {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
}