/* ============================================================================
 * 【BWPB 2026-10-08 S0-1】前端装修区块样式 —— 全量重写
 *
 * 为什么要重写（P0-1）：
 *   旧文件是 bw-mega-menu 时代的「大型下拉面板」样式，核心两条规则是
 *       .bwpb-page-blocks-dropdown          { position: absolute; display: none; }
 *       .bwpb-has-page-blocks:hover > ...   { display: block; }
 *   导致装修内容 100% 不显示 —— 因为触发显示所依赖的父类 .bwpb-has-page-blocks
 *   从来没有任何代码输出过。页面内联区块本就不该用 absolute + hover 控制显隐。
 *
 * 设计约束：
 *   1) 本文件不参与主题的 Tailwind 构建，故不能写 dark: 变体类（写了也不会被编译）。
 *      暗色适配统一改用 color-mix(in srgb, currentColor N%, transparent) —— 颜色跟随
 *      继承来的文字色，浅色/深色背景自动正确，无需判断主题用哪种暗黑机制。
 *      不支持 color-mix 的旧浏览器会落到上一行的 rgba() 回退值。
 *   2) 不设 z-index、不创建新的层叠上下文，避免破坏主题 Swup / 侧栏的 z-index 体系。
 *   3) 颜色优先取主题变量 --bee-primary，取不到时回退内置值。
 * ========================================================================== */

/* ---------- 1. 坑位容器 ---------- */
.bwpb-slot {
    position: relative;
    width: 100%;
    margin: 0 0 20px;
}
.bwpb-slot,
.bwpb-slot * {
    box-sizing: border-box;
}

.bwpb-slot--plain,
.bwpb-slot--banner {
    padding: 0;
}

/* ---------- 2. 列布局（flex，栅格由内联 style 覆盖） ---------- */
.bwpb-slot-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

/* 未显式设置栅格占比时等分各列；
   显式设置时由元素上的内联 style="flex:0 0 X%" 覆盖（内联优先级高于类选择器）。 */
.bwpb-column {
    flex: 1 1 0;
    min-width: 0;
}

/* ---------- 3. 积木通用 ---------- */
.bwpb-widget {
    width: 100%;
    margin-bottom: 20px;
}
.bwpb-widget:last-child {
    margin-bottom: 0;
}

.bwpb-widget-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    padding-bottom: 8px;
    color: inherit;
    border-bottom: 1px solid rgba(0, 0, 0, .08);                              /* 回退 */
    border-bottom-color: color-mix(in srgb, currentColor 12%, transparent);   /* 自适应 */
}

.bwpb-widget-content {
    color: inherit;
}

.bwpb-widget-empty {
    margin: 0;
    font-size: 13px;
    opacity: .6;
}

/* 链接型列表：nav_menu / categories / recent_posts / rss 共用 */
.bwpb-widget-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.bwpb-widget-content ul li {
    padding: 4px 0;
}
.bwpb-widget-content ul li a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}
.bwpb-widget-content ul li a:hover {
    color: var(--bee-primary, #3858e9);
}

/* ---------- 4. 图片横幅 ---------- */
.bwpb-widget-image-link {
    display: block;
}
.bwpb-widget-image-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ---------- 5. posts_grid（文章 / 商品推荐列表） ---------- */
.bwpb-posts-grid {
    margin: 0;
    padding: 0;
    list-style: none;
}
.bwpb-posts-grid-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .06);                             /* 回退 */
    border-bottom-color: color-mix(in srgb, currentColor 10%, transparent);   /* 自适应 */
}
.bwpb-posts-grid-item:last-child {
    border-bottom: none;
}
.bwpb-posts-grid-link {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s ease;
}
.bwpb-posts-grid-link:hover {
    color: var(--bee-primary, #3858e9);
}
.bwpb-posts-grid-date {
    flex: none;
    font-size: 12px;
    opacity: .55;
}

/* ---------- 6. icon_box（图标导航卡片） ---------- */
.bwpb-icon-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, .08);                                     /* 回退 */
    border-color: color-mix(in srgb, currentColor 12%, transparent);          /* 自适应 */
    border-radius: 10px;
    background: rgba(0, 0, 0, .015);                                          /* 回退 */
    background: color-mix(in srgb, currentColor 3%, transparent);             /* 自适应 */
    transition: border-color .2s ease, transform .2s ease;
}
.bwpb-icon-box:hover {
    border-color: var(--bee-primary, #3858e9);
    transform: translateY(-2px);
}
.bwpb-icon-box-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
}
.bwpb-icon-box-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    opacity: .75;
}
.bwpb-icon-box-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--bee-primary, #3858e9);
    text-decoration: none;
}
.bwpb-icon-box-link:hover {
    text-decoration: underline;
}

