/* ============ 详情页限时推广位 ============
   这份文件同时被前台静态站（site.css 之外单独一份，见 SitePublisher）和后台预览
   （resources/admin/main.tsx 直接 import）使用，所以：

   - 不依赖 site.css 里的变量，全部给出兜底值；
   - 类名统一 promo- 前缀，进入后台样式表也不会撞车；
   - 颜色全部来自内联的 --promo-* 变量（后台选的主题），换主题不用改这里。

   两条视觉原则：
   1) 扁平：没有高光、没有内投影、没有扫光。层次靠「实心 vs 浅底 + 细边」区分，
      动效只改颜色，不做位移与发光。
   2) 跨线：胶囊绝对定位居中压在「选择适合你的方案」那根横线（.offer-list-heading
      的 border-top）上，靠不透明底色把线从中间截断。窄屏放不下时退回静态排布。
*/

.detail-promos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 2px;
  font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', sans-serif;
  color: var(--promo-ink, #16233a);
}
/* 到期的条目由 site.js 直接摘掉；这条只是兜底：.promo-block 自带 display，
   UA 的 [hidden] 压不住 */
.detail-promos > [hidden] {
  display: none !important;
}

/* —— 跨线：只在够宽的时候成立，见文末的窄屏回退 —— */
.offer-list-heading.has-promos {
  position: relative;
  /* 线改由胶囊容器的两侧伪元素来画：胶囊之间的那段才不会露出一小截线头 */
  border-top-color: transparent;
  /* 胶囊上半截会探到线上方 15px，这段外边距把它和上面的简介拉开到 ~17px 的净空 */
  margin-top: 32px;
  /* 胶囊下半截同样占 15px，再留 15px 才轮到标题 —— 上下两侧的呼吸大致对称 */
  padding-top: 30px;
}
.offer-list-heading.has-promos > .detail-promos {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  /* 两条 1px 的线由伪元素撑开，胶囊永远居中压在它们之间 */
  flex-wrap: nowrap;
}
.offer-list-heading.has-promos > .detail-promos::before,
.offer-list-heading.has-promos > .detail-promos::after {
  content: '';
  flex: 1 1 auto;
  min-width: 12px;
  height: 1px;
  background: var(--line, rgba(20, 50, 100, 0.09));
}

/* —— 按钮 / 文字链接共用的骨架 —— */
.promo-block,
.promo-btn,
.promo-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 30px;
  max-width: 100%;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.012em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
/* 多条并排时允许被压缩，文字走省略号（见下） */
.detail-promos > .promo-block {
  flex: 0 1 auto;
  min-width: 0;
}
.promo-block:focus-visible,
.promo-btn:focus-visible,
.promo-link:focus-visible {
  outline: 2px solid var(--promo-from, #fb7185);
  outline-offset: 2px;
}

.promo-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 图标：一道细描边，不套圆底 */
.promo-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: inherit;
}
.promo-icon svg {
  width: 13px;
  height: 13px;
}

/* 尾部箭头：只留一道细线 */
.promo-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 11px;
  height: 11px;
  opacity: 0.55;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}
.promo-go svg {
  width: 10px;
  height: 10px;
}
.promo-block:hover .promo-go {
  transform: translateX(1px);
  opacity: 0.9;
}

/* —— 按钮：实心、扁平；底色是清新的中高明度，文字用同色系墨色（--promo-fg）。
      hover 只往「更亮」走（--promo-to 比 from 亮），不做压暗 —— */
.promo-block.is-button,
.promo-btn {
  color: var(--promo-fg, #0b1526);
  background-color: var(--promo-from, #38bdf8);
}
.promo-block.is-button:hover,
.promo-btn:hover {
  background-color: var(--promo-to, #7dd3fc);
}
.promo-block.is-button:active,
.promo-btn:active {
  background-color: var(--promo-from, #38bdf8);
}

/* —— 文字链接：主题色系的浅底 + 同色系墨字，不用纯黑 —— */
.promo-block.is-link,
.promo-link {
  color: var(--promo-ink, #be123c);
  background-color: var(--promo-soft, #fff1f3);
  box-shadow: inset 0 0 0 1px var(--promo-line, #fbd0d7);
}
.promo-block.is-link:hover,
.promo-link:hover {
  /* 悬停是「提亮」：底色退回纯白，描边换成主题色，轮廓更清楚。
     不做位移 —— 跨在线上时移动会让胶囊离开那根线。 */
  background-color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--promo-line, #fbd0d7) 40%, var(--promo-from, #fb7185));
}
/* 图标与箭头跟着文字走，整条只有一个色相 */
.promo-block.is-link .promo-icon,
.promo-link .promo-icon,
.promo-block.is-link .promo-go,
.promo-link .promo-go {
  color: var(--promo-ink, #be123c);
}

/* —— 自定义 HTML：整块居中，提供可复用的按钮/链接类 —— */
.promo-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* 不用 width:100%：几条并排时自定义块也该能坐在同一行里；内容长了自己会换行 */
  max-width: 100%;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  color: var(--promo-ink, #16233a);
}
.promo-custom .promo-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.promo-custom .promo-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--promo-soft, #fff1f3);
  box-shadow: inset 0 0 0 1px var(--promo-line, #fbd0d7);
  color: var(--promo-ink, #be123c);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.promo-custom .promo-note {
  color: var(--promo-ink-2, #5b6b82);
  font-size: 11.5px;
}
.promo-custom .promo-strong {
  font-weight: 700;
  color: var(--promo-ink, #be123c);
}
/* 自定义 HTML 里没加类的普通链接：只改颜色，不靠下划线 */
.promo-custom a:not(.promo-btn):not(.promo-link) {
  color: var(--promo-ink, #be123c);
  font-weight: 600;
}

/* 窄屏（含详情弹窗）：宽度不够跨线，退回「线 → 标题 → 胶囊」的普通排布 */
@media (max-width: 520px) {
  .offer-list-heading.has-promos {
    margin-top: 0;
    padding-top: 16px;
    /* 退回静态排布后，线回到标题自己身上 */
    border-top-color: var(--line, rgba(20, 50, 100, 0.09));
  }
  .offer-list-heading.has-promos > .detail-promos {
    position: static;
    transform: none;
    margin: 12px 0 2px;
    flex-wrap: wrap;
  }
  .offer-list-heading.has-promos > .detail-promos::before,
  .offer-list-heading.has-promos > .detail-promos::after {
    display: none;
  }
  .detail-promos {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-block,
  .promo-btn,
  .promo-link,
  .promo-go {
    transition: none;
  }
  .promo-block:hover .promo-go {
    transform: none;
  }
}