/* ============================================================
   梦之源官网 - footer.css  底部专用样式
   依据 Figma 设计稿「底部」#4:639 实现:
   - PC 底部: 深色 #222426 + 动态光晕 / 电话地址 / 5列导航 / 底部行
   - 移动端底部: 品牌区 / 呼叫按钮 / 导航3列 / 地址 / 关注+版权
   (光晕吸附交互在 js/main.js footerGlow)
   ============================================================ */
/* ============================================================
   底部 Footer (设计稿「底部」#4:639 1920×526)
   - 深色动态背景: CSS 光晕流动动画 (footer-glow, 纯 CSS 无图)
   - 左: 电话 + 3 地址; 右: 5 列导航
   - 底部行: logo + 友情链接 + 关注我们 + 版权/备案
   ============================================================ */
.footer {
  position: relative;
  background: #222426;           /* 设计稿底部底色 #222426 */
  color: #B4BDCC;
  overflow: hidden;
}
/* 动态光晕背景层: 设计稿两个高斯模糊光斑 (右上 #3888FC + 左下 #005AFA)
   - CSS: 光晕样式 + 透明度呼吸动画
   - JS: 游动 + 鼠标吸附 (main.js footerGlow) */
.footer-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.footer-glow-r,
.footer-glow-l {
  position: absolute;
  width: 800px;
  height: 640px;
  filter: blur(90px);
  will-change: transform;
  animation: footerGlowBreathe 6s ease-in-out infinite alternate;
}
/* 右上亮蓝光晕 #3888FC */
.footer-glow-r {
  right: -140px;
  top: 14%;
  background: radial-gradient(closest-side, rgba(56, 136, 252, .5), transparent 72%);
}
/* 左下主蓝光晕 #005AFA (呼吸错峰) */
.footer-glow-l {
  left: -180px;
  bottom: -110px;
  background: radial-gradient(closest-side, rgba(0, 90, 250, .45), transparent 72%);
  animation-delay: -3s;
}
/* 光晕呼吸 (位置由 JS 游动 + 鼠标吸附控制) */
@keyframes footerGlowBreathe {
  0%   { opacity: .5; }
  100% { opacity: .95; }
}
.footer-inner {
  position: relative;
  z-index: 1;
  max-width: calc(1440px + 48px);   /* 与主体 container 一致 (base.css --container: 1440px) */
  margin: 0 auto;
  padding: 60px 24px 0;              /* 同 container: 24px 边距, 窄屏自然收缩 */
  display: flex;
  align-items: flex-start;
}
/* 左列: 电话 + 地址 (设计稿 238-571 固定 333px 宽, 保持地址可读) */
.footer-contact {
  width: 360px;
  min-width: 360px;            /* 容纳地址正文单行 (最长 336px + 余量) */
  flex: none;
}
.fp-num {
  font-size: 20px;               /* 设计稿 20px Inter Bold */
  font-weight: 700;
  line-height: 24px;
  color: #fff;
  font-family: var(--font-num);
}
.fp-time {
  margin-top: 6px;
  font-size: 14px;               /* 设计稿 14 513 */
  line-height: 24px;
  color: #BCC2CC;
}
.footer-addr { margin-top: 26px; }
.footer-addr p {
  font-size: 14px;
  line-height: 24px;
  color: #BCC2CC;              /* 设计稿地址正文 #BCC2CC */
  margin-bottom: 14px;
  white-space: nowrap;         /* 正文一行完整显示, 不换行 */
  overflow: hidden;
  letter-spacing: -.01em;
}
.footer-addr strong {
    color: #fff;
    font-weight: 666;
    display: block;              /* 设计稿: 「集团总部：」单独一行 */
}
/* 垂直分割线 (设计稿 x=691, #505459) */
.footer-divider {
  flex: none;
  width: 1px;
  height: 320px;
  background: #505459;
  margin: 0 5%;                   /* 设计稿间距 120/1492 ≈ 8% (两侧各 5%, 平衡导航宽度) */
}
/* 右列: 5 列导航 (设计稿 x=755 起, 列宽 148, 间距 48; 列均匀铺满右侧) */
.footer-nav {
  display: flex;
  gap: 24px;
  flex: 1;
  min-width: 0;
}
.fn-col {
  flex: 1 1 0;                   /* 列均分右侧空间, 铺满不留白 */
  min-width: 0;
}
.fn-col h4 {
  font-size: 14px;
  font-weight: 666;
  line-height: 20px;
  color: #fff;
  margin-bottom: 16px;
  white-space: nowrap;
}
.fn-col a {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: #B4BDCC;
    white-space: nowrap;
    transition: color .3s var(--ease);
    padding-bottom: 15px;
}
.fn-col a:hover { color: #fff; }
/* 底部行 (设计稿 y=422, 内容列 x=238, 水平分割线 #505459) */
.footer-bottom {
    position: relative;
    z-index: 1;
    max-width: calc(1440px + 48px);
    margin: 0 auto;
    padding: 18px 24px 15px;
}
.fb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fb-left { display: flex; align-items: center; gap: 36px; }
.fb-logo { height: 36px; width: auto; }          /* 设计稿反白logo 124×36 */
.fb-links { display: flex; gap: 20px; }
.fb-links a {
  font-size: 14px;                               /* 设计稿 14 489 */
  color: #9DA5B2;                                /* 设计稿 #9DA5B2 */
  transition: color .3s var(--ease);
}
.fb-links a:hover { color: #fff; }
.fb-follow { display: flex; align-items: center; gap: 14px; }
.fb-follow-t {
  font-size: 14px;
  color: #9DA5B2;
  margin-right: 6px;
}
.fb-icon {
  position: relative;                             /* 二维码浮层定位基准 */
  width: 30px;                                   /* 设计稿图标 30×30 */
  height: 30px;
  display: block;
  transition: filter .3s var(--ease);
}
/* 只给「图标本身」提亮: 二维码浮层是 .fb-icon 的子元素,
   若把 filter 加在 .fb-icon 上, 弹出时二维码会跟着被提亮 → 颜色发白/发灰 */
.fb-icon:hover > img { filter: brightness(1.8); }
.fb-icon > img { width: 100%; height: 100%; display: block; }
/* 二维码浮层: hover 图标时向上弹出 */
.fb-qr {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 136px;
  background: #fff;
  border-radius: 6px;
  padding: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 20;
}
.fb-qr img { width: 100%; height: auto; display: block; border-radius: 4px; }
/* 倒箭头: 指向下方图标 (设计稿 16×10 倒三角) */
.fb-qr::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #fff;
}
.fb-icon:hover .fb-qr,
.fb-qr.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* ICP 备案链接 */
.fb-icp { color: #737780; text-decoration: none; transition: color .3s var(--ease); }
.fb-icp:hover { color: #fff; }
.fb-copy {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 15px;
    font-size: 12px;
    line-height: 20px;
    color: #737780;
    border-top: 1px solid #505459;
    padding-top: 18px;
}

/* Footer 响应式 */
/* ≤1600: 导航间距略收 (列由 flex 均分铺满) */
@media (max-width: 1600px) {
  .footer-nav { gap: 20px; }
}
@media (max-width: 1336px) {
  .footer-nav { gap: 16px; }
}
@media (max-width: 1100px) {
  .footer-inner { flex-direction: column; align-items: stretch; padding: 60px 48px 0; }
  .footer-divider { display: none; }               /* 垂直分割线移动端隐藏 */
  .footer-contact { width: 100%; }
  .footer-nav { flex-wrap: wrap; gap: 24px 40px; }
  .fn-col { flex: 1 1 160px; }
  .footer-bottom { padding: 18px 48px 26px; }
}
@media (max-width: 767px) {
  .footer-inner { padding: 48px 24px 0; }
  /* 左列: 电话 + 地址 */
  .footer-contact { width: 100%; }
  .fp-num { font-size: 20px; line-height: 22px; }
  .fp-time { font-size: 13px; }
  .footer-addr { margin-top: 20px; }
  .footer-addr p { font-size: 13px; line-height: 22px; margin-bottom: 12px; }
  /* 导航: 2 列网格, 覆盖桌面 148px 固定列宽 */
  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    margin-top: 40px;
  }
  .fn-col { width: auto; }
  .fn-col h4 { margin-bottom: 12px; }
  .fn-col a { padding: 3px 0; font-size: 13px; }
  /* 底部行: 竖排居中 */
  .footer-bottom { padding: 20px 24px 28px; }
  .fb-top { flex-direction: column; align-items: center; gap: 20px; }
  .fb-left { gap: 24px; }
  .fb-logo { height: 30px; }
  .fb-links a { font-size: 13px; }
  .fb-follow { gap: 12px; }
  .fb-copy { flex-direction: column; gap: 4px; align-items: center; text-align: center; font-size: 11px; }
  /* 二维码浮层移动端: 尺寸稍小, 点击切换 (JS) */
  .fb-qr { width: 120px; bottom: 38px; }
}

/* ============================================================
   移动端专用底部 (≤767px 显示, PC 隐藏)
   设计: 现代分层 — 品牌区 / 主蓝呼叫按钮 / 导航3列 / 地址 / 关注+版权
   ============================================================ */
.footer-mobile {
  display: none;                 /* 默认 (PC) 隐藏 */
}
@media (max-width: 767px) {
  .footer { display: none; }     /* PC 底部移动端隐藏 */
  .footer-mobile {
    display: block;
    position: relative;
    background: #222426;
    color: #B4BDCC;
    overflow: hidden;
  }
  .fm-inner {
    position: relative;
    z-index: 1;
    padding: 44px 24px 36px;
  }
  /* 品牌区: logo 居中 + 标语 */
  .fm-brand { text-align: center; }
    .fm-logo {
        height: 36px;
        width: auto;
        display: block;
        margin: 0 auto;
    }
  .fm-slogan {
    margin-top: 10px;
    font-size: 12px;
    line-height: 20px;
    color: #9DA5B2;
    letter-spacing: .04em;
  }
  /* 呼叫按钮: 主蓝渐变胶囊, 居中突出 */
  .fm-call {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 26px auto 0;
    width: 100%;
    max-width: 320px;
    height: 68px;
    border-radius: 1000px;
    background: linear-gradient(135deg, #1E5FD8 0%, #3888FC 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(33, 104, 229, .35);
    text-decoration: none;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .fm-call:active {
    transform: scale(.98);
    box-shadow: 0 6px 18px rgba(33, 104, 229, .3);
  }
  /* 第一行: 图标 + 号码 */
  .fm-call-line {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .fm-call-line svg { width: 18px; height: 18px; flex: none; }
  .fm-call-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    font-family: var(--font-num);
  }
  /* 第二行: 服务时间 (在电话下方) */
  .fm-call-time {
    font-size: 11px;
    opacity: .85;
    line-height: 16px;
  }
  /* 导航 3 列 (上下细线框住, 居中) */
  .fm-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 8px;
    margin-top: 30px;
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
  }
  .fm-nav a {
    font-size: 14px;
    line-height: 24px;
    color: #B4BDCC;
    text-decoration: none;
    transition: color .3s var(--ease);
  }
  .fm-nav a:active { color: #fff; }
  /* 地址: 左对齐紧凑 */
  .fm-addr {
    margin-top: 24px;
    text-align: left;
  }
  .fm-addr p {
    font-size: 12px;
    line-height: 22px;
    color: #9DA5B2;
    margin-bottom: 8px;
    letter-spacing: -.01em;
    text-align: center;
  }
  .fm-addr strong { color: #fff; font-weight: 666; margin-right: 2px; }
  /* 底部: 关注 + 版权 */
  .fm-foot {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .fm-follow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
  }
  .fm-follow-t {
    font-size: 13px;
    color: #9DA5B2;
    margin-right: 6px;
  }
  .fm-copy {
    margin-top: 18px;
    text-align: center;
    font-size: 11px;
    line-height: 20px;
    color: #737780;
  }
  .fm-copy .fb-icp {
    display: inline-block;
    color: #737780;
    text-decoration: none;
    margin-left: 8px;
  }
  .fm-copy .fb-icp:hover { color: #fff; }
  /* 移动端二维码浮层 (复用 .fb-qr) */
  .fm-follow .fb-qr { width: 120px; bottom: 38px; }
}