/* HOT / NEW 之类角标 */
.bwpb-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
    background: #f5222d;
    border-radius: 4px;
}

/* ---------- 7. 自定义器内的空态占位（仅 is_customize_preview 时由 PHP 输出） ---------- */
.bwpb-customizer-placeholder {
    margin-bottom: 20px;
    padding: 15px;
    border: 2px dashed #1890ff;
    border-radius: 6px;
    background: rgba(24, 144, 255, .05);
    color: #1890ff;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}
.bwpb-customizer-placeholder:hover {
    background: rgba(24, 144, 255, .1);
}

/* ---------- 8. 移动端：多列强制单列堆叠 ---------- */
@media (max-width: 767px) {
    .bwpb-slot-inner {
        flex-direction: column;
        gap: 12px;
    }
    .bwpb-column {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ---------- 9. 坑位容器变体（S1 新增） ----------
 * 坑位定义里 container 可选 plain|banner|card|sidebar（见 BWPB_Slots::load_defaults）。
 * plain / banner 已在第 1 节定义；这里补 card / sidebar 两个变体，
 * 供 S2 埋点铺开时直接使用，避免届时再改一次 CSS。
 * sidebar 变体虽然本期不埋点（Q8 决策：侧栏先不装修），但样式先备好，
 * 未来放开时无需再动本文件。 */
.bwpb-slot--card {
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, .08);                                  /* 回退 */
    border-color: color-mix(in srgb, currentColor 12%, transparent);       /* 自适应 */
    border-radius: 12px;
    background: rgba(0, 0, 0, .015);                                       /* 回退 */
    background: color-mix(in srgb, currentColor 3%, transparent);          /* 自适应 */
}

.bwpb-slot--sidebar .bwpb-slot-inner {
    gap: 14px;
}

/* ---------- 10. 布局模式变体（【BWPB 2026-10-08 S3】补全） ----------
 * 背景：BWPB_Renderer::container_classes() 一直在输出 `bwpb-layout-{mode}`，
 * 但本文件此前**没有任何 .bwpb-layout-* 规则** —— 于是站长在弹窗里把「布局模式」
 * 从「标准」改成「卡片 / 紧凑」后，前端**视觉上毫无变化**（选了等于没选）。
 * 这里补齐四个模式里真正需要样式的三个；standard 即默认值，无需额外规则。
 *
 * 注意与 container 变体的区别：
 *   container（坑位定义里定死）→ `.bwpb-slot--{plain|banner|card|sidebar}`
 *   mode（站长在规则里选）      → `.bwpb-layout-{standard|fullwidth|card|sidebar}`
 * 两者独立可叠加，故这里的样式刻意只用「本模式独有的效果」，不重复 container 的职责。 */

/* 通栏：解除 max_width 约束（PHP 侧同时不再输出 max-width 内联样式）。
   刻意不用 100vw 负 margin 做「真·全出血」—— 那会引入横向滚动条风险，
   与本文件「不创建新层叠上下文 / 不破坏主题布局」的约束冲突。 */
.bwpb-layout-fullwidth {
    max-width: none;
}

/* 卡片：带描边与内边距 */
.bwpb-layout-card {
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, .08);                                  /* 回退 */
    border-color: color-mix(in srgb, currentColor 12%, transparent);       /* 自适应 */
    border-radius: 12px;
    background: rgba(0, 0, 0, .015);                                       /* 回退 */
    background: color-mix(in srgb, currentColor 3%, transparent);          /* 自适应 */
}

/* 紧凑：列间距更小 */
.bwpb-layout-sidebar .bwpb-slot-inner {
    gap: 14px;
}

/* ============================================================================
 * 11. 轮播积木（【BWPB 2026-10-08 S4】新增）
 *
 * ★ 本节的默认态（无 JS）就是「可横向滚动的 scroll-snap 列表」——
 *   这是**正式形态**，不是兜底：没有脚本时用户照样能滑动看图。
 *   脚本就绪后给根节点加 is-enhanced，才把箭头 / 圆点放出来。
 *   所以这里所有「装饰件」都写成 `.bwpb-carousel.is-enhanced[data-xxx="1"] … { display: … }`，
 *   未增强时它们是 display:none —— 不会出现「两个点了没反应的死按钮」。
 *
 * ★ 箭头/圆点用**固定白底深色前景**，不跟随 currentColor：
 *   它们浮在图片上，而图片底色不可预测。跟随 currentColor 时，
 *   浅色文字主题 + 浅色图片 = 按钮看不见。白底 + 阴影在任何主题/任何图上都清晰。
 * ========================================================================== */

.bwpb-carousel {
    position: relative;
}

.bwpb-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    /* proximity 而非 mandatory：强制吸附会在部分浏览器上打断 scrollTo 的平滑动画，
       而且「稍微拖一点就弹回去」的手感对长图不友好。 */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    scrollbar-width: none;          /* Firefox */
}
.bwpb-carousel-viewport::-webkit-scrollbar {
    display: none;                  /* Chrome / Safari */
}

