/* fill-images.css
   公共图片填充样式 — 给 20 套模板的占位 div 注入真实背景图
   匹配规则：按 data-lightbox 属性的关键词对应 13 类业务作品图
   + 给 about-img 团队照区域赋办公场景图
*/
/* 个性字体由 fill-brands.js 动态注入 <link> 加载（避免 CSS @import 兼容问题） */
/* 通用：保证背景图填满容器，并消除原模板的渐变占位 */
[data-lightbox]{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
/* 移除原模板占位伪元素覆盖层（::before / ::after 都可能用作渐变占位） */
.biz-img::before,.biz-img::after,
.gallery-img::before,.gallery-img::after,
.masonry-img::before,.masonry-img::after,
.work-img::before,.work-img::after,
.portfolio-img::before,.portfolio-img::after,
.card-img::before,.card-img::after,
.project-img::before,.project-img::after{
  display:none !important;
  content:none !important;
}

/* 13 类业务作品图（按 data-lightbox 关键词匹配） */
[data-lightbox*="Logo"]{     background-image:url('../img/work/work_01_logo.jpg') !important;}
[data-lightbox*="VIS"]{      background-image:url('../img/work/work_02_vis.jpg') !important;}
[data-lightbox*="海报"]{     background-image:url('../img/work/work_03_poster.jpg') !important;}
[data-lightbox*="包装"]{     background-image:url('../img/work/work_04_package.jpg') !important;}
[data-lightbox*="宣传册"]{   background-image:url('../img/work/work_05_brochure.jpg') !important;}
[data-lightbox*="说明书"]{   background-image:url('../img/work/work_06_manual.jpg') !important;}
[data-lightbox*="名片"]{     background-image:url('../img/work/work_07_card.jpg') !important;}
[data-lightbox*="书籍"]{     background-image:url('../img/work/work_08_book.jpg') !important;}
[data-lightbox*="UI"]{        background-image:url('../img/work/work_09_uiux.jpg') !important;}
[data-lightbox*="精修"]{     background-image:url('../img/work/work_10_photoedit.jpg') !important;}
[data-lightbox*="文化墙"]{   background-image:url('../img/work/work_11_wall.jpg') !important;}
[data-lightbox*="展厅"]{     background-image:url('../img/work/work_12_exhibition.jpg') !important;}
[data-lightbox*="活动物料"]{ background-image:url('../img/work/work_13_event.jpg') !important;}

/* M5 关于我们 - 团队/工作场景图 */
.about-img,
.about-photo,
.team-img,
.studio-img{
  background-image:url('../img/work/office_01.jpg') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* M3 弹窗大图区域 - 让显示出来的大图也填满 */
.lightbox-content .img,
#lightbox-img{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* M6 合作品牌墙 — 业界最佳实践版
   参考 Apple Newsroom / Stripe Press / Linear / Notion 客户墙
   纯 logo 等距网格，grayscale 默认 + hover 变彩色，无品牌名文字
   上方加 "TRUSTED BY" 引导标题 */
.brand-logo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:160px !important;
  height:120px !important;
  padding:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  transition:transform .3s ease !important;
}
.brand-logo:hover{
  transform:translateY(-4px) !important;
}
.brand-logo .brand-img-wrap{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:120px !important;
  height:120px !important;
  padding:0 !important;
  box-sizing:border-box !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
}
.brand-logo .brand-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:grayscale(1) opacity(.7) !important;
  transition:filter .4s ease, opacity .4s ease !important;
}
.brand-logo:hover .brand-img{
  filter:grayscale(0) opacity(1) !important;
}

/* Trusted by 引导标题（业界最佳实践） */
.trusted-by-lead{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:16px !important;
  width:100% !important;
  margin:0 0 56px 0 !important;
  text-align:center !important;
}
.trusted-by-lead .trusted-by-line{
  display:inline-block !important;
  width:48px !important;
  height:1px !important;
  background:currentColor !important;
  opacity:.25 !important;
}
.trusted-by-lead .trusted-by-text{
  display:inline-block !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:.32em !important;
  text-transform:uppercase !important;
  opacity:.55 !important;
}

/* 返回顶部按钮（业界最佳实践：fixed 右下角，滚动超过 600px 显示，点击平滑滚到顶） */
#back-to-top{
  position:fixed !important;
  right:24px !important;
  bottom:24px !important;
  width:48px !important;
  height:48px !important;
  padding:0 !important;
  border:none !important;
  border-radius:50% !important;
  background:var(--fg, #1a1a1a) !important;
  color:var(--bg, #ffffff) !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12) !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(16px) !important;
  transition:opacity .3s ease, transform .3s ease, background .2s ease !important;
  z-index:9999 !important;
  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;
}
#back-to-top.visible{
  opacity:.92 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}
#back-to-top:hover{
  opacity:1 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.25), 0 4px 8px rgba(0,0,0,.15) !important;
}
#back-to-top svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
}