/* ============================================================
   产品卡功能标签长按 tooltip（KS100 五大功能）
   适用页面：index.html（kyroc/buy.html / kyroc/contact.html 无此标签）
   由 css/index-nav.css 通过 @import 加载

   设计要点：
   1. 桌面 :hover 鼠标悬停立即显示（无延迟）
   2. 移动端单触发：长按(:active) 0.3s 后浮出、松手即消失（纯 CSS 长按语义，无 JS）
   3. 用 ::before 显示文字（attr(data-tip)）、::after 显示小三角
   4. 不依赖 JS，纯 CSS；标签若未带 data-tip 属性，content 为空、不渲染
   5. 仅作用于带 data-tip 的标签；KS100 / KS200 的功能 chip 均带 data-tip
   6. z-index 高于卡片，但低于页眉与弹出菜单（页眉 z-index 1000+）
   7. 互斥：任何标签被 hover/active 时，其他标签的 tooltip 立即隐藏
      （用 :has() 父容器感知子元素状态，无需 JS 事件绑定）
   8. 位置：tooltip 文字左缘 = 标签 box 左缘（再往左 12px 抵消标签 padding-left）
      使 tooltip 文字相对标签 box 真正「左对齐」，视觉更靠左
   ============================================================ */

/* === 1. 基础：标签需要 position 才能承托绝对定位 tooltip === */
.product-feature[data-tip] {
    position: relative !important;
    cursor: help;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* === 2. tooltip 容器（::before 文字 + ::after 三角共用位置） === */
.product-feature[data-tip]::before,
.product-feature[data-tip]::after {
    position: absolute;
    bottom: calc(100% + 10px);
    left: -12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transition-delay: 0s;
    z-index: 50;
}

/* === 3. tooltip 文字层 === */
.product-feature[data-tip]::before {
    content: attr(data-tip);
    transform: translateY(4px);
    background: rgba(15, 23, 42, 0.95);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    max-width: 240px;
    width: max-content;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* === 4. tooltip 小三角（指向标签内容位置） === */
.product-feature[data-tip]::after {
    content: '';
    transform: translateY(4px);
    border: 6px solid transparent;
    border-top-color: rgba(15, 23, 42, 0.95);
    width: 0;
    height: 0;
    bottom: calc(100% + 4px);
    left: 12px;
}

/* === 5. 桌面端：hover 立即显示（鼠标语义，无延迟） === */
@media (hover: hover) and (pointer: fine) {
    .product-feature[data-tip]:hover::before,
    .product-feature[data-tip]:hover::after {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 6. 触摸设备：长按 :active 0.3s 浮出 tooltip（纯 CSS，松手即消失） === */
@media (hover: none) and (pointer: coarse) {
    /* 轻点抬起手指的瞬间 :active 即结束，不足 0.3s 不触发——这就是触摸屏的
       「长按」语义，无需 JS。注：轻点（tap）不会显示 tooltip，只有按住不松
       满 0.3s 才会浮出，松手立即消失。 */
    .product-feature[data-tip]:active::before,
    .product-feature[data-tip]:active::after {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.3s;
    }
}

/* === 7. 互斥：当任一 tooltip 被触发，其他标签的 tooltip 立即隐藏 ===
   用 :has() 让父容器 .product-features 感知子元素状态；
   父容器内有任一标签处于 :hover / :active，则所有未触发标签的
   tooltip 强制隐藏、缩短 transition-delay 至 0 让隐藏瞬间完成。
   浏览器不支持 :has() 时，本规则静默失效，tooltip 仍能正常工作
   （只是失去互斥效果），属于优雅降级。 */
.product-features:has(.product-feature[data-tip]:is(:hover, :active))
    .product-feature[data-tip]:not(:is(:hover, :active))::before,
.product-features:has(.product-feature[data-tip]:is(:hover, :active))
    .product-feature[data-tip]:not(:is(:hover, :active))::after {
    opacity: 0 !important;
    transform: translateY(4px) !important;
    transition-delay: 0s !important;
}

/* === 8. 边缘标签独立偏移（仅针对最长 tooltip「人离开产品一段距离，...」）===
   这条文案最长 ~14 字 + 标点 ≈ 192px，是 5 个标签里唯一会让 tooltip
   末端溢出 .product-card 右内边距的（"离开锁屏" 在卡片中后段）。
   默认 left:-12px 对其他 4 个标签完美，但这个标签需要再往左挪 108px
   使 tooltip 文字完整落在卡片内；其他 4 个标签位置不动、互斥规则不动。
   用 [data-tip*="..."] 属性子串匹配，避开 nth-of-type 在顺序改动时易脆。 */
.product-features .product-feature[data-tip*="人离开产品一段距离"]::before {
    left: -120px !important;
}
.product-features .product-feature[data-tip*="人离开产品一段距离"]::after {
    left: 0 !important;
}