.bwpb-carousel-track {
    display: flex;
    gap: 0;                         /* 一屏一张，不做并列缩略 */
    margin: 0;
    padding: 0;
    list-style: none;
}

.bwpb-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    scroll-snap-align: center;
}

/* 单张：没有可吸附的目标，去掉 snap 免得产生「滚动位置漂移」的错觉 */
.bwpb-carousel--single .bwpb-carousel-viewport {
    scroll-snap-type: none;
}

.bwpb-carousel-link {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

/* 图片撑满 slide。slide 的高度来自 PHP 输出的内联 aspect-ratio，
   img 用 height:100% 填满 —— 两者配合可避免加载期的布局抖动（CLS）。
   aspect_ratio 选了「原始比例」时 slide 无内联样式，img 自然高度。 */
.bwpb-carousel-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- 左右箭头 ----- */
.bwpb-carousel-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .82);
    color: #1a1a1a;                 /* 明确指定：背景是图片，不可继承 */
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
    transition: background-color .2s, opacity .2s;
    opacity: .92;
}
.bwpb-carousel-arrow:hover {
    background: #fff;
    opacity: 1;
}
.bwpb-carousel.is-enhanced[data-arrows="1"] .bwpb-carousel-arrow {
    display: flex;
}
.bwpb-carousel-arrow--prev { left: 10px; }
.bwpb-carousel-arrow--next { right: 10px; }

/* 用 CSS 画箭头（不引图标字体 / 不引 SVG —— 少一份资源，也就少一个失败点） */
.bwpb-carousel-arrow > span {
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.bwpb-carousel-arrow--prev > span { transform: rotate(-135deg); margin-left: 3px; }
.bwpb-carousel-arrow--next > span { transform: rotate(45deg); margin-right: 3px; }

/* ----- 圆点指示器 ----- */
.bwpb-carousel-dots {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
}
.bwpb-carousel.is-enhanced[data-dots="1"] .bwpb-carousel-dots {
    display: flex;
}

.bwpb-carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(0, 0, 0, .28);
    transition: width .2s, background-color .2s;
}
.bwpb-carousel-dot.is-active {
    width: 18px;
    background: rgba(0, 0, 0, .72);
}

/* ============================================================================
 * 12. 排行榜积木（【BWPB 2026-10-08 S4】新增）
 * ========================================================================== */

.bwpb-rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bwpb-rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);                           /* 回退 */
    border-bottom-color: color-mix(in srgb, currentColor 8%, transparent); /* 自适应 */
}
.bwpb-rank-item:last-child {
    border-bottom: 0;
}

