/**
 * 小红袍 v2.5 卡片协调性修复
 *
 * 解决问题：
 *   1. 路线图卡片高度不齐 → flex 等高
 *   2. 卡片背景与页面对比度低 → 白底 + 边框 + 阴影
 *   3. 板块间衔接突兀 → 统一卡片风格
 *   4. 描述文字过浅 → 加深
 *   5. 间距不均匀 → 统一 gap
 *
 * @package XHP
 */

/* ============================================================
 * 1. 所有卡片统一风格（白底 + 边框 + 阴影 + 等高）
 * ============================================================ */
.xhp-sop-card,
.xhp-camp-card,
.xhp-role-card,
.xhp-pricing-card,
.xhp-wall-card,
.xhp-bounty-card,
.xhp-weekly-card,
.xhp-automation-card,
.xhp-roadmap-card {
    background: var(--xhp-card) !important;
    border: 1px solid var(--xhp-border) !important;
    border-radius: var(--xhp-radius) !important;
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.03) !important;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hover 统一上浮 + 阴影加深 */
.xhp-sop-card:hover,
.xhp-camp-card:hover,
.xhp-role-card:hover,
.xhp-pricing-card:hover,
.xhp-wall-card:hover,
.xhp-bounty-card:hover,
.xhp-weekly-card:hover,
.xhp-automation-card:hover,
.xhp-roadmap-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px oklch(0 0 0 / 0.08), 0 2px 4px oklch(0 0 0 / 0.04) !important;
    border-color: oklch(0.52 0.19 27 / 0.3) !important;
}

/* ============================================================
 * 2. 路线图卡片：等高 + 左侧彩色条优化
 * ============================================================ */
.xhp-roadmap-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 20px;
    align-items: stretch; /* 关键：等高 */
}

.xhp-roadmap-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 20px 20px 24px !important;
    position: relative;
    overflow: hidden;
    border-left: 4px solid var(--xhp-primary) !important;
}

/* 彩色左条只占内容区高度，更精致 */
.xhp-roadmap-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 4px;
    border-radius: 0 4px 4px 0;
}

.xhp-roadmap-rose::before    { background: oklch(0.62 0.22 15); }
.xhp-roadmap-amber::before   { background: var(--xhp-amber); }
.xhp-roadmap-violet::before  { background: var(--xhp-violet); }
.xhp-roadmap-emerald::before { background: var(--xhp-emerald); }

/* 覆盖左 border，用 ::before 替代 */
.xhp-roadmap-card {
    border-left: 1px solid var(--xhp-border) !important;
}

.xhp-roadmap-range {
    font-size: 12px;
    font-weight: 700;
    color: var(--xhp-muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.xhp-roadmap-title {
    font-size: 17px;
    font-weight: 700;
    margin: 6px 0 10px;
    color: var(--xhp-foreground);
    line-height: 1.3;
}
.xhp-roadmap-desc {
    font-size: 13px;
    color: oklch(0.4 0.02 30); /* 加深，提高可读性 */
    margin: 0;
    line-height: 1.6;
    flex-grow: 1; /* 关键：让描述填满剩余空间，底部对齐 */
}

/* ============================================================
 * 3. 每周时间表卡片：与路线图风格统一
 * ============================================================ */
.xhp-weekly-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px;
    align-items: stretch;
}

.xhp-weekly-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px !important;
    position: relative;
    overflow: hidden;
}

.xhp-weekly-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--xhp-gradient-hong);
}

.xhp-weekly-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.xhp-weekly-day {
    font-size: 13px;
    color: var(--xhp-muted-foreground);
    font-weight: 600;
}
.xhp-weekly-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--xhp-foreground);
}
.xhp-weekly-tasks {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: oklch(0.4 0.02 30);
    line-height: 1.8;
    flex-grow: 1;
}
.xhp-weekly-tasks li {
    padding: 3px 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.xhp-weekly-tasks li::before {
    content: '·';
    color: var(--xhp-primary);
    font-weight: 700;
}

/* ============================================================
 * 4. 自动化工具卡片统一
 * ============================================================ */
.xhp-automation-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 20px;
}

.xhp-automation-card {
    display: flex !important;
    gap: 14px !important;
    padding: 20px !important;
    align-items: flex-start;
}
.xhp-automation-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
}
.xhp-automation-card h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--xhp-foreground);
}
.xhp-automation-card p {
    font-size: 13px;
    color: oklch(0.4 0.02 30);
    margin: 0;
    line-height: 1.6;
}

/* ============================================================
 * 5. 板块间距优化（衔接更自然）
 * ============================================================ */
.xhp-section-inline {
    padding: 40px 0 !important;
}

/* section 标题与卡片的间距 */
.xhp-section-inline .xhp-section-head {
    margin-bottom: 32px !important;
}

/* 子区标题（悬赏）间距 */
.xhp-subsection-title {
    margin: 32px 0 20px !important;
    font-size: 18px;
}

/* ============================================================
 * 6. 卡片内文字层级优化
 * ============================================================ */

/* SOP 卡片 */
.xhp-sop-body {
    padding: 18px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.xhp-sop-title {
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
}
.xhp-sop-sub {
    font-size: 13px !important;
    color: oklch(0.4 0.02 30) !important;
    line-height: 1.5;
    margin: 0 0 14px;
    flex-grow: 1;
}
.xhp-sop-meta {
    font-size: 12px;
    color: var(--xhp-muted-foreground);
    margin-bottom: 14px;
}

/* 导师营卡片 */
.xhp-camp-body {
    padding: 18px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.xhp-camp-title {
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
}
.xhp-camp-bio {
    font-size: 13px !important;
    color: oklch(0.4 0.02 30) !important;
    line-height: 1.5;
    margin: 0 0 14px;
    flex-grow: 1;
}

/* 角色卡片 */
.xhp-role-card {
    padding: 22px !important;
    display: flex;
    flex-direction: column;
}
.xhp-role-body {
    flex-grow: 1;
}
.xhp-role-body p {
    color: oklch(0.4 0.02 30) !important;
}

/* 价格卡片 */
.xhp-pricing-card {
    padding: 22px !important;
    display: flex;
    flex-direction: column;
}
.xhp-pricing-features {
    flex-grow: 1;
}

/* 出单墙卡片 */
.xhp-wall-card {
    padding: 18px !important;
}
.xhp-wall-content {
    font-size: 13px !important;
    color: oklch(0.4 0.02 30) !important;
    line-height: 1.6;
}

/* 悬赏卡片 */
.xhp-bounty-card {
    padding: 18px !important;
}
.xhp-bounty-desc {
    font-size: 13px !important;
    color: oklch(0.4 0.02 30) !important;
}

/* ============================================================
 * 7. Hero 文字大小优化（与卡片协调）
 * ============================================================ */
.xhp-hero-inline .xhp-hero-title {
    font-size: 32px !important;
    margin: 16px 0 12px;
}
.xhp-hero-inline .xhp-hero-sub {
    font-size: 14px !important;
    margin-bottom: 28px;
}
.xhp-hero-inline .xhp-section-title {
    font-size: 24px !important;
}
.xhp-hero-inline .xhp-section-desc {
    font-size: 13px !important;
}

/* 数据统计卡片 */
.xhp-stat-item {
    padding: 16px 12px !important;
}
.xhp-stat-num {
    font-size: 24px !important;
}
.xhp-stat-label {
    font-size: 11px !important;
}

/* ============================================================
 * 8. 响应式
 * ============================================================ */
@media (max-width: 768px) {
    .xhp-roadmap-grid,
    .xhp-weekly-grid,
    .xhp-automation-grid {
        grid-template-columns: 1fr !important;
    }
    .xhp-hero-inline .xhp-hero-title {
        font-size: 24px !important;
    }
    .xhp-section-inline .xhp-section-title {
        font-size: 20px !important;
    }
}