/* ==========================================================================
   赛事总览页 — 页面专属样式（在 hub.css / hub-module.css 之后加载）
   只负责「赛事清单行」的布局 +「竞赛类别」左侧筛选栏；
   配色、徽章、工具栏都复用前面两个样式表。
   ========================================================================== */

/* ---------- 两栏骨架：左「竞赛类别」筛选栏 + 右内容列 -------------------- */

.comp-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 0 26px;
  align-items: start;
}

.comp-content { min-width: 0; }

.cc-panel {
  position: sticky;
  top: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 6px 10px 16px;
}

.cc-head {
  padding-right: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.cc-title {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .5px;
}

.cc-summary {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-2);
}

.cc-summary b {
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.cc-clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cc-clear:hover { color: var(--navy); }

.cc-groups {
  max-height: min(62vh, 620px);
  overflow: auto;
  padding: 4px 4px 4px 0;
}

.cc-note {
  margin: 10px 0;
  font-size: 12.5px;
  color: var(--text-2);
}

.cc-group { border-bottom: 1px solid var(--line); }
.cc-group:last-child { border-bottom: 0; }

.cc-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 6px 8px 6px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--navy);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.cc-group-head:hover { background: #edf5fa; }

.cc-group-name { flex: 1 1 auto; }

.cc-group-badge {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cc-arrow {
  flex: 0 0 auto;
  color: var(--text-2);
  font-size: 12px;
  transition: transform .15s ease;
}

.cc-group-head[aria-expanded="true"] .cc-arrow { transform: rotate(180deg); }

.cc-items { padding: 0 0 6px; }

.cc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 8px 4px 6px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}

.cc-item:hover { background: #edf5fa; }

.cc-item input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.cc-item-label { min-width: 0; }

/* ≤820px：侧栏转通栏块，排在工具栏之上 */
@media (max-width: 820px) {
  .comp-layout { grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
  .cc-panel { position: static; padding: 14px 12px 8px; }
  .cc-groups { max-height: none; }
}

/* ---------- 赛事清单行：纯文字聚合行（编号 | 名称+分级+三个字段 | 官方入口按钮） -------- */

.comp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 详情页已下线：整行点击改为「右侧详情抽屉」（交互与日历页一致），hover 只做淡蓝底纹 + 边框提亮 */
.comp-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  padding: 11px 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;                 /* 整行可点 → 打开右侧详情抽屉 */
  transition: background .14s ease, border-color .14s ease;
}

.comp-row:hover,
.comp-row:focus-within {
  background: #edf5fa;
  border-color: var(--line-strong);
}

/* 键盘可达：行本身可聚焦（Enter / Space 打开抽屉） */
.comp-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.comp-row.is-none { background: #fbfcfe; }
.comp-row.is-none:hover { background: #edf5fa; border-color: var(--line-strong); }

/* C 档徽章（省级 / 其他认定赛事）：中性灰蓝，与 A1 红 / A2 橙 / B1 蓝 / B2 绿区分 */
.cat-badge.cat-C { background: #5f7a95; }

.cr-no {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.cr-main { min-width: 0; }

.cr-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* 赛事名是纯文本（详情页已下线，不再是链接） */
.cr-name {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
}

/* 行内三个字段：适合人群 / 报名时间 / 举办、评比时间 */
.cr-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 18px;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--text-2);
}

.cr-field {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  min-width: 0;
}

.cr-field .cf-k { flex: none; color: var(--text-3); }

.cr-field .cf-v { min-width: 0; overflow-wrap: anywhere; }

/* 两个时间字段沿用站内日期风格：等宽字体 + 略小字号 */
.cr-field .cf-v.mono {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* 「暂无报名信息 / 暂未收录时间信息」：灰色标记 + 一句把话说明白的副标题（不静默留空） */
.cr-none {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: #f2f4f7;
  border: 1px dashed #d8dde6;
  color: #5f6875;
  font-size: 12.5px;
}

.cr-none .none-flag {
  display: inline-block;
  margin-right: 7px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e4e7ec;
  color: #4c5563;
  font-weight: 700;
  font-size: 11.5px;
}

/* 长串（网址 / 无空格长名称）窄屏必须能断行，否则整页横向溢出 */
.cr-none,
.cr-field,
.cr-name,
.cr-title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cr-actions { display: flex; gap: 6px; }
.cr-btn { padding: 5px 11px; font-size: 12px; white-space: nowrap; }

.result-line { font-size: 13px; color: var(--text-2); }
.result-line b { color: var(--accent); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .comp-row { grid-template-columns: 46px minmax(0, 1fr); }
  .cr-actions { grid-column: 2; justify-content: flex-start; }
}

@media (max-width: 560px) {
  .comp-row { grid-template-columns: 1fr; }
  .cr-no { order: -1; }
  .cr-actions { grid-column: 1; }
}

/* ==========================================================================
   右侧详情抽屉：逐条对齐竞赛日历页（web/calendar/style.css 的「详情抽屉」段），
   类名、动画时长与曲线保持一致；仅内容来源不同（总览行 → 赛事事实字段）。

   变量说明：--panel / --panel-2 / --line / --line-strong / --mono / --shadow-lg /
   --warn / --warn-bg / --text / --text-2 / --text-3 / --accent 均由 hub.css 的 :root
   提供（总览页先加载 hub.css），因此这里不再重复定义，视觉与日历页同源。
   ========================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(19, 26, 41, .42);
  z-index: 60;
  animation: fade .15s ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 70;
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  /* 日历页 :root 的 --shadow-lg 是「向左投影」(-8px 0 32px)，本页 hub.css 的通版是 0 14px 34px，
     这里按日历页的值写死，保证右侧滑出时的投影方向 / 浓度一致 */
  box-shadow: -8px 0 32px rgba(24, 33, 51, .18);
  animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }

.drawer-head {
  flex: none;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 48px 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f7f9fd, #fff);
  position: relative;
}
.drawer-head h2 { font-size: 16px; font-weight: 650; line-height: 1.35; }
.drawer-head .d-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.drawer-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--text-2);
  font-family: inherit;      /* 日历页 style.css 有全局 button{font-family:inherit}，本页没有，单点补齐 */
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.drawer-close:hover { border-color: var(--a1); color: var(--a1); background: #fdeceb; }

.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 26px; -webkit-overflow-scrolling: touch; }

.d-grid { display: grid; grid-template-columns: 88px 1fr; gap: 7px 12px; font-size: 13px; }
.d-grid dt { color: var(--text-3); font-size: 12px; }
.d-grid dd { margin: 0; color: var(--text); word-break: break-word; }
.d-grid dd .mono { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.d-sec { margin-top: 16px; }
.d-sec > h3 {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-3);
  letter-spacing: .5px;
  margin-bottom: 6px;
}
.d-sec > p { font-size: 13px; color: var(--text); word-break: break-word; }

.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.link-list li { display: flex; gap: 8px; align-items: flex-start; }
.link-list .lk-kind {
  flex: none;
  min-width: 62px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef1f6;
  color: var(--text-2);
  font-size: 11px;
  text-align: center;
}
.link-list a {
  color: var(--accent);
  text-decoration: none;
  font-size: 12.5px;
  word-break: break-all;
}
.link-list a:hover { text-decoration: underline; }
.link-block { margin-bottom: 10px; }
.link-block .lb-title { font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }

.d-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* 抽屉内的按钮：度量按日历页的 .btn（padding 5px 12px / 12.5px / 常规粗细 / display:block）。
   本页行内的「官方报名/通知」用的是 hub-module.css 的 .btn（13px、7px 14px、圆角胶囊），
   两处刻意区分：只把抽屉范围覆盖成日历页的度量，行内按钮不受影响。 */
.drawer .btn {
  display: block;
  gap: normal;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 400;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.drawer .btn:hover { border-color: var(--accent); color: var(--accent); background: #f3f7ff; }
.drawer .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
/* 注意：主按钮 hover 不改底色——日历页上 site-pages.css 的
   `.site-page :is(.btn.primary,…){background:var(--blue)}` 在层叠上盖住了 `.btn.primary:hover`，
   所以日历页主按钮 hover 底色保持不变；本页同层同样被该规则覆盖，无需（也不要）再写 hover 底色。 */
.drawer .btn:disabled { opacity: .5; cursor: not-allowed; }
/* 日历页的 .btn 没有重置 text-decoration（链接型按钮沿用浏览器默认下划线），
   本页 hub-module.css 的 .btn 会重置成 none，这里显式声明以保持与日历页一致 */
.drawer a.btn { text-decoration: underline; }

.empty-hint { color: var(--text-3); font-size: 12.5px; margin: 0; }
.note {
  margin-top: 14px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--warn-bg);
  border: 1px solid #f0dcb4;
  color: var(--warn);
  font-size: 12px;
}

/* 抽屉内的胶囊徽章（与日历抽屉同款；本页其它组件不使用 .badge，无冲突） */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge.cat { color: #fff; }
.badge.cat-A1 { background: #d93025; }
.badge.cat-A2 { background: #e8710a; }
.badge.cat-B1 { background: #1a73e8; }
.badge.cat-B2 { background: #188038; }
.badge.cat-C { background: #5f7a95; }
.badge.cat-other { background: #5b6472; }
.badge.soft { background: #eef3ff; color: var(--accent); border-color: #cfdcff; }

/* 抽屉里的链接说明文字（主按钮右侧的入口名称） */
.drawer-link-name { align-self: center; font-size: 12px; color: var(--text-3); word-break: break-all; }

/* site-pages.css 里只给日历页写了这两条抽屉覆盖
   （.site-page[data-page="calendar"] .drawer-head / .drawer-close，见该文件 109–110 行），
   本页 data-page="competitions" 命中不到，因此在同层作用域补同款两条，保证实测外观一致。
   注意加载顺序：本文件在 site-pages.css 之后，同特异性下以这里为准。 */
.site-page[data-page="competitions"] .drawer-head { background: var(--panel-2); }
.site-page[data-page="competitions"] .drawer-close { width: 40px; height: 40px; }

@media (max-width: 560px) {
  .drawer { width: 100%; }
  .d-grid { grid-template-columns: 76px 1fr; }
}

/* 减少动效偏好：抽屉 / 遮罩不做滑入淡入（日历页是全局 *，这里只作用于抽屉，避免影响本页既有过渡） */
@media (prefers-reduced-motion: reduce) {
  .overlay, .drawer { animation: none !important; }
}