/* ============================================================
   footer.css —— 首页页脚样式（4 个页面共用）
   提取自原始首页 index.html。
   注意：本文件位于 assets/css/ 下，CSS 里的 url() 是相对【本文件】解析的，
        所以必须写 ../images/xxx，写 assets/images/xxx 会 404。
   ============================================================ */

/* —— 页脚：深色图片背景（工厂机械臂实拍 + 深色遮罩）—— */
.footer{
  --footer-overlay:.90;            /* 遮罩透明度：越大越深 */
  border-top:none;
  background:
    linear-gradient(rgba(15,20,30,var(--footer-overlay)),rgba(15,20,30,var(--footer-overlay))),
    url("../images/robotic-line.jpg") center/cover no-repeat fixed;
}
/* iOS 移动端不支持 fixed 背景 attachment，小屏回退为普通滚动背景 */
@media (max-width:1024px){
  .footer{ background-attachment:scroll; }
}

/* 5 列：品牌 / Quick Links / Capabilities / Support / Subscribe（v1.13.0 新增 Support）
   比例按各列实际内容排：品牌列最宽，三条链接列接近等宽，订阅列略宽（表单需要横向空间）。
   ≤1200px 落回 2 列（见文件末响应式段）。 */
.footer__inner{
  display:grid; grid-template-columns:1.8fr .95fr 1.05fr .95fr 1.15fr; gap:38px; padding:74px 0 54px;
}

/* —— 品牌列 —— */
/* 页脚 logo 文字改白色（全局 .logo__text 是深色，给头部白底用的） */
.footer .logo__text{ color:#fff; }
.footer .logo__text em{ color:var(--accent-2); }   /* METAL 用亮金，深底上更清晰 */
.footer__brand h3{
  font-family:"Manrope",Arial,sans-serif; font-size:17px; font-weight:700;
  margin:20px 0 14px; color:#fff;
}
.footer__brand p{ color:rgba(255,255,255,.62); font-size:14.5px; }
/* 社交圆钮：几何与动效在这里（36px 圆 / hover 抬升 3px）。
   颜色由 style.css 的 .social-link 系列统一提供（v1.12.5 起页脚三个 <a> 也挂了
   class="social-link social-link--fb|li|yt"）→ 实心品牌圆底 + 白图标；
   `.social-link.social-link` (0,2,0) / `:hover` (0,3,0) 分别压过下面两条的 (0,1,1) / (0,2,1)。
   即：此处的「透明底 + 半透明白图标」与「hover 变金色」只对**没挂类**的社交圆钮生效（目前没有）。 */
.footer__social{ display:flex; gap:10px; margin-top:20px; }
.footer__social a{
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.72); background:transparent;
  transition:color .3s, background-color .3s, border-color .3s, transform .3s;
}
.footer__social a:hover{ color:#20150a; background:var(--accent); border-color:var(--accent); transform:translateY(-3px); }

/* —— 链接列 —— */
.footer__nav h4{
  font-family:"Manrope",Arial,sans-serif; font-size:15px; font-weight:700; margin-bottom:18px;
  color:#fff;
}
.footer__nav ul{ display:grid; gap:11px; }
.footer__nav a{ color:rgba(255,255,255,.60); font-size:14.5px; transition:color .3s, padding-left .3s; }
.footer__nav a:hover{ color:var(--accent-2); padding-left:5px; }

/* —— 订阅列（替代原 Contact）—— */
.footer__sub h4{
  font-family:"Manrope",Arial,sans-serif; font-size:15px; font-weight:700; margin-bottom:18px;
  color:#fff;
}
.footer__sub-desc{ color:rgba(255,255,255,.62); font-size:14.5px; line-height:1.7; }
.footer__sub-form{
  margin-top:20px; display:flex; gap:10px; flex-wrap:wrap;
}
.footer__sub-form input{
  flex:1 1 180px; min-width:0; height:46px; padding:0 16px;
  border:1px solid rgba(255,255,255,.22); border-radius:99px;
  background:rgba(255,255,255,.08); color:#fff; font-size:14px;
  outline:none; transition:border-color .3s, background-color .3s;
}
.footer__sub-form input::placeholder{ color:rgba(255,255,255,.45); }
.footer__sub-form input:focus{ border-color:var(--accent); background:rgba(255,255,255,.12); }
.footer__sub-form button{
  flex:0 0 auto; height:46px; padding:0 26px; border:none; border-radius:99px; cursor:pointer;
  background:linear-gradient(100deg,var(--accent-2),var(--accent));
  color:#20150a; font-family:"Manrope",Arial,sans-serif; font-size:14.5px; font-weight:700;
  transition:filter .3s, transform .3s;
}
.footer__sub-form button:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.footer__sub-note{ margin-top:10px; font-size:13.5px; min-height:18px; color:var(--accent-2); }
.footer__sub-note.err{ color:#ff9d8a; }

/* —— 底栏 —— */
.footer__bar{ border-top:1px solid rgba(255,255,255,.12); }
.footer__bar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0;
  font-size:13.5px; color:rgba(255,255,255,.45);
}
.footer__bar a:hover{ color:var(--accent-2); }

/* ============================================================
   装饰层（页脚用到的 5 条）—— 从首页 C-12 段摘录
   ============================================================ */
.deco{ position:absolute; pointer-events:none; z-index:0; }
.footer{ position:relative; overflow:hidden; }
.footer > .container{ position:relative; z-index:1; }

/* 金色点阵 */
.deco--dots{
  inset:0;
  background-image:radial-gradient(rgba(232,163,61,.30) 1.4px, transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(110% 80% at 12% 6%, #000, transparent 70%);
          mask-image:radial-gradient(110% 80% at 12% 6%, #000, transparent 70%);
  opacity:.6;
}
/* 点阵（底部起渐隐，用于页脚） */
.deco--dots-b{
  -webkit-mask-image:radial-gradient(90% 70% at 50% 100%, #000, transparent 72%);
          mask-image:radial-gradient(90% 70% at 50% 100%, #000, transparent 72%);
  opacity:.45;
}

/* 单个大圆环 */
.deco--ring{
  width:320px; height:320px; left:-110px; bottom:-70px; border-radius:50%;
  border:1px solid rgba(232,163,61,.40);
}
.deco--ring-tr{
  left:auto; right:4%; top:8%; bottom:auto;
  width:240px; height:240px; border-color:rgba(232,163,61,.32);
}

/* ============================================================
   响应式（与首页 index.html 的断点完全一致）
   ============================================================ */
@media (max-width:1200px){
  .footer__inner{ grid-template-columns:1fr 1fr; gap:38px; }
}

/* —— ≤860px：页脚改「两栏 + 三条通栏」版式（v1.13.3）——
   与 style.css 里同名媒体查询逐字一致（footer.css 后加载，实际生效的是本文件；
   两份都写是沿用本项目既有约定，避免以后有人改错文件）。
   目的：手机端 5 列塌成 1 列后页脚高达 1465px（390px 视口 ≈1.7 屏），这里把它压掉三分之一。
   版式：品牌列通栏 → 「Quick Links | Capabilities」并排两栏 → Support 通栏（3 条横排一行）
        → Subscribe 通栏。 */
@media (max-width:860px){
  .footer__inner{
    grid-template-columns:1fr 1fr;
    gap:30px 20px;            /* 行间距 30（原 38）、列间距 20 */
    padding:48px 0 34px;      /* 上下内边距 74/54 → 48/34 */
  }
  /* 通栏三块：品牌 / Support / 订阅 */
  .footer__brand,
  .footer__nav.footer__nav--support,
  .footer__sub{ grid-column:1 / -1; }
  /* Support 只有 3 条短链，通栏后横排（原来竖着占 3 行 ≈96px） */
  .footer__nav.footer__nav--support ul{
    display:flex; flex-wrap:wrap; gap:9px 22px;
  }
}

/* —— ≤640px：手机 —— */
@media (max-width:640px){
  .footer__inner{ gap:26px 18px; padding:40px 0 28px; }
  /* 栏目标题收紧（原 margin-bottom:18px / 15px） */
  .footer__nav h4,
  .footer__sub h4{ font-size:14px; margin-bottom:12px; }
  .footer__brand h3{ margin:16px 0 10px; }
  .footer__social{ margin-top:14px; }
  .footer__nav ul{ gap:2px; }
  /* 链接改成整行可点：a 原是 inline（盒子仅 17px 高），手指容易点到行间空白。
     改 block + 上下 4px 内边距 → 25px 高、整行宽的热区（≥24px 触控建议值），
     行距由 ul 的 gap 补偿（9px → 2px），总行高不变甚至更紧凑。 */
  .footer__nav a{ display:block; padding:4px 0; font-size:14px; }
  .footer__sub-desc{ font-size:14px; }
  .footer__sub-form{ margin-top:14px; }
  .footer__bar-inner{ flex-direction:column; text-align:center; gap:8px; padding:16px 0; }
  .deco--dots{ opacity:.45; }
  .deco--ring-tr{ width:170px; height:170px; right:-40px; }
}