/* ==========================================================================
   公司标准 UI 资产库 (ui-library.css)
   作用：跨项目通用资产（古腾堡全场景排版修复 + 高频通用数字阴影库）
   说明：全代码采用写死硬值，无 CSS 变量，绝对零碰撞；无盲目 !important 强压
   ========================================================================== */


/* ==========================================================================
   一、 古腾堡内容在 Bricks 主题下的全场景排版修复
   作用域：.brxe-post-content（文章正文区域）
   ========================================================================== */

/* 1. 标题块基础排版重置 */
.brxe-post-content :is(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  font-size: revert;
  line-height: revert;
  color: revert;
  margin-block-start: 1.2em;
  margin-block-end: 0.6em;
}

/* 2. 段落与首字大写 */
.brxe-post-content p,
.brxe-post-content .wp-block-paragraph {
  margin-block-start: 0;
  margin-block-end: 1.25em;
}

.brxe-post-content p.has-drop-cap:not(:focus)::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  font-weight: bold;
  margin-inline-end: 0.15em;
  margin-block-start: 0.1em;
}

/* 清除正文最后一个直接元素的下边距，防止撑大容器 (替代原 !important) */
.brxe-post-content > *:last-child {
  margin-block-end: 0;
}

/* 清理古腾堡空段落 */
.brxe-post-content p:empty,
.brxe-post-content .wp-block-paragraph:empty {
  display: none;
}

/* 3. 图像与媒体（含响应式视频） */
.brxe-post-content .wp-block-image,
.brxe-post-content figure.wp-block-image,
.brxe-post-content .wp-block-embed {
  margin-block-start: 1.5em;
  margin-block-end: 1.5em;
}

.brxe-post-content figure {
  margin: 0;
}

.brxe-post-content figure img,
.brxe-post-content .wp-block-image img,
.brxe-post-content video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 响应式视频与嵌入媒体（如 B站 / YouTube） */
.brxe-post-content .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.brxe-post-content .wp-block-embed__wrapper iframe,
.brxe-post-content .wp-block-embed__wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4. 列表、引用与表格 */
.brxe-post-content :is(ul, ol, .wp-block-list) {
  margin-block-end: 1.25em;
  padding-inline-start: 1.5em;
}

.brxe-post-content .wp-block-quote {
  margin-block: 1.5em;
  padding-inline-start: 1em;
  border-inline-start: 4px solid currentColor;
}

.brxe-post-content .wp-block-quote p {
  margin-block-end: 0.5em;
}

.brxe-post-content .wp-block-table {
  margin-block-end: 1.5em;
  width: 100%;
  overflow-x: auto; /* 防止手机端超宽表格撑破屏幕 */
}

/* 5. 按钮块重置 (Buttons Block) */
.brxe-post-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  margin-block-end: 1.5em;
}

.brxe-post-content .wp-block-button__link {
  display: inline-block;
  padding: 0.6em 1.2em;
  text-decoration: none;
  border-radius: 4px;
  background-color: #222;
  color: #fff;
  transition: opacity 0.2s ease;
}

.brxe-post-content .wp-block-button__link:hover {
  opacity: 0.9;
  color: #fff;
}

/* 6. 分栏布局移动端适配 (Columns Block) */
.brxe-post-content .wp-block-columns {
  display: flex;
  gap: 1.5em;
  margin-block-end: 1.5em;
}

@media (max-width: 768px) {
  .brxe-post-content .wp-block-columns {
    flex-direction: column;
  }
}

/* 7. 代码块与预格式化文本 (Code & Pre) */
.brxe-post-content :is(pre, .wp-block-code) {
  background-color: #f5f5f5;
  padding: 1em;
  border-radius: 6px;
  overflow-x: auto;
  font-family: monospace;
  font-size: 0.9em;
  margin-block-end: 1.5em;
  white-space: pre-wrap;
  word-break: break-word;
}


/* ==========================================================================
   二、 高频通用阴影库 (Box-Shadow Utilities)
   使用说明：在 Bricks 或 HTML 中直接挂载类名（如 .b-shadow-08）
   如需悬浮动效，再额外增加叠加挂载 .b-shadow-hover
   ========================================================================== */

/* --------------------------------------------------------------------------
   第一阶：微弱 / 贴地阴影 (输入框、微型标签、浅色按钮)
   -------------------------------------------------------------------------- */
.b-shadow-01 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.b-shadow-02 { box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px; }
.b-shadow-03 { box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.15); }
.b-shadow-04 { box-shadow: rgba(0, 0, 0, 0.08) 0 4px 12px; }
.b-shadow-05 { box-shadow: 0px 1px 0px rgba(17, 17, 26, 0.05), 0px 0px 8px rgba(17, 17, 26, 0.08); }


