/* ============================================================
   AIX Society — 客戶頁與首頁客戶 logo 滾動帶
   只使用 site.css 已定義的顏色變數（金 / 米白 / 黑），不引入新色。
   ============================================================ */

/* ---------- 客戶頁：卡片格 ---------- */
.clgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  padding:18px 0 8px;
}
.clcard{
  display:flex;flex-direction:column;
  padding:22px 22px 18px;
  border:1px solid var(--line2);
  border-radius:14px;
  background:var(--panel);
  text-decoration:none;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.clcard:hover{
  border-color:var(--line);
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
/* logo 區：固定高度讓不同比例的標誌在視覺上對齊 */
.cllogo{
  display:flex;align-items:center;justify-content:flex-start;
  height:82px;margin-bottom:16px;
}
.cllogo img{
  max-width:100%;max-height:100%;
  object-fit:contain;object-position:left center;
  filter:saturate(1.06) contrast(1.06);
  opacity:.96;
  transition:filter .25s ease,opacity .25s ease;
}
.clcard:hover .cllogo img{filter:saturate(1.12) contrast(1.12);opacity:1}
.clcard h3{
  margin:0 0 6px;
  font-size:1rem;
  line-height:1.38;
  letter-spacing:-.01em;
  color:var(--ink);
  font-weight:600;
}
.clzh{
  display:block;
  font-size:.8125rem;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:12px;
}
.clmeta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.clmeta span{
  font-size:.6875rem;
  color:var(--muted);
  border:1px solid var(--line2);
  border-radius:999px;
  padding:3px 10px;
  white-space:nowrap;
}
.clmeta span.is-both{
  border-color:var(--line);
  color:var(--gold-lt);
  font-weight:600;
}
.clcard .go{margin-top:auto;font-size:.8125rem;color:var(--muted)}
.clcard:hover .go{color:var(--gold-lt)}

.clnote{
  margin:22px 0 0;
  padding-top:16px;
  border-top:1px solid var(--line2);
  font-size:.8125rem;
  color:var(--muted);
  line-height:1.75;
}

.clcta{
  display:flex;gap:24px;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  margin:34px 0 10px;
  padding:26px 28px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
}
.clcta h3{margin:0 0 8px;font-size:clamp(1.0625rem,calc(1.9vw*var(--fs,1)),1.375rem);line-height:1.35}
.clcta p{margin:0;color:var(--muted);font-size:.875rem;line-height:1.75;max-width:60ch}

/* ---------- 首頁：客戶 logo 滾動帶 ---------- */
.clband{
  border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);
  padding:34px 0;
  overflow:hidden;
}
.clband .clband-hd{
  display:flex;gap:18px;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;
  margin-bottom:22px;
}
.clband .clband-hd h2{
  margin:0;font-size:1rem;font-weight:600;letter-spacing:.01em;
}
.clband .clband-hd .clband-more{
  font-size:.8125rem;color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.clband .clband-hd .clband-more:hover{color:var(--gold-lt);border-bottom-color:var(--gold-lt)}
.clband .clband-hd .clband-more::after{content:" ↗";font-size:.75rem}

/* 兩端淡出，標誌滑出時不會硬切 */
.clmarq{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
}
.cltrack{
  display:flex;align-items:center;width:max-content;
  animation:clscroll 58s linear infinite;
  will-change:transform;
}
.clmarq:hover .cltrack,
.clmarq:focus-within .cltrack{animation-play-state:paused}
.clitem{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  padding:0 32px;height:64px;
}
.clitem img{
  max-height:46px;width:auto;
  object-fit:contain;
  filter:saturate(1.06) contrast(1.08);
  opacity:.9;
  transition:filter .28s ease,opacity .28s ease,transform .28s ease;
}
.clitem:hover img{filter:saturate(1.12) contrast(1.14);opacity:1;transform:scale(1.04)}

/* 軌道在標記內複製一份 → 位移正好一半即無縫 */
@keyframes clscroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media (max-width:1000px){
  .clgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .clgrid{grid-template-columns:1fr;gap:12px}
  .cllogo{height:70px;margin-bottom:12px}
  .clcta{padding:22px 20px;gap:16px}
  .clband{padding:26px 0}
  .clitem{padding:0 22px;height:54px}
  .clitem img{max-height:38px}
  .clmarq{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%);
  }
}

/* 尊重系統「減少動態」設定：停用滾動，改為可橫向滑動 */
@media (prefers-reduced-motion:reduce){
  .cltrack{animation:none;transform:none}
  .clmarq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .clitem:hover img{transform:none}
}