/* =============================================================
 * download.css —— 软件下载页专属样式
 * 数据来源：Figma 设计稿 node 471:1830 (Slide 16:9 - 21)
 * 整页结构（按从上到下顺序）：
 *   1. 公共头部导航 (复用 public.css)
 *   2. Banner —— 与族谱定制页一致：白底、9 个 SVG 文字图（靠左、三组三排）
 *   3. 模块① 软件下载 —— 1920x1080 背景（毛笔字字帖）
 *      · 左侧：红色"软件下载"48px 标题 + 3 行功能说明 32px 黑色 + "点击下载"按钮 200x72
 *      · 右侧：手机下载图 683x797
 *   4. 模块② 多端软件支持 —— 1920x1064 棕色木纹背景
 *      · 顶部居中：白色 50px "多端软件支持" + 红色 7px 圆角下划线
 *      · 下方 2 个白色透明卡片：归源族谱APP / PC桌面端
 *   5. 公共页脚 (复用 public.css)
 * 关键设计点：
 *   ① body 背景白色（与族谱定制一致）
 *   ② banner 完全复用 custom.css 的结构（九字靠左三组三排）
 *   ③ 两大模块间距统一 25px
 * ============================================================= */

/* ---------- 1. 整页容器 ---------- */
.page-download {
  width: 100%;
  background: #fff;              /* 与族谱定制一致：白色背景 */
  position: relative;
}

/* =============================================================
 * 区块一：Banner（与族谱定制共用同一背景图与九字）
 * 复用 .custom-banner 样式，命名 .download-banner 以保持独立
 * ============================================================= */
.download-banner {
  position: relative;
  width: 100%;
  height: 892px;
  background: url('../image/banner-custom.png') center/cover no-repeat;
  overflow: hidden;
}
.download-banner .banner-words {
  position: absolute;
  left: 100px;                   /* 靠左 */
  top: 100px;
  display: flex;
  flex-direction: column;        /* 垂直排列 → 三组三排 */
  gap: 0px;                     /* 组（行）之间垂直间距 */
}
.download-banner .word-group {
  display: flex;
  align-items: center;
  gap: 15px;                     /* 组内字水平间距 */
}
.download-banner .word-item {
  height: 110px;                 /* 每字统一高度 */
  max-width: 120px;
  width: auto;
  display: block;
}

/* =============================================================
 * 区块二：模块① 软件下载
 * Figma 471:1828 底图 1920x1080 (top 985)
 * Figma 470:1815 "软件下载" 标题 48px 红色 Noto Serif SC Black (left 328, top 1307)
 * Figma 470:1822 3 行功能说明 32px 黑色 Noto Serif SC Medium
 * Figma 470:1824 "点击下载" 按钮 200x72 圆角 89.5px 黑边
 * Figma 471:1829 手机下载图 683x797 (left 859, top 1147)
 * Figma 470:1816 红色高亮装饰 22x22 (相对 top 1307)
 * Figma 470:1691 圆形装饰 100x100 (left 419, top 1435)
 * ============================================================= */
.download-mod-1 {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  background: url('../image/download-mod1-bg.png') center/cover no-repeat;
  overflow: hidden;
}

/* 左侧文字区 */
.download-mod-1 .mod1-content {
  position: absolute;
  left: 328px;                   /* Figma: left 328 */
  top: 190px;                    /* 1307-985 = 322 */
  z-index: 2;
}
.download-mod-1 .mod1-title {
  position: relative;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
    color: #F00;
    font-family: "Noto Serif SC";
    font-size: 48px;
    font-style: normal;
    font-weight: 900;
    line-height: 120px; /* 250% */
}
.download-mod-1 .mod1-title .title-deco {
  display: block;
  width: 127px;                   /* logo 图片适配 */
  height: auto;
  margin-bottom: 16px;
}

