/**
 * ============================================================
 * 智悦通服务中心 · 使用指南组件样式（guide.css）
 * ============================================================
 * 依赖：styles/tokens.css（--zc-* 设计 token，须先于本文件引入）。
 * 职责：使用指南系列页（ZhiyueGuide.html + guide-*.html）的共享
 *       组件样式；仅放组件/布局，不放设计值（色值一律引用 token）。
 * ============================================================
 */

body {
  font-family: var(--zc-font-family);
  background: #fffbeb; /* 页面奶油底：token 未收录的当页专值，来源 Figma 6182:85 */
  color: var(--zc-text-primary);
}

/* 品牌行动渐变（竖向三段，用于 Hero 与主 CTA） */
.brand-gradient {
  background: linear-gradient(
    180deg,
    var(--zc-action-gradient-start) 0%,
    var(--zc-action-gradient-middle) 50%,
    var(--zc-action-gradient-end) 100%
  );
}

/* 索引页顶栏渐变（横向，仿 Figma 06 功能介绍导航） */
.bar-gradient {
  background: var(--zc-gradient-brand);
}

/* 图标渐变圆底（亮点列表、步骤序号） */
.grad-icon {
  background: linear-gradient(
    160deg,
    var(--zc-action-gradient-start) 0%,
    var(--zc-action-gradient-end) 100%
  );
}

/* 内容卡（白底） */
.spot-card {
  background: var(--zc-bg-surface);
  border-radius: var(--zc-radius-card);
  box-shadow: var(--zc-shadow-card);
}

/* ---------------------------------------------------------
 * 视频占位：等待正式视频，data-video 填 URL 后点击即内联播放
 * --------------------------------------------------------- */
.video-ph {
  position: relative;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(59, 90, 150, 0.35) 0%, rgba(59, 90, 150, 0) 60%),
    linear-gradient(160deg, #253a63 0%, #101c36 55%, #0b1428 100%);
  border-radius: var(--zc-radius-video);
  overflow: hidden;
  cursor: pointer;
}
/* 有视频的容器：poster 图秒加载即成封面，背景改白消除深蓝闪现。
 * 浅色封面上白字标题需底部暗化渐变保证可读（层级：poster/video < 遮罩 < caption/播放按钮） */
.video-ph.has-video {
  background: var(--zc-bg-surface);
}
.video-ph.has-video::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(180deg, rgba(11, 20, 40, 0) 0%, rgba(11, 20, 40, 0.75) 100%);
  pointer-events: none;
}
.video-ph .video-caption {
  z-index: 2;
}
.video-ph .video-cover {
  z-index: 3;
}
/* 独立封面层：poster 图（视频标题帧），点击播放时移除 */
.video-ph .video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 首帧预览（preload=metadata + #t=2，仅拉元数据）与其上的播放按钮层。
 * poster 常驻作封面；帧就绪（loadeddata）后 video 才覆盖显示。 */
.video-ph video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.video-ph video.frame-ready {
  opacity: 1;
}
.video-ph .video-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-ph .play-btn {
  width: 64px;
  height: 64px;
  background: var(--zc-bg-surface);
  border-radius: var(--zc-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}
.video-ph:hover .play-btn {
  transform: scale(1.06);
}
.video-ph .play-tri {
  width: 0;
  height: 0;
  margin-left: 6px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #ef4444;
}
.video-ph .video-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  color: var(--zc-bg-surface);
  font-weight: 700;
  line-height: 1.4;
}

/* 占位点击提示 toast（无视频时） */
#phToast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  background: rgba(30, 41, 59, 0.9);
  color: var(--zc-bg-surface);
  font-size: 14px;
  padding: 10px 16px;
  border-radius: var(--zc-radius-full);
  z-index: 100;
  white-space: nowrap;
}

/* ---------------------------------------------------------
 * Tailwind Play CDN 降级兜底（PR #1067 review）：
 * hidden 承载菜单/toast 交互态，本地声明避免 CDN 失效时交互常驻失效。
 * 其余布局 utility 允许随 CDN 降级（页面可读但无样式），不在此重复。
 * --------------------------------------------------------- */
.hidden { display: none !important; }