/* =============================================================
 * custom.css —— 族谱定制页专属样式
 * 数据来源：Figma 设计稿 node 471:1831 (Slide 16:9 - 18)
 * 整页结构（按从上到下顺序）：
 *   1. 公共头部导航 (复用 public.css)
 *   2. Banner —— 1920x892 山水图 + 9 个 SVG 文字图（靠左、三组三排）
 *   3. 模块① 族谱高端礼盒 —— 1920x1082 大背景 + 标题 + 定制选配按钮
 *   4. 模块① 副图（两张小图并列）
 *   5. 模块② 绢丝族谱 —— 1920x1080 大背景 + 标题 + 定制选配按钮
 *   6. 模块② 副图（两张小图并列）
 *   7. 公共页脚 (复用 public.css)
 * 关键设计点：
 *   ① body 背景白色 (与 features 灰不同)
 *   ② banner 九字靠左、三组三排
 *   ③ 两大模块统一间距
 * ============================================================= */

/* ---------- 1. 整页容器 ---------- */
.page-custom {
  width: 100%;
  background: #fff;              /* 用户特别要求：白色背景 */
  position: relative;
}

/* =============================================================
 * 区块一：Banner
 * Figma 469:1147 1920x892 (top 69)
 * 9 个字 469:1107-1128 → 靠左、三组三排布局
 *   Group 469:1108 (前 4 个字) 469:1128 (后 2 个字)
 *   imgGroup140 469:1046 装饰在右侧
 * ============================================================= */
.custom-banner {
  position: relative;
  width: 100%;
  height: 892px;
  background: url('../image/banner-custom.png') center/cover no-repeat;
  overflow: hidden;
}

/* 9 个字 —— 靠左、三组三排
 * 9 个字拆分为：组1 = 國/有/史, 组2 = 邑/有/誌, 组3 = 家/有/譜
 * 每组一行，共三行
 */
.custom-banner .banner-words {
  position: absolute;
  left: 100px;                   /* 靠左：距左边 200px */
  top: 100px;                    /* 顶部留白 */
  display: flex;
  flex-direction: column;        /* 垂直排列 → 三组三排 */
  gap: 0;                     /* 组（行）之间垂直间距 */
}
.custom-banner .word-group {
  display: flex;
  align-items: center;
  gap: 15px;                     /* 组内字水平间距 */
}
.custom-banner .word-item {
  height: 110px;                 /* 每字统一高度（来自 Figma：原高 100~124） */
  max-width: 120px;
  width: auto;
  display: block;
}

/* =============================================================
 * 通用：两个大模块（族谱高端礼盒 / 绢丝族谱）
 * Figma 469:1149 (1920x1082) + 469:1151 (1920x1080)
 * 统一间距、统一结构
 * ============================================================= */
