/* ==========================================================================
   良配 · 限时推广广告位
   --------------------------------------------------------------------------
   部署说明：本文件被根目录 index.html 直接引用（GitHub Pages 直发根目录，
   不经构建）。改完文案/样式后请把 index.html 里的 ?v=N 版本号 +1 防缓存。

   响应式策略：
     ≥1440px  → 右侧竖排悬浮卡片（贴近容器右侧留白，不遮挡正文）
     <1440px  → 底部横向吸底条（含手机，避免遮挡内容）
   ========================================================================== */

.lp-ad {
  /* 只在本组件内定义变量，不污染全局
     注：原 --lp-secondary（黄 #f5c234）和 --lp-bg（米 #fffaf5）已无人引用，
     2026-10-16 随徽标整块删除一并移除，避免以后误用回黄色。 */
  --lp-primary: #3dad8a;
  --lp-primary-dark: #2e8b6f;
  --lp-accent: #99d93f;
  --lp-surface: #ffffff;
  --lp-border: #e8dfd3;
  --lp-text: #2a2620;
  --lp-text-2: #7d7367;
  --lp-text-3: #9b8f80;

  box-sizing: border-box;
  font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--lp-text);
  line-height: 1.5;
}

.lp-ad *,
.lp-ad *::before,
.lp-ad *::after {
  box-sizing: border-box;
}

/* 初始隐藏，JS 挂载完成后移除 is-hidden，避免样式表加载前闪现 */
.lp-ad.is-hidden {
  display: none !important;
}

/* ---------- 通用零件 ---------- */
/* 2026-10-16：徽标整块删除（原先的 .lp-ad__badge 规则已移除）。
   徽标占的那行高度让给正文，LOGO、品牌名、正文、按钮、备注的字号整体上调。
   右上角仍留出关闭按钮的位置，body 不再需要为徽标让位。 */

.lp-ad__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lp-primary), var(--lp-primary-dark));
  color: #fff;
  /* LOGO 为「良配」两字，字号较单字时调小 */
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  /* 两字 LOGO 永远横排：方块容器里竖排「良/配」非常难看，
     而且容器宽度一旦被调窄就会立刻折行（2026-10-17 实际发生过）。
     从根上禁止折行，具体容器尺寸交给各断点段决定。 */
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(61, 173, 138, 0.32);
}

.lp-ad__limit {
  /* 「（限时推广）」：竖排卡片里绝对定位在 LOGO 正上方、靠左贴边；
     独占一行，不参与 body 的居中流，所以 LOGO 与品牌行的位置完全不动。 */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lp-text-3);
  white-space: nowrap;
}

.lp-ad__brand {
  font-size: 17px;
  font-weight: 800;
  color: var(--lp-text);
  /* 品牌行是「良配 - AI婚恋」，9 个字符。
     用户要求必须完整显示在一行内，所以强制 nowrap：
     宁可字号小一点也不许折行。
     注：2026-10-18 起「（限时推广）」已拆成独立的 .lp-ad__limit 行，
     不再挤在这行里。 */
  white-space: nowrap;
}

.lp-ad__title {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text-2);
}

.lp-ad__title b {
  /* 主文案统一用正文色，不再单独给「喜茶 20 元」上色：
     同一句话里换色会让人误以为这几字是按钮或另一种行动号召 */
  color: inherit;
  font-weight: inherit;
}

.lp-ad__cta {
  display: block;
  margin-top: 10px;
  padding: 11px 15px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--lp-primary), var(--lp-primary-dark));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(61, 173, 138, 0.3);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.lp-ad__cta:hover {
  filter: brightness(1.06);
}

.lp-ad__cta:active {
  transform: scale(0.97);
}

.lp-ad__cta::after {
  content: ' ›';
  font-weight: 700;
}

.lp-ad__note {
  color: var(--lp-text-3);
}

.lp-ad__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lp-text-3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lp-ad__close:hover {
  background: rgba(42, 38, 32, 0.06);
  color: var(--lp-text);
}

/* ---------- 复制口令后的提示 toast ---------- */
.lp-ad-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 10001;
  max-width: min(88vw, 340px);
  padding: 11px 16px;
  border-radius: 12px;
  background: rgba(42, 38, 32, 0.93);
  color: #fff;
  font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transform: translate(-50%, 8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.lp-ad-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 提示里的操作步骤：与首行「已复制」拉开层次，次要字号 */
.lp-ad-toast__steps {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.82;
}

/* 口令本体：常驻可见并支持点击复制。
   自动复制在浏览器里不可靠，这是用户永远的最后一条路。 */
.lp-ad-toast code {
  display: inline-block;
  margin: 6px 0 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.4;
  word-break: break-all;
  cursor: pointer;
  -webkit-user-select: all;
  user-select: all;
}

/* ---------- 右侧竖排卡片（≥1440px） ---------- */
@media (min-width: 1440px) {
  .lp-ad {
    position: fixed;
    top: 88px;
    right: 16px;
    z-index: 9990;
    /* 152px → 176px：品牌行改成「（限时推广）良配 - AI婚恋」后有 15 个字符，
       原宽度放不下会被挤断行。右侧是固定定位，加宽只向左侵占留白，
       不影响正文排版。
       ⚠️ overflow:hidden 是**兜底**：品牌行设了 white-space:nowrap，
          一旦某个浏览器的字体度量偏宽、文字超宽，nowrap 不会折行而是
          直接溢出卡片（2026-10-16 实际发生过，文字被裁在视口外）。
          hidden 保证最坏情况只是文字被裁，不会撑破布局顶到屏幕边上。 */
    width: 176px;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    padding: 14px 12px 12px;
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    background: var(--lp-surface);
    box-shadow: 0 10px 30px rgba(61, 173, 138, 0.14);
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .lp-ad:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(61, 173, 138, 0.22);
  }

  .lp-ad__body {
    display: block;
    position: relative;
  }

  /* 竖排卡片宽 176px，内容区 152px。
     ⚠️ 2026-10-18 踩过一次：在 176px 卡片里给文字多留 12px 的右内边距，
     内容宽只剩 140px，「良配 - AI婚恋」约 145px 直接溢出到视口外。
     所以左右内边距保持对称 12px，不加任何单侧留白。 */
  .lp-ad__limit {
    /* 压在 LOGO 正上方、与卡片内容左边缘对齐（不居中）。
       ⚠️ 不能用 absolute 叠上去：LOGO 是不透明的绿色实心块（还带阴影），
       同层级下会把「（限时推广）」的左半截直接盖掉（2026-10-18 实测）。
       所以放在正常流里、独占一行，LOGO 的 margin-top 让位给这行。 */
    display: block;
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
    color: var(--lp-text-3);
    white-space: nowrap;
  }

  /* 品牌行 9 个字符（「良配 - AI婚恋」在 152px 里约 100px），
     12px 字号下宽裕，比原先塞 14 个字符时更好读。 */
  .lp-ad__brand {
    font-size: 12px;
    letter-spacing: 0;
  }

  /* LOGO 是「良配」两个汉字，必须**横排**。
     ⚠️ 这里踩过一次：容器 48px、字号 24px，2×24=48px 正好等于容器宽度，
     一个字距/字重偏差就折成「良/配」竖排两行（2026-10-17 用户实际遇到）。
     修法不是缩字号，而是把容器放宽到内容宽 + 安全余量，
     并用 white-space:nowrap 从根上禁止折行 —— 竖排在这种方块里永远别扭。
     2026-10-18：上方多了「（限时推广）」一行，margin-top 由 8px 改为 2px，
     卡片总高度基本不变，LOGO 与品牌行的视觉位置保持原样。 */
  .lp-ad__logo {
    width: 72px;
    height: 42px;
    margin: 2px auto 10px;
    font-size: 22px;
    white-space: nowrap;
    letter-spacing: 0.04em;
  }

  /* 竖排卡片宽度有限，主文案按语义手动断行，
     避免浏览器在「无门槛红 / 包」这类词中间折断。
     徽标删除后不用再让位，字号从 12.5px 上调到 14px。 */
  .lp-ad__title {
    font-size: 14px;
    line-height: 1.75;
  }

  .lp-ad__note {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--lp-text-3);
    /* 两行都放得下，不折行 */
    white-space: nowrap;
  }
}

/* ---------- 底部吸底条（<1440px，含手机） ---------- */
@media (max-width: 1439px) {
  .lp-ad {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 10px;
    /* 2026-10-16 徽标删除后，这里不再需要为徽标预留顶部高度。
       原先 padding-top:26px 是给浮在左上角的徽标让位，
       徽标整块删掉后一并收回，让正文上移。 */
    padding: 12px 40px 12px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--lp-border);
    background: var(--lp-surface);
    box-shadow: 0 -6px 22px rgba(42, 38, 32, 0.1);
  }

  /* 2026-10-16：原先这里放 .lp-ad__badge 的 absolute 定位规则，
     徽标整块删除后规则一并移除，body 直接顶到容器上沿。 */

  .lp-ad__body {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 同上：42px 装 2×21px 同样卡在临界点，横向略放宽即可。
     吸底条高度不变（仍是 42px 高），只是横向多占一点。 */
  .lp-ad__logo {
    width: 56px;
    height: 42px;
    margin: 0;
    flex: 0 0 auto;
    font-size: 20px;
    white-space: nowrap;
  }

  .lp-ad__text {
    min-width: 0;
  }

  .lp-ad__brand {
    font-size: 15px;
    margin-bottom: 2px;
  }

  /* 吸底条是横向一条，「（限时推广）」不能压到 LOGO 上，
     而是缩成一个小标签，紧跟品牌行前面、与品牌行同一行显示。 */
  .lp-ad__limit {
    display: inline-block;
    margin-bottom: 3px;
    padding: 1px 6px;
    border-radius: 6px;
    background: #f6f1e9;
    color: var(--lp-text-3);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: 1px;
  }

  .lp-ad__title {
    font-size: 13.5px;
    line-height: 1.5;
    /* 标题已完整显示，徽标删除后不再需要限制行数 */
    display: block;
    overflow: visible;
  }

  /* 吸底条空间有限，隐藏说明与底部注释，只保留主文案 + CTA */
  .lp-ad__note {
    display: none;
  }

  .lp-ad__cta {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 14px;
    white-space: nowrap;
  }
}


.lp-ad-toast code:active {
  background: rgba(255, 255, 255, 0.3);
}

@media (min-width: 1440px) {
  .lp-ad-toast {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, calc(-50% + 8px));
  }

  .lp-ad-toast.is-show {
    transform: translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-ad,
  .lp-ad__cta,
  .lp-ad-toast {
    transition: none;
  }
}