/* ==========================================================================
   话术精灵宣传片：画面是 promo-film.js 在画布上现画的，这里只管画布外框与播放控件。
   画面本身是黑底橙光的「片子」，两种网站主题下都一样；控件跟着网站变量走。
   ========================================================================== */

.promo {
  margin: 0;
}

.promo-screen {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #000;
}

.promo-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* 竖屏短片（why.html、freight.html、diff.html，1080×1920，给手机上刷短视频的人看）：桌面上不超过一屏高、最宽 460px，在页面里水平居中（issue #22；标题仍靠左）；控制条跟画面一样宽 */
.promo--tall {
  width: min(100%, 460px, calc((100vh - 160px) * 9 / 16));
  min-width: min(100%, 300px);
  margin-inline: auto;
}

/* 片子下面那行按钮跟片子一起居中（issue #22 后续）；只认同一 section 里排在竖屏短片后面的 .actions，别的页面的按钮行不受影响 */
.promo--tall ~ .actions {
  justify-content: center;
}

.promo--tall .promo-canvas {
  aspect-ratio: 9 / 16;
}

/* 封面：整块都是播放按钮 */
.promo-cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 0 6%;
  border: 0;
  background: transparent;
  color: #fff;
  font: 600 15px/1.4 inherit;
  cursor: pointer;
}

.promo-cover[hidden] {
  display: none;
}

.promo-cover-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #ff6b2c;
  color: #000;
  transition: transform 0.18s ease;
}

.promo-cover:hover .promo-cover-icon,
.promo-cover:focus-visible .promo-cover-icon {
  transform: scale(1.08);
}

.promo-cover-icon svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
  fill: currentColor;
}

.promo-cover-text {
  padding: 2px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
}

.promo-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.promo-track {
  position: relative;
  flex: 1;
  height: 22px;
  cursor: pointer;
  touch-action: none;
}

.promo-track::before,
.promo-fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 2px;
  background: var(--line-strong);
}

.promo-fill {
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.promo-track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.promo-time {
  flex: none;
  min-width: 84px;
  color: var(--fg-muted);
  font: 13px/1 var(--mono);
  text-align: right;
}

/* 全屏：画面按 16:9 撑满，控件压在底边 */
.promo:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px 16px;
  background: #000;
}

.promo:fullscreen .promo-screen {
  width: min(100%, calc((100vh - 70px) * 16 / 9));
  margin: 0 auto;
  border: 0;
}

.promo:fullscreen .promo-bar {
  width: min(100%, calc((100vh - 70px) * 16 / 9));
  margin: 12px auto 0;
  --fg: #f5f5f5;
  --fg-muted: #b8b8b8;
  --line-strong: #3f3f3f;
}

.promo--tall:fullscreen {
  width: auto;
}

.promo--tall:fullscreen .promo-screen,
.promo--tall:fullscreen .promo-bar {
  width: min(100%, calc((100vh - 70px) * 9 / 16));
}

@media (max-width: 520px) {
  .promo-bar {
    gap: 8px;
  }

  .promo-time {
    min-width: 0;
  }
}