/* =========================================================================
 * PBI 公共样式
 *
 * 2026-09 精简：介绍页推倒重做，页面上只剩 pbi-hero，
 * 这份文件也跟着只留 hero 真正用到的。毛玻璃卡、渐变刷入、小胶囊、
 * h2/h3/.pbi-sub/.pbi-head 那些配方全部移走了 ——
 * 等哪个新模块真的要用，再从项目文档 claude/pbi-shared-removed.md 原样放回来。
 *
 * ★ 为什么它还是一个独立文件，而不是并进 pbi-hero/frontend.css ★
 *
 * 1. 这是唯一「改完存盘即生效」的 CSS 通道。
 *    模块自己的 frontend.css 会被合并进 uploads 里的 xtpb-page-css-{id}.css，
 *    改完必须在构建器里保存一次才刷新（Frontend::get_page_css 那套缓存）。
 *    这个文件由主题在 wp_enqueue_scripts 优先级 0 直接 enqueue，不走那条链路。
 *
 * 2. 之后每加一个模块都要用这里的变量、胶囊和按钮。
 *    抄进各模块的 frontend.css 会重复 N 份 —— XTPB 合并页面 CSS 时
 *    array_unique 只在单模块内部去重、跨模块不去重
 *    （Helper.php:xtpb_get_addon_base_css_paths）。
 *
 * ★ 加载顺序很关键 ★
 * 必须排在合并后的页面 CSS（模块 frontend.css 都在里面）之前，
 * 否则两边特异度相同时后加载的赢，模块里的覆盖会全部失效。
 * 所以 enqueue 挂在优先级 0（XTPB 的 Frontend::enqueue_common_style 是优先级 1）。
 *
 * ★ 这里尽量不用 margin / padding 简写 ★
 * 简写会连带重置四个方向。模块里常用 margin-top 拉间距，一旦顺序反了会被吃掉。
 *
 * 所有选择器都收在 .pbi 下面（每个模块的 <section> 都带 .pbi），
 * 避免和主题里的同名 class 打架。
 * ====================================================================== */

.pbi{
  --pbi-grad:linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%);
  --pbi-blue:#007BFF;
  --pbi-ink:#15171A;
  --pbi-text:#5B6472;
  --pbi-text-2:#8A94A3;

  position:relative;
  font-family:"Plus Jakarta Sans","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  color:var(--pbi-text);
  line-height:1.75;
  padding:120px 0;
}
@media (max-width:1199px){ .pbi{ padding:100px 0; } }
@media (max-width:767px){ .pbi{ padding:80px 0; } }

.pbi *{ box-sizing:border-box; }
.pbi img{ max-width:100%; display:block; }

/* 这里不能用 margin:0 auto 简写 —— 它会连带把 margin-top 重置成 0，
   而模块里 .pbi-shot-zone 之类靠 margin-top 拉间距的规则特异度和它相同，
   一旦加载顺序反了就会被吃掉。只写左右两边。 */
.pbi .pbi-wrap{ max-width:1290px; margin-left:auto; margin-right:auto; padding:0 24px; position:relative; z-index:2; }
.pbi .pbi-center{ text-align:center; }