/* 3 行功能说明 */
.download-mod-1 .mod1-features {
  font-family: var(--font-serif);
  font-weight: 500;              /* Medium */
  font-size: 32px;
  color: #000;
  line-height: 130px;            /* Figma: 行高 111px */
  white-space: nowrap;
  margin: 0 0 60px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.download-mod-1 .mod1-features .features-line {
  width: 16px;
  height: auto;
  flex-shrink: 0;
    margin-right: 20px;
}
.download-mod-1 .mod1-features .features-text p {
  margin: 0;
}

/* "点击下载"按钮
 * Figma 470:1824 200x72 圆角 89.5px 黑色边框
 * Figma 470:1826 30px 黑色 Noto Serif SC Black
 */
.download-mod-1 .download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 72px;
  background: none;
  border: 3px solid #000;        /* Figma: 黑色 3px 边 */
  border-radius: 89.5px;         /* 椭圆 */
  color: #000;
  font-family: var(--font-serif);
  font-weight: 900;              /* Black */
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: all .3s ease;
}
.download-mod-1 .download-btn:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
}

/* 右侧手机图 */
.download-mod-1 .mod1-phone {
  position: absolute;
  right: 440px;                  /* 1920-859-683 = 378（保守） */
  top: 190px;                    /* 1147-985 = 162 */
  width: 683px;
  height: 797px;
  z-index: 2;
  object-fit: contain;
}

/* 圆形装饰（左上） */
.download-mod-1 .mod1-circle {
  position: absolute;
  left: 419px;
  top: 450px;                    /* 1435-985 = 450 */
  width: 100px;
  height: 100px;
  z-index: 1;
}

/* =============================================================
 * 区块三：模块② 多端软件支持
 * Figma 470:1760 大背景 1920x1064 (top 2094) 棕色木纹
 * Figma 470:1779 居中"多端软件支持" 50px 白色 (left 50%, top 2200)
 * Figma 470:1775 红色下划线 7px 圆角 4px (left 50%, top 2286, w 103)
 * Figma 470:1761/1762 两个白色透明卡片 567x496 (圆角 5px)
 *   卡片间距：987-366-567 = 54px
 * Figma 470:1765/1766 圆图标 128x128
 * Figma 470:1771/1774 卡片标题 32px 白色
 * Figma 470:1772/1773 卡片副标题 28px 白色
 * Figma 470:1763/1764 卡片描述 20px 白色
 * ============================================================= */
.download-mod-2 {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1064;
  background: url('../image/download-mod2-bg.png') center/cover no-repeat;
  overflow: hidden;
}

/* 标题区 */
.download-mod-2 .mod2-title {
  position: absolute;
  left: 50%;
  top: 106px;                    /* 2200-2094 = 106 */
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-weight: 700;              /* Bold */
  font-size: 50px;               /* Figma: 50px */
  color: #fff;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  margin: 0;
}
.download-mod-2 .mod2-underline {
  position: absolute;
  left: 50%;
  top: 192px;                   /* 2286-2094 = 192 */
  transform: translateX(-50%);
  width: 103px;
  height: 7px;
  background: var(--color-accent);
  border-radius: 4px;
}