/* 名次徽标：前三名用奖牌色（红/橙/金），其余中性 */
.bwpb-rank-no {
    flex: 0 0 22px;
    width: 22px;
    padding: 2px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 6px;
    background: rgba(0, 0, 0, .05);                                        /* 回退 */
    background: color-mix(in srgb, currentColor 7%, transparent);          /* 自适应 */
}
.bwpb-rank-item--top1 .bwpb-rank-no { background: #e5484d; color: #fff; }
.bwpb-rank-item--top2 .bwpb-rank-no { background: #f0883e; color: #fff; }
.bwpb-rank-item--top3 .bwpb-rank-no { background: #d4a72c; color: #fff; }

.bwpb-rank-thumb {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 6px;
    object-fit: cover;
}

.bwpb-rank-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bwpb-rank-title {
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.bwpb-rank-title:hover {
    text-decoration: underline;
}

.bwpb-rank-meta {
    font-size: 12px;
    opacity: .62;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 名次涨跌：★颜色遵循国内惯例（涨红跌绿），但**同时**给 ▲▼ 字符 ——
   只靠颜色区分对色觉障碍用户不可用。 */
.bwpb-rank-delta {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.bwpb-rank-delta.is-up   { color: #e5484d; }
.bwpb-rank-delta.is-down { color: #2f9e44; }
.bwpb-rank-delta.is-flat { opacity: .45; font-weight: 400; }
.bwpb-rank-delta.is-new {
    padding: 0 4px;
    border-radius: 4px;
    color: #fff;
    background: #e5484d;
}

.bwpb-rank-score {
    flex: 0 0 auto;
    font-size: 12px;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* 系统暗色偏好下把涨跌色提亮一档，保证在深色底上的对比度。
   刻意**不**替主题判断暗黑机制（class 切换 vs 媒体查询）—— 只做「更亮一点」
   这个在两种情况下都不吃亏的方向。 */
@media (prefers-color-scheme: dark) {
    .bwpb-rank-delta.is-up   { color: #ff7b7f; }
    .bwpb-rank-delta.is-down { color: #51cf66; }
}

/* ============================================================================
 * 13. 用户卡片积木（【BWPB 2026-10-08 S4】新增）
 * ========================================================================== */

.bwpb-user-cards {
    display: grid;
    gap: 12px;
    margin: 0;
}

/* 网格版式：列数交给 auto-fill —— 不写死列数，
   因为「一张卡片最小要多宽才好看」是布局自身的约束，不该由编辑器再声明一遍。
   （对应硬约束：同一约束只能有一个来源。） */
.bwpb-user-cards--grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.bwpb-user-cards--row {
    grid-template-columns: 1fr;
}

.bwpb-user-card {
    display: flex;
    gap: 8px;
    min-width: 0;
}
.bwpb-user-cards--grid .bwpb-user-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.bwpb-user-cards--row .bwpb-user-card {
    flex-direction: row;
    align-items: center;
}

.bwpb-user-card-avatar {
    flex: 0 0 auto;
    line-height: 0;
}
/* ★ 尺寸兜底：avatar_html 由主插件用主题 Tailwind 类（w-[56px] h-[56px]）渲染，
   那套类名依赖主题的构建产物里仍然包含这些任意值类 —— 一旦主题改了 safelist
   或本插件在主题未加载 Tailwind 的页面（例如自定义器预览）里渲染，头像会变成
   原始尺寸（几百像素），把整块布局撑烂。
   这里用后代选择器（特异性 0,1,1 > 0,1,0）显式钉死同样尺寸，与主插件口径一致。 */
.bwpb-user-card-avatar img {
    display: block;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 999px;
    object-fit: cover;
}

.bwpb-user-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bwpb-user-card-line {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.bwpb-user-cards--grid .bwpb-user-card-line {
    justify-content: center;
}
.bwpb-user-card-icons {
    flex: 0 0 auto;
    line-height: 0;
}

.bwpb-user-card-name {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.bwpb-user-card-link {
    color: inherit;
    text-decoration: none;
}
a.bwpb-user-card-link:hover {
    text-decoration: underline;
}

.bwpb-user-card-desc {
    margin: 0;
    font-size: 12px;
    opacity: .66;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bwpb-user-card-foot {
    flex: 0 0 auto;
}
.bwpb-user-cards--grid .bwpb-user-card-foot {
    width: 100%;
    display: flex;
    justify-content: center;
}