/* ==========================================================
   life-travel-marathon-jump.css — Travel → Marathon 跨模态跳转视觉 — Backlog #97 v4
   ------------------------------------------------------------

   加载序: CSS 第 23 / 37 (index.html <head> 第 23 个 <link>; 后加载的覆盖先加载的)
   ★ 全站 37 个 CSS 的完整加载序 + 职责表见 index.html 头注释「📂 文件结构速查」
     (单一事实源 —— 旧版 19 个文件各抄一份清单, 且停在 25/26/28/31 四个旧版本;
      加一个 CSS 要改 19 处, 编号还是"分组号"而非真实加载位, 现已收敛)
   [v4 重构 2026-09-22] 用户要求 "请模仿跳转 photography 这个, 把跳转 marathon 也和城市
   标签结合, 不要分两个标签". 模仿 photograph thumb (Backlog #81 v12) 的 .tooltip-thumb-hint
   风格, marathon 跳转链接现在**集成在 globe tooltip** (#travelTooltip) 里, 跟照片缩略图
   同卡片显示. 删除之前独立浮层 .travel-tooltip-marathon 相关所有样式 (v3 方案弃用).

   视觉对齐 (跟 photograph thumb-hint 对比):
     - .tooltip-thumb-hint (📷 N 张照片): 静态文本, 灰色 hint 风格
     - .tooltip-marathon-link (🏃 EN →): 跳转按钮, 主题色可点击 + hover 反色

   加载顺序 (跟 life-resume-jump.css 同档, 跟模态相关 CSS 一起):
       ...
       life-marathon.css → life-travel-marathon-jump.css (本文件) → life-travel.css → ...

   跟 JS 配对: life-travel-marathon-jump.js (Backlog #97 v4)
                提供 window.TravelMarathonJump.getMarathonLinkHtml(cnName, date) hook,
                globe.js 在 thumbHtml 后追加 (life-travel-globe-map.js (Backlog #148 起 tooltip 渲染已随 PaperMap 迁到该文件))

   铁律合规:
     - 不透明 > 透明: chip 背景 rgba(255,255,255,0.65) 是 hover 抬升软违规 (TD-3 接受范围)
     - 硬边 > 圆角: 八角切角 4px clip-path, 无 border-radius
     - 物理投影: 跟 .tooltip-thumb-hint 嵌套, 不需要独立 box-shadow
     - 纯色: 单一实色 + hover 反色 (无 linear-gradient)
     - 真实纹理: 沿用 globe tooltip 米白 bg (跟 .resume-modal-container 同色)

   CORS 安全:
     - 纯 CSS, 无 fetch / XHR
     - 不用 @import (file:// 协议铁律)
     - dev server 用 dev-server.py (Backlog #95 ThreadingHTTPServer + CORS 头)
   ========================================================== */


/* ==========================================================
   1. Marathon 链接 (在 globe tooltip 内, 模仿 thumb-hint 风格)
   ------------------------------------------------------------
   跟 .tooltip-thumb-hint (📷 N 张照片) 视觉对齐:
     - 同档字体大小 11px, 同档 letter-spacing 0.05em
     - 同档 margin-top 12px (跟 thumb hint 一致, 不挤压 city info)
   不同点 (因为是跳转按钮):
     - 可点击 (cursor: pointer, 整个 chip 都是 button)
     - hover 反色变深 (跟 .resume-jump-link / .travel-tooltip-marathon-link 同档)
     - 八角切角 4px (跟 .resume-jump-link 一致)
   ========================================================== */
.tooltip-marathon-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    margin-top: var(--space-6);
    padding: 7px var(--space-5);
    font-family: var(--font-sans);
    font-size:var(--type-caption-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.3;
    color: rgba(10, 31, 36, 0.95);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(10, 31, 36, 0.25);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                transform 0.15s ease;
    /* 八角切角 4px, 跟 .resume-jump-link 一致 */
    clip-path: polygon(
        4px 0%,
        calc(100% - 4px) 0%,
        100% 4px,
        100% calc(100% - 4px),
        calc(100% - 4px) 100%,
        4px 100%,
        0% calc(100% - 4px),
        0% 4px
    );
    user-select: none;
}

.tooltip-marathon-link:hover {
    background-color: rgba(10, 31, 36, 0.92);
    color: rgba(255, 224, 130, 0.95);   /* 米黄高亮, 跟 .resume-jump-link hover 同色 */
    border-color: rgba(10, 31, 36, 0.85);
    transform: translateX(2px);
}

.tooltip-marathon-link:focus-visible {
    outline: 2px solid rgba(0, 80, 100, 0.6);
    outline-offset: 2px;
}


/* ==========================================================
   2. Marathon link 内部排版 (EN + date + arrow)
   ------------------------------------------------------------
   跟 photograph thumb-hint 类似, 都是 "emoji + 文字" 布局.
   .tooltip-marathon-text 用 flex, 让 EN + date + arrow 横排,
   EN 占主, date 偏小 + 灰色, arrow 推到右边.
   ========================================================== */
.tooltip-marathon-emoji {
    font-size: var(--icon-emoji);
    line-height: 1;
    flex-shrink: 0;
}

.tooltip-marathon-text {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.tooltip-marathon-en {
    font-weight: 700;
    color: rgba(10, 31, 36, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.tooltip-marathon-date {
    font-size:var(--type-micro);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);
    font-style: italic;
    white-space: nowrap;
    flex-shrink: 0;
}

.tooltip-marathon-arrow {
    margin-left: auto;
    font-size:var(--type-caption);
    color: rgba(10, 31, 36, 0.65);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.tooltip-marathon-link:hover .tooltip-marathon-arrow {
    color: rgba(255, 224, 130, 0.95);
    transform: translateX(2px);
}

/* hover 时 EN / date 跟随 chip 反色 (整个 chip 同步) */
.tooltip-marathon-link:hover .tooltip-marathon-en,
.tooltip-marathon-link:hover .tooltip-marathon-date {
    color: inherit;
}


/* ==========================================================
   3. 响应式 (Responsive)
   ------------------------------------------------------------
   ≤600px 字号略缩, 防止窄屏溢出
   ========================================================== */
@media (max-width: 600px) {
    .tooltip-marathon-link {
        font-size:var(--type-micro);
        padding: var(--space-3) var(--space-4);
    }
    .tooltip-marathon-emoji {
        font-size:var(--icon-emoji);
    }
    .tooltip-marathon-date {
        font-size:var(--type-micro-sm);
    }
}