/*
 * 页脚版式，全站共用。
 *
 * 为什么会有这个文件：这套规则原本只写在 Astro 组件
 * src/components/home/FooterSection/styles.css 里，而组件样式只打包进首页。
 * 关于页和 12 个案例页是 public/ 下的静态 HTML，拿不到它，于是退回旧运行时的
 * 原始版式。实测 1440px：首页联系区容器宽 1296、12 列，地址 1/5、咨询 7/3、
 * 商务 10/3 三栏铺满；静态页容器只有 634（页面内容区的 49%），6 列，
 * 咨询与商务同为 4/span 3 —— 两块叠在同一列里，右半屏结构性空着。
 *
 * 修法选择：responsive-overrides.css 虽然两边都加载，但它比 Astro 包更早，
 * 把规则挪过去会改变首页的层叠顺序，有回归风险。所以抽成本文件只给静态页加载，
 * 首页仍用组件里那份。
 *
 * 两份内容重复，靠 tests/footer-layout.spec.ts 锁住：
 * 它逐项比对首页与关于页同名节点的 grid-column，不一致即失败。
 * 改页脚版式时两份都要改，测试会立刻发现漏改。
 */

/*
 * Ownership boundary: FooterSection only.
 * Keep every new selector rooted at #footer-section.
 */

#footer-section {
  min-height: clamp(34rem, 68vh, 46rem);
  padding-top: clamp(6rem, 8vw, 8rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  background: var(--huiling-dark, #090b0a);
  color: #f7f8fb;
}

#footer-section #footer-bg {
  background:
    radial-gradient(
      circle at 88% 4%,
      rgba(107, 61, 242, 0.12),
      transparent 28%
    ),
    var(--huiling-dark, #090b0a);
}

#footer-section #footer-top {
  flex-grow: 0;
  margin-top: 0;
}

#footer-section #footer-middle {
  flex: 1;
  align-items: end;
}

#footer-section #footer-middle-contact {
  grid-column: 1 / span 12;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--huiling-dark-line, rgba(255, 255, 255, 0.14));
  font-size: clamp(1rem, 1.2vw, 1.25rem);
}

#footer-section #footer-contact-address {
  grid-column: 1 / span 5;
  max-width: 26rem;
  line-height: 1.55;
}

#footer-section .footer-address-line:first-child {
  margin-bottom: 1.25rem;
  color: #fff;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}

#footer-section .footer-address-line:not(:first-child),
#footer-section #footer-enquires-header,
#footer-section #footer-business-header {
  color: rgba(247, 248, 251, 0.62);
}

#footer-section #footer-contact-enquires {
  grid-column: 7 / span 3;
  margin-top: 0;
}

#footer-section #footer-contact-business {
  grid-column: 10 / span 3;
  margin-top: 0;
}

#footer-section #footer-enquires-link,
#footer-section #footer-business-link {
  margin-top: 0.8rem;
  color: #f7f8fb;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
}

#footer-section #footer-enquires-link::before,
#footer-section #footer-business-link::before,
#footer-section #footer-bottom-labs::before {
  background: var(--huiling-violet, #6b3df2);
}

#footer-section #footer-bottom {
  margin-top: clamp(4.5rem, 7vw, 7rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--huiling-dark-line, rgba(255, 255, 255, 0.14));
  color: rgba(247, 248, 251, 0.66);
  font-family: IBMPlexMono, monospace;
  font-size: clamp(0.75rem, 0.84vw, 0.875rem);
  letter-spacing: 0.04em;
}

#footer-section #footer-bottom-labs {
  color: #f7f8fb;
}

#footer-section #footer-bottom-up {
  background: var(--huiling-brand, #1a2ffb);
  box-shadow: 0 0.75rem 2rem rgba(26, 47, 251, 0.24);
}

@media (max-width: 1000px) {
  #footer-section {
    min-height: auto;
  }

  #footer-section #footer-middle {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #footer-section #footer-middle-contact {
    grid-row: auto;
    grid-column: 1 / span 6;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 3rem;
  }

  #footer-section #footer-contact-address {
    grid-column: 1 / span 6;
  }

  #footer-section #footer-contact-enquires {
    grid-column: 1 / span 3;
  }

  #footer-section #footer-contact-business {
    grid-column: 4 / span 3;
  }

  #footer-section #footer-bottom {
    margin-top: 5rem;
    padding-right: 4.5rem;
  }
}

@media (max-width: 520px) {
  #footer-section {
    padding-top: 5.5rem;
    padding-bottom: 2rem;
  }

  #footer-section #footer-contact-enquires,
  #footer-section #footer-contact-business {
    grid-column: 1 / span 6;
  }

  #footer-section #footer-contact-business {
    margin-top: -1rem;
  }

  #footer-section #footer-bottom {
    row-gap: 1.2rem;
    margin-top: 4rem;
  }

  #footer-section #footer-bottom-up {
    right: 0;
    bottom: 0;
  }
}