/* ---------------------------------------------------------- 渐变高亮 */
/* 文案里用 [hl]这几个字[/hl] 标出要走蓝色渐变的部分 */
.pbi .pbi-hl{
  background-image:linear-gradient(103.71deg,#5CABFF 10%,#007BFF 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ★ 渐变高亮 + SplitText 的冲突 ★
   SplitText 把每个字拆成独立的 <div> 并写上 transform。
   被 transform 的元素会单独成一层，不再参与祖先的 background-clip:text ——
   于是 .pbi-hl 里的字全部变透明，标题看起来「少了一半」。
   所以拆过字之后，渐变必须落到最里层那些 div 自己身上。

   而且「外面那几层」必须显式关掉：GSAP 写的是 matrix(1,0,0,1,0,0)，
   **单位矩阵不会让元素单独成层**，词层的 background-clip:text 会把同一批
   字形再画一遍，.pbi-hl 自己还会画第三遍。三遍字叠在一起，
   合成时一旦没有像素对齐（HiDPI / 非整数缩放 / GPU 光栅化）就是肉眼可见的重影。

   :has() 那两条负责「有子 div 的都别画」，`.pbi-hl > div` 是不依赖 :has() 的兜底。 */
.pbi .pbi-hl > div,
.pbi .pbi-hl:has(div),
.pbi .pbi-hl div:has(div){ background-image:none; }

.pbi .pbi-hl .char,
.pbi .pbi-hl > div > div,
.pbi .pbi-hl div:not(:has(div)){
  background-image:linear-gradient(160deg,#5CABFF 0%,#007BFF 85%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* 中文整句没有空格，SplitText 拆完是一串相邻的 inline-block，
   相邻两个之间默认没有换行点，窄屏会冲出容器。
   换行点只给「词」那一层，给到单个字上没有意义。
   （首屏 h1 用的是 wa_title_spilt_1；以后有用 tz-itm-title 的板块标题时，
     要补 .tz-itm-title .split-line 和 .tz-itm-title .split-line > div） */
.pbi .wa_title_spilt_1 > div,
.pbi .pbi-hl > div{ overflow-wrap:anywhere;word-break:break-word;max-width:100%; }

/* ------------------------------------------------------ 小标题胶囊 */
/* 逐条对齐主题 main.css 的 .section-title .sub-title */
.pbi .pbi-kicker{
  display:inline-block;margin-bottom:20px;
  font-size:14px;font-weight:600;color:#000;
  height:38px;line-height:33px;border-radius:80px;
  background:rgba(255,255,255,.15);
  box-shadow:0 2px 2px rgba(21,23,25,.1);
  border:3px solid #fff;
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
  padding:0 12px;text-transform:uppercase;white-space:nowrap;
}
.pbi .pbi-kicker.has-chip{ padding:0 19px 0 5px; }
.pbi .pbi-kicker b{
  font-size:14px;font-weight:600;border-radius:80px;
  height:26px;line-height:24px;
  background-image:var(--pbi-grad);color:#fff;
  display:inline-block;padding:0 10px;margin-right:10px;vertical-align:middle;
}
/* 中文小标题比首页的长，窄屏要能换行，否则固定 38px 高 + nowrap 会溢出 */
@media (max-width:520px){
  .pbi .pbi-kicker{ white-space:normal;height:auto;line-height:1.9;padding:3px 12px; }
  .pbi .pbi-kicker.has-chip{ padding:4px 14px 4px 5px; }
}

/* ------------------------------------------------------------ 按钮 */
/* 按钮本体用主题的 .theme-btn-main.style-2，样式全在 main.css:217-360，
   这里只做两件事：容器排布，以及次按钮的底色覆盖。
   动效（hover 箭头换到左边、文字右移 57px）一个字都不用写。 */
.pbi .pbi-btns{ display:flex;gap:12px;flex-wrap:wrap;align-items:center; }
.pbi .pbi-center .pbi-btns{ justify-content:center; }

/* 次按钮：只换底色和文字色，保留主题的全部动效。
   文字色 hover 前后都保持深色 —— 主题的 .theme-btn-main:hover .theme-btn 会把
   底色刷成深色所以配白字，但 style-2 又把底色改回 transparent，
   次按钮底是白的，跟着变白字就看不见了。 */
.pbi .theme-btn-main.style-2.pbi-btn-alt{
  background:rgba(255,255,255,.65);
  box-shadow:0 2px 2px rgba(21,23,25,.1);
}
.pbi .theme-btn-main.style-2.pbi-btn-alt .theme-btn,
.pbi .theme-btn-main.style-2.pbi-btn-alt:hover .theme-btn{ color:var(--pbi-ink); }

/* 文字链接 */
.pbi .pbi-btn-text{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;font-size:15px;font-weight:600;
  color:var(--pbi-text);text-decoration:none;transition:color .25s ease,gap .25s ease;
}
.pbi .pbi-btn-text:hover{ color:var(--pbi-blue);gap:12px; }
.pbi .pbi-btn-text i{ font-size:13px; }

/* ------------------------------------------- 窗口栏地址胶囊（可点时） */
/* 后台给「地址胶囊链接」填了值，pbi-hero 就把 <span> 换成 <a>。
   这几条**故意**放在这里而不是 pbi-hero 的 frontend.css：
   模块 CSS 要等构建器重新保存才会刷新合并文件，在那之前这个 <a>
   会拿到主题默认的链接色和下划线，看着像坏了。
   用 a.pbi-chrome-url（0,2,1）压过 .pbi-hero .pbi-chrome-url（0,2,0），
   和两个文件的加载顺序无关。 */
.pbi a.pbi-chrome-url{
  color:#8894A6;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .25s ease,color .25s ease;
}
.pbi a.pbi-chrome-url:hover,
.pbi a.pbi-chrome-url:focus-visible{
  background-color:#DBE6F3;
  color:var(--pbi-blue);
}
.pbi a.pbi-chrome-url:focus-visible{ outline:2px solid var(--pbi-blue);outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .pbi .pbi-btn-text,
  .pbi a.pbi-chrome-url{ transition:none; }
}