/* =========================================================
   workers 頁(v7 midnight-gold):標題列 + sticky 篩選卡 + 雙欄密卡
   篩選 = 前端複選即時過濾(js/workers.js),不重載頁面
   ========================================================= */

/* JS 過濾用 hidden 屬性顯隱;flex/grid 的 display 會蓋過 [hidden],必須壓制 */
[hidden] { display: none !important; }

/* 頁首:標題與人數併排 */
.explore-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.explore-count { font-size: 14px; font-weight: 800; color: var(--text-soft); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.explore-count strong { font-family: var(--font-num); font-size: 30px; line-height: 1; }
.explore-cond {
  font-size: 12px; padding: 3px 11px; border-radius: var(--radius-pill);
  background: var(--coral-soft); color: var(--coral);
}

/* sticky 篩選卡 */
.filter-dock { position: sticky; top: var(--header-h); z-index: 40; padding: 10px 0; }
.filter-card {
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line); /* 深底黑影疊黑底看不出邊界,金細框補分離度(與 topbar 線語彙一致) */
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 10px 12px;
  display: grid; gap: 8px;
}
.filter-scroll {
  display: flex; gap: 7px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 2px;
  /* 右緣漸層淡出:提示還有 chip 可捲,避免被硬切像破版 */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 34px), transparent 100%);
}
.filter-scroll::-webkit-scrollbar { display: none; }
/* 桌機空間足夠:整排換行全顯示,不靠捲動 */
@media (min-width: 900px) {
  .filter-scroll {
    flex-wrap: wrap; overflow-x: visible;
    -webkit-mask-image: none; mask-image: none;
  }
}
.filter-scroll .tag-chip { flex: 0 0 auto; font-size: 13px; padding: 7px 14px; }
.st-chip.is-active { background: var(--grad-cool); }
.filter-clear { border-color: var(--coral); color: var(--coral); }

/* 結果:手機即雙欄(App 密度) */
.explore-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 480px) {
  .explore-grid .worker-info { padding: 10px 11px 12px; }
  .explore-grid .worker-name strong { font-size: 15px; }
  .explore-grid .worker-name small { display: none; }
  .explore-grid .worker-tags span:nth-child(n+3) { display: none; }
  .explore-grid .worker-served { display: none; }
}
@media (min-width: 700px)  { .explore-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1000px) { .explore-grid { grid-template-columns: repeat(4, 1fr); } }

/* 空狀態 */
.explore-empty {
  text-align: center; padding: 54px 20px;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
}
.explore-empty-icon {
  width: 74px; height: 74px; border-radius: 26px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--violet-soft); color: var(--violet);
}
.explore-empty-icon svg { width: 34px; height: 34px; }
.explore-empty h2 { font-size: 20px; margin-bottom: 6px; }
.explore-empty p { color: var(--text-soft); font-size: 14px; margin-bottom: 20px; }

/* 客服推薦 CTA */
.concierge-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--grad-cool); color: var(--on-accent);
  border-radius: var(--radius-lg); padding: 26px 24px;
  box-shadow: 0 16px 40px rgba(4, 8, 16, .5), 0 0 24px rgba(212, 175, 110, .14); /* 亮紫彩影改深藍黑 + 金暈 */
}
.concierge-copy h2 { font-size: clamp(20px, 4vw, 26px); }
.concierge-copy p { font-size: 14px; opacity: .92; margin-top: 4px; }
.concierge-card .btn-white { background: var(--bg-elev); color: var(--violet); }
.concierge-card .btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }