/**
 * 小红袍 v2.3 适配子比容器样式
 *
 * 策略：回退子比 header/footer，小红袍内容融入子比 .content-layout 容器
 * 所有板块改为 inline 模式，不再全宽
 *
 * @package XHP
 */

/* 让小红袍板块在子比容器内正确显示 */
.xhp-main {
    min-height: 60vh;
    background: transparent;
}

/* Hero inline 模式（不再全宽全屏） */
.xhp-hero-inline {
    background: linear-gradient(180deg, var(--xhp-muted), var(--xhp-background));
    border-radius: var(--xhp-radius-xl);
    padding: 56px 40px;
    margin: 16px 0 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.xhp-hero-inline::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 15%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: oklch(0.52 0.19 27 / 0.15);
    filter: blur(60px);
    pointer-events: none;
}
.xhp-hero-inline::after {
    content: '';
    position: absolute;
    top: 40px;
    right: 15%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: oklch(0.72 0.16 65 / 0.15);
    filter: blur(60px);
    pointer-events: none;
}
.xhp-hero-inner {
    position: relative;
    z-index: 1;
}
.xhp-hero-inline .xhp-hero-title {
    font-size: 36px;
    margin: 16px 0;
}
.xhp-hero-inline .xhp-hero-sub {
    font-size: 15px;
    margin-bottom: 28px;
}
.xhp-hero-inline .xhp-stats {
    margin-top: 32px;
}

/* Section inline 模式 */
.xhp-section-inline {
    padding: 40px 0;
    margin: 0;
}
.xhp-section-inline.xhp-section-alt {
    background: var(--xhp-muted);
    border-radius: var(--xhp-radius-xl);
    padding: 40px 32px;
    margin: 16px 0;
}
.xhp-section-inline .xhp-section-head {
    margin-bottom: 28px;
}
.xhp-section-inline .xhp-section-title {
    font-size: 26px;
}

/* Page hero inline */
.xhp-page-hero-inline {
    background: linear-gradient(180deg, var(--xhp-muted), var(--xhp-background));
    border-radius: var(--xhp-radius-xl);
    padding: 40px 32px;
    margin: 16px 0 32px;
    text-align: center;
}
.xhp-page-hero-inline .xhp-hero-title {
    font-size: 28px;
    margin: 12px 0 8px;
}
.xhp-page-hero-inline .xhp-hero-sub {
    font-size: 14px;
    margin: 0;
}

/* Single inline */
.xhp-single-inline {
    background: var(--xhp-card);
    border-radius: var(--xhp-radius-xl);
    padding: 32px 40px;
    margin: 16px 0;
    box-shadow: var(--xhp-shadow-sm);
}
.xhp-single-inline .xhp-single-title {
    font-size: 26px;
    margin: 16px 0;
}
.xhp-single-inline .xhp-single-content {
    font-size: 15px;
}

/* Page inline */
.xhp-page-inline {
    background: var(--xhp-card);
    border-radius: var(--xhp-radius-xl);
    padding: 32px 40px;
    margin: 16px 0;
    box-shadow: var(--xhp-shadow-sm);
}

/* 内容区宽度优化（子比默认太窄时） */
.content-layout {
    max-width: 100%;
}

/* 响应式 */
@media (max-width: 768px) {
    .xhp-hero-inline,
    .xhp-page-hero-inline,
    .xhp-section-inline.xhp-section-alt,
    .xhp-single-inline,
    .xhp-page-inline {
        padding: 28px 20px;
        border-radius: var(--xhp-radius);
    }
    .xhp-hero-inline .xhp-hero-title,
    .xhp-page-hero-inline .xhp-hero-title {
        font-size: 24px;
    }
    .xhp-section-inline .xhp-section-title {
        font-size: 22px;
    }
}

/* ============================================================
 * v2.3.1 修复：突破子比容器宽度限制 + 网格列数固定
 * ============================================================ */

/* 让小红袍板块在子比内容区内撑满 */
.xhp-main .content-wrap,
.xhp-main .content-layout {
    max-width: 100%;
    width: 100%;
}

/* 确保各 grid 在子比容器内列数正确 */
.xhp-sop-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}
.xhp-camps-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}
.xhp-roles-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}
.xhp-pricing-grid {
    grid-template-columns: repeat(5, 1fr) !important;
}
.xhp-master-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* 响应式覆盖 */
@media (max-width: 1024px) {
    .xhp-pricing-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    .xhp-sop-grid,
    .xhp-camps-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .xhp-roles-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .xhp-pricing-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .xhp-master-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .xhp-sop-grid,
    .xhp-camps-grid,
    .xhp-roles-grid,
    .xhp-pricing-grid { grid-template-columns: 1fr !important; }
}

/* 模式对比卡和站长能力条在子比容器内适配 */
.xhp-mode-compare {
    margin-top: 40px;
}
.xhp-master-cap {
    margin-top: 32px;
}

/* 卡片内边距适配 */
.xhp-sop-card,
.xhp-camp-card,
.xhp-role-card,
.xhp-pricing-card,
.xhp-wall-card {
    box-sizing: border-box;
}