/* ===========================================================
   Footer — light version matching live site (#F3F4F6-ish)
   =========================================================== */
.site-footer {
  flex: none; background: var(--color-surface); color: #666; font-size: var(--fs-sm); margin-top: 56px;
}
.footer-top { max-width: 1760px; margin: 0 auto; padding: 48px 80px 20px; display: flex; gap: 60px; }
.footer-brand { max-width: 480px; flex: none; }
.footer-logo { display: flex; align-items: center; gap: 8px; color: var(--color-primary); }
/* 91爱拍 矢量 logo：宽高都写死 —— 78×26 正好是字标自身 3:1 的比例（1893:631），
   只改一边会拉伸/留白，所以两处永远成比例一起改。
   flex:none 防止在 flex 行里被压扁，max-width:100% 保证极窄屏也撑不破容器；
   窄屏的档位在 responsive.css 的 Footer 段（≤768 / ≤480 各缩一档）。 */
.footer-logo svg { display: block; flex: none; width: 78px; height: 26px; max-width: 100%; }
.footer-logo .logo-bubble { width: 26px; height: 26px; border-radius: 8px 8px 8px 3px; }
.footer-logo .logo-bubble b { font-size: 11px; }
.footer-logo .logo-word { font-size: 19px; }
.footer-desc { margin-top: 18px; font-size: 13px; line-height: 1.9; color: #8a9099; }
.footer-social { display: flex; gap: 14px; margin-top: 20px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%; background: #2f3540; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.footer-social a:hover { background: var(--color-primary); color: #fff; }

.footer-cols { display: flex; gap: 72px; margin-left: auto; flex-wrap: wrap; }
/* SEO：页脚分组标题不属于页面内容结构，改用 div（.footer-col__title）；
   原 h4/h2 选择器保留，视觉零变化。 */
.footer-col h4, .footer-col h2, .footer-col__title { color: #333; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.footer-col a { display: block; padding: 6px 0; color: #777d86; font-size: 13px; }
.footer-col a:hover { color: var(--color-primary); }

.footer-bottom {
  max-width: 1760px; margin: 0 auto; padding: 18px 80px 30px;
  text-align: center; font-size: 12px; color: #9aa0a8; line-height: 2;
}
.footer-bottom a { color: #9aa0a8; }
.footer-bottom a:hover { color: var(--color-primary); }
.footer-bottom .beian { display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.footer-bottom .beian svg { width: 13px; height: 13px; flex: none; }

@media (max-width: 1200px) {
  .footer-top { padding: 40px 32px 16px; flex-wrap: wrap; gap: 36px; }
  .footer-cols { margin-left: 0; gap: 44px; }
  .footer-bottom { padding: 14px 32px 26px; }
}
@media (max-width: 768px) {
  .footer-top { padding: 32px 20px 10px; }
  .footer-cols { gap: 28px; }
  .footer-bottom { padding: 12px 20px 22px; }
}