/* 活動卡片（列表頁與首頁共用）
   單一來源：改這裡兩邊一起變，不要在頁面各自複製一份。
   設計依據見 design-system/tkb-steam/MASTER.md（顏色階／字級／已定案決策）。 */
/* ============================================================
   活動卡片（重整）
   原本的問題：一張卡同時有 emoji 漸層類型章、飽和狀態章、浮在封面外的
   價格膠囊、兩個灰框 badge、再加一個有框有底色的米色資訊盒 —— 六套顏色
   語言互相搶，而且全部文字都同一個字級，眼睛找不到入口，所以顯得髒。

   重整原則：
   ① 封面上只留「一件事」＝報名狀態（白霧玻璃底 + 色點，不用大面積飽和色）
   ② 顏色收斂：中性灰階為主 + 焦糖橘只留給價格與 CTA；狀態色只出現在小圓點
   ③ 用字重／顏色／留白建立層級（字級仍守全頁最小 1rem 規範）
   ④ 不再 box-in-box：資訊用細分隔線分層，不用有框的盒子
   ⑤ 去掉 emoji 當結構圖示；圖示統一 FontAwesome、同尺寸同色
   ============================================================ */
.activity-card{
  --ink:#1f2937;        /* 主要文字 */
  --ink-soft:#6b7280;   /* 次要文字 */
  --line:#eceff3;       /* 分隔線 */
  --accent:#006068;     /* 強調：價格 / CTA（對白底 5.1:1，16px 粗體也達標） */
  border:1px solid #eef1f5; border-radius:16px; overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:box-shadow .2s ease, border-color .2s ease;
  cursor:pointer;
}
/* hover 只改陰影/邊框，不位移 —— 位移會讓整列卡片跟著抖 */
.activity-card:hover{
  box-shadow:0 12px 28px rgba(16,24,40,.10);
  border-color:#e2e7ee;
}
.activity-card:focus-visible{
  outline:3px solid #1888A0; outline-offset:2px;
}
.activity-card .card-cover{ position:relative; background:#f3f5f8; }
.activity-card .cover-fallback{
  display:flex; align-items:center; justify-content:center;
  background:#eef1f5; color:#a9b3bf;
}

/* 狀態晶片：封面上唯一的元素 */
.activity-card .status-chip{
  position:absolute; top:12px; right:12px;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.32rem .7rem; border-radius:999px;
  font-size:1rem; font-weight:600; color:var(--ink);
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 8px rgba(16,24,40,.14);
  backdrop-filter:blur(8px);
}
.activity-card .status-chip .dot{
  width:.5rem; height:.5rem; border-radius:50%; flex-shrink:0;
  background:currentColor;
}
.chip-open     .dot{ color:#1f8b4d; }
.chip-closing  .dot{ color:#c77700; }
.chip-full     .dot{ color:#c0392b; }
.chip-upcoming .dot{ color:#2b6cb0; }
.chip-off      .dot{ color:#9aa3af; }
.chip-off{ color:var(--ink-soft); }

/* 內容 */
.activity-card .card-body{ padding:1.1rem 1.15rem .9rem; }
.activity-card .kicker{
  font-size:1rem; color:var(--ink-soft); line-height:1.5;
  margin-bottom:.4rem;
}
.activity-card .kicker .sep{ margin:0 .4rem; color:#cbd2db; }
.activity-card .card-title{
  font-weight:800; font-size:1.3rem; line-height:1.35; color:var(--ink);
  letter-spacing:-.01em; margin:0 0 .35rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.activity-card .summary{
  font-size:1rem; color:var(--ink-soft); line-height:1.6; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* 場次事實：細分隔線分層，無框無底色 */
.activity-card .facts{
  margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.35rem;
}
.activity-card .fact{
  display:flex; align-items:baseline; gap:.5rem;
  font-size:1rem; color:var(--ink); line-height:1.5;
}
.activity-card .fact i{
  width:1rem; font-size:.95rem; color:#7d8794; flex-shrink:0; text-align:center;
}
.activity-card .fact .soft{ color:var(--ink-soft); }
.activity-card .fact.tight{ color:#c0392b; font-weight:600; }

/* 底部：價格（強調色、最大字） + CTA */
.activity-card .card-foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem;
  padding:.85rem 1.15rem 1.1rem;
  border-top:1px solid var(--line);
}
.activity-card .price{
  font-size:1.5rem; font-weight:800; color:var(--accent);
  line-height:1.1; letter-spacing:-.02em;
}
.activity-card .price .unit{
  font-size:1rem; font-weight:600; color:var(--ink-soft); margin-left:.15rem;
}
.activity-card .price-empty{ font-size:1rem; color:var(--ink-soft); }
.activity-card .go{
  font-size:1rem; font-weight:700; color:var(--accent);
  display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
}
.activity-card:hover .go i{ transform:translateX(3px); }
.activity-card .go i{ transition:transform .2s ease; }

/* 不可報名：整卡退到背景層，但資訊仍清楚可讀 */
.activity-card.is-off{ background:#fcfcfd; }
.activity-card.is-off .card-cover img,
.activity-card.is-off .cover-fallback{ filter:grayscale(1); opacity:.6; }
.activity-card.is-off .card-title{ color:#4b5563; }
.activity-card.is-off .price{ color:var(--ink-soft); }
.activity-card.is-off .go{ color:var(--ink-soft); font-weight:600; }

@media (prefers-reduced-motion: reduce){
  .activity-card, .activity-card .go i{ transition:none; }
}