/* --------------------------------------------------------------------------
   第二阶：标准卡片 / 中等悬浮 (博客卡片、服务区块、产品列表)
   -------------------------------------------------------------------------- */
.b-shadow-06 { box-shadow: 0 7px 29px 0 rgba(100, 100, 111, 0.15); }
.b-shadow-07 { box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px; }
.b-shadow-08 { box-shadow: 0 4px 16px rgba(17, 17, 26, 0.08), 0 8px 24px rgba(17, 17, 26, 0.04); }
.b-shadow-09 { box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.b-shadow-10 { box-shadow: rgba(0, 0, 0, 0.15) 0 5px 15px 0; }


/* --------------------------------------------------------------------------
   第三阶：深层浮层 / 弹窗 / 菜单 (Sticky Header, Dropdown, Modal 弹窗)
   -------------------------------------------------------------------------- */
.b-shadow-11 { box-shadow: rgba(0, 0, 0, 0.1) 0 10px 50px; }
.b-shadow-12 { box-shadow: rgba(0, 0, 0, 0.2) 0 18px 50px -10px; }
.b-shadow-13 { box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.15); }
.b-shadow-14 { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.b-shadow-15 { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3); }


/* --------------------------------------------------------------------------
   第四阶：多层弥散 & 质感阴影 (Tailwind / Stripe / Apple 风格)
   -------------------------------------------------------------------------- */
.b-shadow-16 { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.b-shadow-17 { box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3); }
.b-shadow-18 { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
.b-shadow-19 { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.05); }
.b-shadow-20 { box-shadow: rgba(0, 0, 0, 0.05) 0 6px 24px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px; }


/* --------------------------------------------------------------------------
   三、 悬浮动效扩展类 (Hover Interaction)
   说明：仅对需要鼠标悬停上升的卡片叠加此类，避免影响导航栏等静态组件
   -------------------------------------------------------------------------- */
.b-shadow-hover {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.b-shadow-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* ==========================================================================
   四、 通用毛玻璃 / 磨砂质感库 (Backdrop Filter Utilities)
   命名规则：.b-glass-01 至 .b-glass-10
   设计原则：仅控制模糊与滤镜，不写死 background-color（方便 Bricks 里随意换颜色）
   使用说明：需搭配带有 alpha 透明度的背景色使用（如 rgba(255,255,255,0.7) 或 rgba(0,0,0,0.5)）
   ========================================================================== */

/* --------------------------------------------------------------------------
   轻度模糊 (适合：微型卡片、轻度遮罩、浮动工具栏)
   -------------------------------------------------------------------------- */

/* 1. 极轻微磨砂 (4px) - 保持背景清晰，仅增加少许质感 */
.b-glass-01 {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 2. 基础小模糊 (8px) - 标准提示框、轻量 Header 悬浮 */
.b-glass-02 {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* --------------------------------------------------------------------------
   中度标准磨砂 (适合：Sticky 导航栏、下拉菜单、常见 Card)
   -------------------------------------------------------------------------- */

/* 3. 标准 iOS / macOS 沉浸式磨砂 (12px) - 最推荐的高频通用效果 */
.b-glass-03 {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 4. 标准增艳磨砂 (12px + 120% 饱和度) - 让背景色彩更鲜艳透亮 */
.b-glass-04 {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

/* 5. 进阶通透磨砂 (16px) - 遮罩感强，常用于重要 Floating Menu */
.b-glass-05 {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* --------------------------------------------------------------------------
   深度重度磨砂 (适合：Modal 弹窗背景遮罩、全屏菜单、深色模式悬浮层)
   -------------------------------------------------------------------------- */

/* 6. 高强度模糊 (20px) - 背景内容基本模糊成渐变色 */
.b-glass-06 {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* 7. 高强度增强版 (20px + 150% 饱和度) - 极为通透的高级商业质感 */
.b-glass-07 {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* 8. 极致重度磨砂 (30px) - 彻底抹平背景细节，适合大弹窗/侧边抽屉 */
.b-glass-08 {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}


/* --------------------------------------------------------------------------
   特殊艺术滤镜磨砂 (适合：高级感品牌卡片、暗黑模式设计)
   -------------------------------------------------------------------------- */

/* 9. 影院级对比磨砂 (16px + 120% 对比度) - 提亮高光、压暗暗部，非常有质感 */
.b-glass-09 {
  backdrop-filter: blur(16px) contrast(120%);
  -webkit-backdrop-filter: blur(16px) contrast(120%);
}

/* 10. 全功能高保真磨砂 (16px + 150% 饱和度 + 110% 对比度) */
.b-glass-10 {
  backdrop-filter: blur(16px) saturate(150%) contrast(110%);
  -webkit-backdrop-filter: blur(16px) saturate(150%) contrast(110%);
}