/* static.css —— 只给静态渲染页用（月页 / 项目页 / 地区页 / 单赛事页）
 *
 * 为什么单独一个文件而不写进 style.css：
 *   ① style.css 是 SPA 的样式，动它就有打回主站视觉的风险；静态页是新增的一套页面，
 *      把新增样式隔离在新文件里，两边互不牵连。
 *   ② 这些页面**不加载 app.js**（见 build_static.py 的说明），所以卡片上那些依赖 JS 的
 *      部件（爱心、加入日历弹层）都不存在，需要自己的补充规则。
 *
 * 只用两段 :root 里**都有定义**的变量。
 *   ⚠️ 特别提醒：--accent-cyan 目前只在深色段定义，浅色段用它会整条声明作废
 *   （不报错、静默退回继承色）—— 这里刻意一个都没用。
 *
 * 卡片主体结构复用 style.css 里现成的 .event-card / .card-compact / .card-meta-strip 等类，
 * 本文件只补「整卡是一个 <a>」以及无 JS 时才需要的那几条。
 */

/* 整卡是链接：静态页里卡片没有 JS 点击事件，可点区域必须由 <a> 提供，
   这样爬虫也能顺着 href 走到单赛事页（这是静态渲染的核心目的之一）。 */
a.event-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.event-card:hover .card-title { color: var(--primary-color); }

/* ---------- 页面骨架 ---------- */
/* ★ 安全区（2026-10-16）：静态页的 viewport 也改成了 viewport-fit=cover（见 templates/base.html），
   系统不再自动让位 —— 页顶要让开 iOS 状态栏，页尾要让开底部那条系统横条。
   写法与 style.css 一致：「先普通值，再 env() 覆盖」，不支持 env() 的浏览器自动回落。 */
.static-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}
.static-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.static-brand img { width: 24px; height: 24px; }
.static-nav-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.static-nav-links a { color: var(--text-secondary); text-decoration: none; }
.static-nav-links a:hover { color: var(--primary-color); }

.static-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px 8px;
  padding-left: max(20px, env(safe-area-inset-left));   /* 横屏避让刘海 */
  padding-right: max(20px, env(safe-area-inset-right));
}

.static-h1 { font-size: 26px; line-height: 1.35; margin: 0 0 8px; }
.static-lead { color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin: 0 0 6px; }
.static-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 18px; }

/* 面包屑：给爬虫一条回上层的真实链接 */
.static-crumb { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }
.static-crumb a { color: var(--text-secondary); text-decoration: none; }
.static-crumb a:hover { color: var(--primary-color); }

/* 分页/分节标题（项目页按月份分组时用） */
.static-group-title {
  font-size: 15px;
  font-weight: 600;
  margin: 26px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

/* ---------- 单赛事页 ---------- */
.static-facts { display: grid; gap: 8px; margin: 0 0 20px; }
.static-fact { display: flex; gap: 10px; font-size: 14px; }
.static-fact dt { color: var(--text-muted); min-width: 72px; flex: none; }
.static-fact dd { margin: 0; color: var(--text-secondary); }

.static-section { margin: 22px 0 0; }
.static-section h2 { font-size: 16px; margin: 0 0 8px; }
.static-section p { font-size: 14px; line-height: 1.8; color: var(--text-secondary); margin: 0; }

.static-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }
.static-btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius-sm, 8px);
  font-size: 14px;
  text-decoration: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  background: var(--bg-subtle);
}
.static-btn:hover { color: var(--text-main); }
.static-btn-solid {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.static-btn-solid:hover { background: var(--primary-hover); color: #fff; }

/* 静态页尾部：与 SPA 页脚同职责（数据截至 + 免责），但不放反馈按钮 ——
   那颗按钮要 app.js 才能弹出反馈层，静态页不加载 app.js，放上去点了没反应。 */
.static-foot {
  max-width: 980px;
  margin: 34px auto 0;
  padding: 16px 20px 40px;
  /* 划到最底部时，最后一行（备案号 / 主题按钮）不能压在系统横条上 */
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
}
.static-foot a { color: var(--text-secondary); }

/* 主题切换（2026-10-08 F5）。静态页不加载 app.js，按钮由 base.html 那段内联脚本驱动。
   样式全部走 token，不写死颜色 —— 否则浅色下这颗按钮会是深色底上的深色字。 */
.static-theme-btn {
  margin-top: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.static-theme-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }