/* ============ 国服活动日历 · 页面样式 ============
   只写这一页自己的组件；色带 / 面板 / 鎏金标题 / 按钮 全部走 ../assets/site.css。
   所有网格列都用 minmax(0,1fr)，390px 宽不能出现横向滚动。 */

.ev-body { position: relative; z-index: 2; margin-top: -70px; padding-bottom: 24px; }

.ev-stat { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 18px; color: var(--ink-2); font-size: 14px; }
.ev-stat span { display: inline-flex; align-items: baseline; gap: 4px; }
.ev-stat b { font: 900 26px/1 var(--num); background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255, 190, 90, .4)); }
.ev-stat i { font-style: normal; color: var(--ink-3); font-size: 12.5px; }
.ev-stat .dot { color: var(--ink-3); opacity: .5; }

/* 类型配色：只用细边和徽章，不铺大色块 */
.ev-kind { --kc: #f6d27a; }
.ev-kind.k-season { --kc: #9ec4ff; }
.ev-kind.k-boss { --kc: #ff9a6a; }
.ev-kind.k-coop { --kc: #c9b3ff; }
.ev-kind.k-gallery { --kc: #7fe0d8; }
.ev-kind.k-crosspvp { --kc: #ff9fc4; }
.ev-kind.k-tower { --kc: #b9d7a0; }
.ev-kind.k-hot { --kc: #f0c36a; }

/* ---------------- 正在进行 ---------------- */
.ev-now { padding: 16px 20px 20px; margin-bottom: 26px; }
.ev-nowhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.ev-nowhead .ribbon { font-size: 23px; }
.ev-nowlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ev-card {
  position: relative; display: block; padding: 11px 13px 12px; min-width: 0; border-radius: 2px;
  background: linear-gradient(180deg, rgba(6, 9, 20, .5), rgba(6, 9, 20, .28));
  border: 1px solid rgba(212, 166, 74, .22); border-left: 3px solid var(--kc, var(--gold));
}
.ev-card .top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ev-card .nm { font: 700 15.5px/1.3 var(--serif); letter-spacing: .03em; color: var(--ink); overflow-wrap: anywhere; }
.ev-card .tm { margin-top: 5px; color: var(--ink-3); font-size: 12px; line-height: 1.6; }
.ev-card .tm b { color: var(--gold-hi); font: 700 13px var(--num); }
.ev-card .ck { margin-top: 6px; color: var(--ink-2); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.ev-card .hero { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 0 2px; border: 1px solid rgba(246, 210, 122, .35); border-radius: 2px; margin-right: 4px; }
.ev-card .hero img { width: 20px; height: 20px; border-radius: 2px; object-fit: cover; object-position: 50% 18%; background: #0d1430; }
.ev-card .hero b { font-size: 11.5px; color: var(--gold-hi); }

/* ---------------- 说明面板 ---------------- */
.ev-how { padding: 18px 22px 20px; margin-bottom: 32px; }
.ev-how h2 { margin: 0 0 10px; font: 800 16px/1.4 var(--serif); letter-spacing: .12em; color: var(--gold-hi); }
.ev-how ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ev-how li { position: relative; padding-left: 17px; color: var(--ink-2); font-size: 13.5px; line-height: 1.7; }
.ev-how li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 8px rgba(246, 210, 122, .55); }
.ev-how b { color: var(--ink); font-weight: 700; }
.ev-how a { color: var(--gold-hi); border-bottom: 1px solid rgba(246, 210, 122, .4); }

/* ---------------- 筛选条 ---------------- */
.ev-sec { margin-bottom: 40px; }
.sec-head { margin-bottom: 16px; }
.sec-head .ribbon { font-size: 26px; }
.sec-head .hint { margin: 0; }
.ev-tools { --cs: 34px; padding: 14px 16px; margin-bottom: 14px; }
.ev-trow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ev-trow + .ev-trow { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.ev-trow .k { flex: none; color: var(--ink-3); font-size: 12.5px; letter-spacing: .1em; min-width: 34px; }
.ev-search { flex: 1 1 190px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border: 1px solid var(--line-soft); background: rgba(6, 9, 20, .55); border-radius: 2px; }
.ev-search svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.ev-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 14px var(--sans); outline: none; }
.ev-search input::placeholder { color: var(--ink-3); }
.ev-search:focus-within { border-color: var(--gold); }
.ev-sum { flex: none; color: var(--ink-3); font-size: 12.5px; }
.ev-sum b { color: var(--gold-hi); font: 700 15px var(--num); margin: 0 2px; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ev-chip { padding: 3px 11px; border: 1px solid var(--line-soft); background: rgba(6, 9, 20, .4); color: var(--ink-2); font-size: 12.5px; border-radius: 2px; cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }
.ev-chip:hover { color: var(--gold-hi); border-color: var(--line); }
.ev-chip[aria-pressed="true"] { color: #1a0f00; background: linear-gradient(180deg, #f6d27a, #d4a64a); border-color: #f6d27a; font-weight: 700; }
.ev-switches { display: flex; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
.ev-sw { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.ev-sw input { appearance: none; width: 34px; height: 19px; flex: none; border-radius: 10px; border: 1px solid var(--line); background: rgba(6, 9, 20, .7); position: relative; cursor: pointer; transition: background-color .2s, border-color .2s; }
.ev-sw input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink-3); transition: transform .2s, background-color .2s; }
.ev-sw input:checked { border-color: var(--gold); background: rgba(212, 166, 74, .22); }
.ev-sw input:checked::after { transform: translateX(15px); background: var(--gold-hi); box-shadow: 0 0 8px rgba(246, 210, 122, .8); }

/* ---------------- 时间线 ---------------- */
.ev-tl { --pad: 16px; --dcol: 76px; padding: 6px var(--pad) 10px; }
.ev-tl::before {
  content: ""; position: absolute; top: 30px; bottom: 22px; width: 1px; pointer-events: none;
  left: calc(var(--pad) + var(--dcol) - 9px);
  background: linear-gradient(180deg, rgba(212, 166, 74, 0), var(--line) 3%, var(--line) 95%, rgba(212, 166, 74, 0));
}
.ev-month { position: relative; }
.ev-mhead {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 4px; margin: 0;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; text-align: left;
}
.ev-mhead b { font: 900 21px/1.2 var(--serif); letter-spacing: .1em; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #2a1800); }
.ev-mhead .n { color: var(--ink-3); font-size: 12.5px; }
.ev-mhead .cur { padding: 0 6px; font-size: 11px; font-weight: 800; color: #2a1600; background: linear-gradient(180deg, #ffd27a, #d9a440); border-radius: 2px; }
.ev-mhead .chev { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.ev-mhead[aria-expanded="false"] .chev { transform: rotate(-45deg) translate(-2px, 2px); }
.ev-mhead:hover b { filter: drop-shadow(0 2px 0 #2a1800) drop-shadow(0 0 12px rgba(246, 210, 122, .55)); }

.ev-ev { display: grid; grid-template-columns: var(--dcol) minmax(0, 1fr); gap: 0 12px; padding: 13px 0; position: relative; }
.ev-ev + .ev-ev { border-top: 1px solid rgba(212, 166, 74, .12); }
.ev-ev:hover { background: rgba(246, 210, 122, .035); }
.ev-ev.is-now { background: linear-gradient(90deg, rgba(246, 210, 122, .09), rgba(246, 210, 122, 0) 60%); }

.ev-when { position: relative; padding-right: 12px; text-align: right; }
.ev-when b { display: block; font: 800 16px/1.25 var(--num); color: var(--ink); letter-spacing: .02em; }
.ev-when span { display: block; color: var(--ink-3); font-size: 11.5px; line-height: 1.35; }
.ev-when::after {
  content: ""; position: absolute; right: -3.5px; top: 6px; width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--kc, var(--gold)); box-shadow: 0 0 9px rgba(246, 210, 122, .45);
}
.ev-ev.is-now .ev-when::after { box-shadow: 0 0 12px rgba(246, 210, 122, .95); }

.ev-what { min-width: 0; }
.ev-line1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ev-line1 h3 { margin: 0; font: 800 17px/1.35 var(--serif); letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; }
.ev-tag { flex: none; padding: 1px 7px; border-radius: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--kc, var(--gold)); border: 1px solid currentColor; }
.ev-sub { color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.ev-tag.dim { color: var(--ink-3); border-color: rgba(141, 134, 112, .45); font-weight: 400; }
.ev-tag.warn { color: #2a1600; background: linear-gradient(180deg, #ffd27a, #d9a440); border-color: transparent; }
.ev-badge { flex: none; padding: 1px 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #2a1600; background: linear-gradient(180deg, #ffd27a, #d9a440); border-radius: 2px; }

.ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.7; }
.ev-meta b { color: var(--ink-2); font-weight: 600; }
.ev-meta .rw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--ink-2); }
.ev-meta .rw > * + *::before { content: "·"; margin-right: 4px; color: var(--ink-3); }
.ev-meta .rw .lb { color: var(--ink-3); }
.ev-meta .rw .ev-hc { padding-right: 6px; }
.ev-meta .rw .ev-hc img { width: 20px; height: 20px; }
.ev-note { margin: 5px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.65; overflow-wrap: anywhere; }
.ev-hc { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 2px; border: 1px solid rgba(246, 210, 122, .4); border-radius: 2px; background: rgba(6, 9, 20, .5); }
.ev-hc img { width: 22px; height: 22px; border-radius: 2px; object-fit: cover; object-position: 50% 18%; background: #0d1430; }
.ev-hc b { font-size: 12px; color: var(--gold-hi); }
.ev-join { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.ev-join .lb { color: var(--ink-3); font-size: 11.5px; }
.ev-link { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; font-size: 11.5px; color: var(--gold-hi); border: 1px solid rgba(246, 210, 122, .35); border-radius: 2px; }
.ev-link:hover { border-color: var(--gold-hi); background: rgba(246, 210, 122, .1); }

.ev-empty { margin: 14px 0 0; color: var(--ink-3); font-size: 13px; text-align: center; }
.ev-src { margin: 0 0 30px; color: var(--ink-3); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.ev-src b { color: var(--ink-2); font-weight: 600; }

/* ---------------- 手机 ---------------- */
@media (max-width: 760px) {
  .ev-body { margin-top: -56px; }
  .ev-stat { font-size: 12.5px; gap: 4px 8px; }
  .ev-stat b { font-size: 21px; }
  .ev-now { padding: 14px 14px 16px; }
  .ev-nowhead .ribbon { font-size: 20px; }
  .ev-nowlist { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ev-how { padding: 15px 16px 16px; }
  .ev-how li { font-size: 13px; }
  .sec-head .ribbon { font-size: 22px; }
  .ev-tools { padding: 12px; }
  .ev-trow .k { min-width: 100%; }
  .ev-tl { --pad: 12px; --dcol: 58px; }
  .ev-tl::before { left: calc(var(--pad) + var(--dcol) - 8px); }
  .ev-when { padding-right: 10px; }
  .ev-when b { font-size: 14px; }
  .ev-when span { font-size: 10.5px; }
  .ev-line1 h3 { font-size: 15.5px; }
  .ev-meta { font-size: 12px; }
  .ev-note { font-size: 12px; }
  .ev-hc img { width: 20px; height: 20px; }
}