/**
 * 小红袍 v2.4 透明背景 + 卡片自适应
 *
 * 策略：
 *   1. 所有板块（Hero/Section/Single/Page）背景改透明，融入子比页面
 *   2. 卡片网格用 auto-fit + minmax 真正自适应页面宽度
 *   3. 保留卡片自身的白底（与透明板块形成层次）
 *
 * @package XHP
 */

/* ============================================================
 * 1. 板块背景透明（融入子比页面背景）
 * ============================================================ */

/* Hero inline 透明 */
.xhp-hero-inline {
    background: transparent !important;
    border-radius: 0;
    padding: 32px 0;
    margin: 0;
}
.xhp-hero-inline::before,
.xhp-hero-inline::after {
    display: none;
}

/* Section inline 透明 */
.xhp-section-inline {
    background: transparent !important;
    padding: 32px 0;
    margin: 0;
}
.xhp-section-inline.xhp-section-alt {
    background: transparent !important;
    padding: 32px 0;
    margin: 0;
}

/* Page hero inline 透明 */
.xhp-page-hero-inline {
    background: transparent !important;
    padding: 24px 0 32px;
    margin: 0;
}

/* Single inline 透明 */
.xhp-single-inline {
    background: transparent !important;
    box-shadow: none !important;
    padding: 24px 0;
    margin: 0;
}

/* Page inline 透明 */
.xhp-page-inline {
    background: transparent !important;
    box-shadow: none !important;
    padding: 24px 0;
    margin: 0;
}

/* ============================================================
 * 2. 卡片网格自适应（auto-fit + minmax）
 *    根据容器宽度自动计算列数，不再固定
 * ============================================================ */

/* SOP 卡片：每张最小 280px，自动适应 */
.xhp-sop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px;
}

/* 导师营卡片：每张最小 320px */
.xhp-camps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 20px;
}

/* 共建角色卡片：每张最小 240px */
.xhp-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 18px;
}

/* 价格矩阵卡片：每张最小 200px */
.xhp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px;
}

/* 站长能力条 3 列 */
.xhp-master-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px;
}

/* 出单墙：CSS columns 自适应 */
.xhp-wall-grid {
    columns: auto;
    column-width: 320px;
    column-gap: 20px;
}

/* ============================================================
 * 3. 卡片本身保留白底（与透明板块形成层次）
 * ============================================================ */
.xhp-sop-card,
.xhp-camp-card,
.xhp-role-card,
.xhp-pricing-card,
.xhp-wall-card,
.xhp-bounty-card {
    background: var(--xhp-card) !important;
    border: 1px solid var(--xhp-border);
    box-shadow: var(--xhp-shadow-sm);
}

/* 模式对比卡保留背景（突出对比效果） */
.xhp-mode-compare {
    margin-top: 32px;
}
.xhp-mode-old {
    background: var(--xhp-muted);
}
.xhp-mode-new {
    background: linear-gradient(135deg, oklch(0.52 0.19 27 / 0.05), oklch(0.72 0.16 65 / 0.05));
}

/* 站长能力条保留白底（突出信息） */
.xhp-master-cap {
    background: var(--xhp-card);
    margin-top: 28px;
}

/* 空状态横幅保留背景 */
.xhp-empty-banner,
.xhp-empty-rich,
.xhp-empty-inline {
    background: var(--xhp-muted);
}

/* ============================================================
 * 4. 响应式（移除断点限制，让 auto-fit 自然适应）
 * ============================================================ */
@media (max-width: 600px) {
    .xhp-sop-grid,
    .xhp-camps-grid,
    .xhp-roles-grid,
    .xhp-pricing-grid {
        grid-template-columns: 1fr !important;
    }
    .xhp-wall-grid {
        columns: 1;
    }
}