/* ============================================================
   活動中心 — 頁面專屬樣式
   依賴 style.css（代幣）與 club.css（俱樂部子頁共用層 + .evcard）
   ============================================================ */

/* 頁首與列表之間留白收緊：頁首底部與列表頂部原本各吃一個 --pad-lg */
.sub-head:has(+ .sub-body) { padding-bottom: clamp(28px, 3.4vw, 48px); }
.sub-head + .sub-body { padding-top: clamp(16px, 2vw, 28px); }

.events-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.events-bar__title { font-size: clamp(21px, 2.4vw, 30px); font-weight: 400; }
.events-bar__count { opacity: .5; }

/* ============ 活動列表（縱向） ============ */
.evlist { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); }
.evcard[hidden] { display: none; }

/* 縱向列表版：左側資訊、右側名額與 CTA */
.evcard--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
  scroll-margin-top: 92px;
}
.evcard--row > .handle { grid-column: auto; }
.evcard__main { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.evcard__side {
  display: flex; flex-direction: column; gap: 14px;
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 1px dashed var(--line-on-dark);
  align-self: stretch;
}
@media (max-width: 760px) {
  .evcard--row { grid-template-columns: 1fr; gap: 18px; }
  .evcard__side { padding-left: 0; padding-top: 16px; border-left: none; border-top: 1px dashed var(--line-on-dark); }
}

.evcard__phase {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.evcard__phase i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.evcard__phase--open { background: rgba(210, 160, 110, .14); color: var(--c-accent); }
.evcard__phase--open i { background: var(--c-accent); animation: evPulse 2.4s infinite; }
.evcard__phase--soon { background: rgba(140, 169, 191, .14); color: #9DB8CB; }
.evcard__phase--soon i { background: #9DB8CB; }
.evcard__phase--ended { background: rgba(247, 247, 247, .07); color: rgba(247, 247, 247, .45); }
.evcard__phase--ended i { background: rgba(247, 247, 247, .35); }
@keyframes evPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.evcard__brief { font-size: 13.5px; font-weight: 300; opacity: .62; line-height: 1.75; }
.evcard__facts {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  opacity: .5;
}
.evcard__facts span { display: inline-flex; align-items: center; gap: 6px; }
.evcard__facts span::before { content: ''; width: 4px; height: 4px; background: var(--c-accent); opacity: .7; flex: none; }

.evcard__deadline { font-size: 11.5px; font-family: var(--mono); letter-spacing: .04em; opacity: .5; }
.evcard__deadline b { color: var(--c-accent); font-weight: 700; }
.evcard.is-ended { opacity: .62; }
.evcard.is-ended:hover { opacity: .85; transform: none; }
.evcard.is-ended .evcard__title { font-weight: 400; }
.evcard__cta--replay { color: #9DB8CB; }
.evcard__cta--replay:hover { color: #C3D7E6; }

.evcard.is-flash { border-color: var(--c-accent); }

.evlist__more { margin-top: clamp(26px, 3vw, 40px); display: flex; justify-content: center; }

/* ============ 側欄：我的活動 ============ */
.myev { display: flex; flex-direction: column; }
.myev__row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line-on-dark);
}
.myev__row:last-child { border-bottom: none; }
.myev__dot { margin-top: 7px; width: 9px; height: 9px; border-radius: 50%; }
.myev__dot--go { background: var(--c-accent); }
.myev__dot--wait { background: #9DB8CB; }
.myev__dot--done { background: rgba(247, 247, 247, .3); }
.myev__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.myev__name { font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.myev__name a:hover { color: var(--c-accent); }
.myev__meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; opacity: .45; }
.myev__state {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
}
.myev__state--go { background: rgba(210, 160, 110, .16); color: var(--c-accent); }
.myev__state--wait { background: rgba(140, 169, 191, .16); color: #9DB8CB; }
.myev__state--done { background: rgba(247, 247, 247, .07); color: rgba(247, 247, 247, .45); }

.aside-panel {
  position: relative;
  padding: 22px 22px;
  border: 1px dashed var(--line-on-dark);
  background: var(--c-surface);
}
.aside-panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--line-on-dark);
}
.aside-panel__title { font-size: 15px; font-weight: 500; }
.aside-panel__note { opacity: .45; }

/* ============ 側欄：日曆 ============ */
.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.cal__month { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.cal__nav { display: flex; gap: 6px; }
.cal__btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px dashed var(--line-on-dark);
  border-radius: 4px;
  color: rgba(247, 247, 247, .6);
  transition: border-color .25s, color .25s;
}
.cal__btn:hover:not(:disabled) { border-color: rgba(210, 160, 110, .6); color: var(--c-accent); }
.cal__btn:disabled { opacity: .3; cursor: not-allowed; }
.cal__btn svg { width: 10px; height: 10px; }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow {
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  opacity: .4;
  padding-bottom: 5px;
}
.cal__day {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(247, 247, 247, .55);
  border: 1px dashed transparent;
}
.cal__day--pad { opacity: 0; }
.cal__day.has-ev {
  color: var(--c-text);
  border-color: var(--line-on-dark);
  cursor: pointer;
  transition: border-color .25s, background-color .25s, color .25s;
}
.cal__day.has-ev::after {
  content: '';
  position: absolute; bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-accent);
}
.cal__day.has-ev:hover,
.cal__day.has-ev:focus-visible {
  outline: none;
  background: rgba(210, 160, 110, .14);
  border-color: rgba(210, 160, 110, .6);
  color: var(--c-accent);
}
.cal__day.is-mine { background: rgba(210, 160, 110, .1); }
.cal__day.is-mine::after { box-shadow: 0 0 0 2px rgba(210, 160, 110, .25); }
.cal__day.is-past.has-ev { color: rgba(247, 247, 247, .4); }
.cal__day.is-past.has-ev::after { background: rgba(247, 247, 247, .3); }
.cal__legend {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-on-dark);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  opacity: .5;
}
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal__legend i { width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }
.cal__legend i.is-past { background: rgba(247, 247, 247, .3); }
.cal__hint { margin-top: 10px; font-size: 11.5px; opacity: .42; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .evcard__phase--open i { animation: none; }
  .cal__day, .cal__btn { transition: none; }
}

/* 線上路演（活動中心新增的第五種類型） */
.tag--ev[data-type="online"] { background: rgba(185, 168, 143, .16); color: #C9B899; }

/* 不限等級標籤 */
.tag--lv-any { color: rgba(247, 247, 247, .6); border-color: var(--line-on-dark); border-style: dashed; }