/* 两张卡片容器 */
.download-mod-2 .mod2-cards {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 325px;                    /* 2419-2094 = 325 */
  width: 1400px;                 /* 567*2 + 54 = 1188 */
  display: flex;
  gap: 86px;
  z-index: 2;
}
.download-mod-2 .mod2-card {
  position: relative;
    width: 680px;
    height: 550px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 30px 30px;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.download-mod-2 .mod2-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* 卡片内的圆图标 */
.download-mod-2 .mod2-icon {
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 31px;
  background: rgba(255, 255, 255, 0.50);
  border-radius: 50%;
}
.download-mod-2 .mod2-icon img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* 卡片标题 32px 白色 */
.download-mod-2 .mod2-card-title {
  font-family: var(--font-serif);
  font-weight: 700;              /* Bold */
  font-size: 38px;
  color: #fff;
  line-height: 1;
  margin: 0 0 50px 0;
  text-align: center;
    letter-spacing: 3px;
}
.mod2-card-subss{

    letter-spacing: 0px;
}
/* 卡片副标题 28px 白色 */
.download-mod-2 .mod2-card-sub {
  font-family: var(--font-serif);
  font-weight: 700;              /* Bold */
  font-size: 28px;
  color: #fff;
  line-height: 1;
  margin: 0 0 21px 0;
  text-align: center;
}
/* 卡片描述 20px 白色 */
.download-mod-2 .mod2-card-desc {
  font-family: var(--font-serif);
  font-weight: 500;              /* Medium */
  font-size: 20px;
  color: #fff;
  line-height: 1.5;
  text-align: center;
  width: 70%;
}

/* =============================================================
 * 通用间距：两模块之间 25px（用户特别要求）
 * 由于模块② 自带 aspect-ratio + 内部元素定位，模块间通过容器 margin 控制
 * ============================================================= */
.download-mod-2 { margin-top: 25px; }

/* =============================================================
 * 入场动效
 * ============================================================= */
.wow { visibility: hidden; }

/* =============================================================
 * 响应式
 * ============================================================= */
@media (max-width: 1200px) {
  .download-banner { height: 660px; }
  .download-banner .banner-words { left: 80px; top: 160px; gap: 24px; }
  .download-banner .word-item { height: 80px; }

  .download-mod-1 .mod1-content { left: 60px; top: 240px; }
  .download-mod-1 .mod1-title { font-size: 36px; margin-bottom: 60px; }
  .download-mod-1 .mod1-features { font-size: 24px; line-height: 80px; }
  .download-mod-1 .download-btn { width: 160px; height: 60px; font-size: 24px; }
  .download-mod-1 .mod1-phone { width: 500px; height: 580px; right: 40px; top: 120px; }

  .download-mod-2 .mod2-title { font-size: 40px; top: 80px; }
  .download-mod-2 .mod2-underline { top: 150px; }
  .download-mod-2 .mod2-cards { left: 60px; top: 240px; width: auto; gap: 24px; padding: 0 60px; }
  .download-mod-2 .mod2-card { width: 100%; max-width: 480px; height: 420px; }
  .download-mod-2 .mod2-card-title { font-size: 26px; }
  .download-mod-2 .mod2-card-sub { font-size: 22px; }
  .download-mod-2 .mod2-card-desc { font-size: 16px; }
}

@media (max-width: 768px) {
  .page-download main { overflow-x: hidden; }

  .download-banner { height: 320px; }
  .download-banner .banner-words { left: 16px; top: 60px; gap: 10px; }
  .download-banner .word-group { gap: 6px; }
  .download-banner .word-item { height: 40px; max-width: 50px; }

  /* 模块①：取消固定宽高比，改为纵向流式布局 */
  .download-mod-1 {
    aspect-ratio: auto !important;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 40px 20px;
    background-position: center;
    background-size: cover !important;
  }
  .download-mod-1 .mod1-content {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
  }
  .download-mod-1 .mod1-title {
    font-size: 28px;
    line-height: 1.35;
    margin-bottom: 8px;
  }
  .download-mod-1 .mod1-title .title-deco {
    width: 80px;
    margin-bottom: 10px;
  }
  .download-mod-1 .mod1-features {
    font-size: 16px;
    line-height: 2.15;
    margin: 0 0 28px 0;
    white-space: normal;
    align-items: flex-start;
  }
  .download-mod-1 .mod1-features .features-line {
    width: 14px;
    height: 242px;
    margin-right: 14px;
    object-fit: fill;
    align-self: flex-start;
  }
  .download-mod-1 .download-btn {
    width: 140px;
    height: 48px;
    font-size: 20px;
  }
  .download-mod-1 .mod1-phone { display: none; }
  .download-mod-1 .mod1-circle { display: none; }

  /* 模块②：取消固定宽高比，纵向流式 */
  .download-mod-2 {
    aspect-ratio: auto !important;
    min-height: 857px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 40px 16px 48px;
    background-position: center;
    background-size: cover !important;
  }
  .download-mod-2 .mod2-title {
    position: static !important;
    transform: none !important;
    font-size: 26px;
    text-align: center;
  }
  .download-mod-2 .mod2-underline {
    position: static !important;
    transform: none !important;
    width: 60px;
    height: 5px;
  }
  .download-mod-2 .mod2-cards {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 0;
  }
  .download-mod-2 .mod2-card {
    position: static;
    width: 100%;
    height: auto;
    min-height: 220px;
    padding: 28px 18px;
  }
  .download-mod-2 .mod2-card:nth-child(2) { display: none; }
  .download-mod-2 .mod2-icon { width: 64px; height: 64px; margin-bottom: 16px; }
  .download-mod-2 .mod2-card-title { font-size: 20px; margin-bottom: 12px; }
  .download-mod-2 .mod2-card-sub { font-size: 16px; margin-bottom: 14px; }
  .download-mod-2 .mod2-card-desc { font-size: 14px; width: 100%; }
}

@media (max-width: 480px) {
  .download-banner { height: 260px; }
  .download-banner .banner-words { left: 14px; top: 50px; gap: 8px; }
  .download-banner .word-item { height: 32px; max-width: 40px; }

  .download-mod-1 { min-height: 543px; padding: 32px 16px; gap: 20px; }
  .download-mod-1 .mod1-title { font-size: 24px; line-height: 1.35; }
  .download-mod-1 .mod1-features { font-size: 15px; line-height: 2.15; margin-bottom: 24px; }
  .download-mod-1 .mod1-features .features-line { width: 12px; height: 226px; margin-right: 12px; }
  .download-mod-1 .mod1-features .features-text { min-width: 0; }
  .download-mod-1 .download-btn { width: 128px; height: 44px; font-size: 18px; }

  .download-mod-2 { min-height: 857px; gap: 24px; padding: 36px 15px 42px; }
  .download-mod-2 .mod2-title { font-size: 23px; }
  .download-mod-2 .mod2-card { min-height: 230px; padding: 24px 16px; }
  .download-mod-2 .mod2-icon { width: 56px; height: 56px; margin-bottom: 12px; }
  .download-mod-2 .mod2-card-title { font-size: 18px; }
  .download-mod-2 .mod2-card-sub { font-size: 15px; }
  .download-mod-2 .mod2-card-desc { font-size: 13px; }
}

/* Final mobile layout overrides. Keep these last so shared responsive rules cannot
 * reintroduce the desktop absolute positioning on narrow screens. */
@media (max-width: 768px) {
  .page-download .wow {
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
  }
  .download-mod-1 {
    min-height: 543px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    justify-content: flex-start !important;
    padding: 6vw 0 7vw 15.8vw !important;
  }
  .download-mod-1 .mod1-content { position: static !important; width: 84.2vw !important; }
  .download-mod-1 .mod1-title {
    display: block !important;
    font-size: clamp(24px, 7.1vw, 48px) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  .download-mod-1 .mod1-title .title-deco {
    width: 18.8vw !important;
    max-width: 127px !important;
    margin: 0 0 7.8vw !important;
  }
  .download-mod-1 .mod1-features {
    margin: 10.5vw 0 7vw !important;
    gap: 5vw !important;
    font-size: clamp(16px, 4.75vw, 32px) !important;
    line-height: 19.2vw !important;
    white-space: nowrap !important;
  }
  .download-mod-1 .mod1-features .features-line {
    height: 40.5vw !important;
    width: 2vw !important;
    margin: 8.5vw 0 0 !important;
  }
  .download-mod-1 .download-btn { margin-left: 0 !important; }
  .download-mod-1 .mod1-phone, .download-mod-1 .mod1-circle { display: none !important; }
  .download-mod-2 { height: auto !important; min-height: 857px !important; aspect-ratio: auto !important; margin-top: 0 !important; }
  .download-mod-2 .mod2-card:nth-child(2) { display: flex !important; }
}