.custom-section {
  position: relative;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.custom-section .module-title {
  position: absolute;
  left: 186px;                   /* 与按钮左对齐 */
  top: 198px;                    /* 距模块顶部 198px (1181-983) */
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 48px;               /* Figma: 48px */
  color: var(--color-accent);    /* #B81C22 */
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

/* "定制选配"按钮
 * Figma 469:1185/1192: 265x68, 圆角 25px, 背景 rgba(195,13,35,0.31)
 * 文字 40px 白色 + 双箭头 icon
 */
.custom-section .customize-btn {
  position: absolute;
  left: 186px;
  top: 286px;                    /* 1269-983 = 286 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 265px;
  height: 68px;
  background: rgba(195, 13, 35, 0.31);
  border: 0;
  border-radius: 25px;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background .3s ease, transform .3s ease;
}
.custom-section .customize-btn:hover {
  background: rgba(195, 13, 35, 0.55);
  transform: translateY(-2px);
}
.custom-section .customize-btn .arrow {
  display: inline-flex;
  align-items: center;
  height: 24px;
}
.custom-section .customize-btn .arrow img { height: 24px; width: auto; display: block; }

/* 圆形装饰 100x100, left 419 top 1435 (模块① 内的浮动装饰) */
.custom-section .deco-circle {
  position: absolute;
  left: 419px;
  top: 452px;                    /* 1435-983 = 452 */
  width: 100px;
  height: 100px;
  z-index: 3;
}

/* =============================================================
 * 模块① 族谱高端礼盒
 * Figma 469:1149 1920x1082 (top 983)
 * ============================================================= */
.custom-mod-1 {
  aspect-ratio: 1920 / 1082;
  background-image: url('../image/custom-mod1-bg.png');
}

/* =============================================================
 * 模块① 副图（两张小图并列）
 * Figma 469:1154 (951x613 left 50%+486.5 top 2089)
 * Figma 469:1155 (949x613 left 50%-485.5 top 2089)
 * 居中并列、间距小
 * ============================================================= */
.custom-mod1-gallery {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 25px 0;                /* 上下 25px，左右 0 */
  display: flex;
  justify-content: center;
  gap: 25px;                     /* 两图间距 25px */
}
.custom-mod1-gallery img {
  width: calc((100% - 25px) / 2); /* 两张图 + 25px 间距撑满整行 */
  max-width: 100%;
  height: auto;
  display: block;
}

/* =============================================================
 * 模块② 绢丝族谱
 * Figma 469:1151 1920x1080 (top 2728)
 * ============================================================= */
.custom-mod-2 {
  aspect-ratio: 1920 / 1080;
  background-image: url('../image/custom-mod2-bg.png');
}
/* 绢丝族谱标题位置略有不同：top相对=2887-2728=159 */
.custom-mod-2 .module-title {
  left: 186px;                   /* 与按钮左对齐 */
  top: 159px;
}
/* 定制选配按钮：Figma 469:1192 left 186 top 2975 (top相对=2975-2728=247) */
.custom-mod-2 .customize-btn {
  top: 247px;
}

/* =============================================================
 * 模块② 副图（两张小图并列）
 * Figma 469:1156 (950x535 top 3832)
 * Figma 469:1157 (950x535 top 3832)
 * ============================================================= */
.custom-mod2-gallery {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 25px 0;                /* 上下 25px，左右 0 */
  display: flex;
  justify-content: center;
  gap: 25px;                     /* 两图间距 25px */
}
.custom-mod2-gallery img {
  width: calc((100% - 25px) / 2); /* 两张图 + 25px 间距撑满整行 */
  max-width: 100%;
  height: auto;
  display: block;
}

/* =============================================================
 * 入场动效适配
 * 关键类：title 淡入、按钮弹入、副图交错淡入
 * ============================================================= */
.wow { visibility: hidden; }

/* =============================================================
 * 响应式
 * ============================================================= */
@media (max-width: 1200px) {
  .custom-banner { height: 660px; }
  .custom-banner .banner-words { left: 80px; top: 160px; gap: 24px; }
  .custom-banner .word-item { height: 80px; }
  .custom-section .module-title { font-size: 36px; left: 60px; top: 120px; }
  .custom-section .customize-btn { left: 60px; top: 200px; width: 220px; height: 56px; font-size: 30px; }
  .custom-mod1-gallery, .custom-mod2-gallery { padding: 40px 20px; gap: 25px; }
  .custom-mod1-gallery img, .custom-mod2-gallery img { width: 48%; }
}

@media (max-width: 768px) {
  /* 防止副图入场动效（fadeInLeft/Right 平移）瞬态超出触发横向滚动条 */
  .page-custom main { overflow-x: hidden; }

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

  /* 大模块：取消固定宽高比，改为纵向流式布局，文字居中 */
  .custom-section {
    aspect-ratio: auto !important;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 36px 16px;
    background-size: cover !important;
    background-position: center;
  }
  .custom-section .module-title {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    font-size: 26px;
    text-align: center;
    white-space: normal;
  }
  .custom-section .customize-btn {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    font-size: 18px;
    width: 150px;
    height: 44px;
    border-radius: 22px;
    gap: 6px;
  }
  .custom-section .customize-btn .arrow,
  .custom-section .customize-btn .arrow img { height: 16px; }

  /* 圆形装饰：移动端隐藏，避免遮挡内容 */
  .custom-section .deco-circle { display: none; }

  /* 副图：单列堆叠，全宽展示 */
  .custom-mod1-gallery,
  .custom-mod2-gallery {
    padding: 20px 12px;
    gap: 16px;
    flex-direction: column;
    align-items: center;
  }
  .custom-mod1-gallery img,
  .custom-mod2-gallery img {
    width: 100%;
    max-width: 480px;
  }
}

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

  .custom-section { min-height: 260px; padding: 28px 14px; gap: 14px; }
  .custom-section .module-title { font-size: 22px; }
  .custom-section .customize-btn { font-size: 16px; width: 130px; height: 40px; }
}