/* 1. 基础重置 */
* { box-sizing: border-box; }

/* 2. 页面主容器 - 放大最大宽度适配大屏 (1440px) */
.resource-page-wrap { 
    max-width: 1440px !important; 
    margin: 0 auto !important; 
    padding: 20px 20px 80px !important; 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* 3. 头部标题区：强制放大、加黑、加重 */
.page-header { 
    text-align: center !important; 
    margin-bottom: 50px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
}
.page-title { 
    font-size: 56px !important; /* 超大标题 */
    font-weight: 900 !important; /* 强制极粗体 */
    color: #000 !important; /* 纯黑色 */
    margin-bottom: 20px !important; 
    text-transform: uppercase !important; 
    letter-spacing: 2px !important; 
    font-family: 'Arial Black', Impact, sans-serif !important; /* 工业重金属风字体 */
    line-height: 1.2 !important;
}
.page-subtitle { 
    font-size: 20px !important; 
    color: #333 !important; /* 加深灰色 */
    font-weight: 500 !important; 
    max-width: 800px !important; 
    line-height: 1.8 !important; 
    text-align: center !important; 
}

/* 4. 核心布局容器 */
.resources-layout { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 40px !important; 
}

/* 5. 主打大卡片 (Hero Card) */
.hero-resource-card { 
    display: flex !important; 
    background: #151515 !important; /* 更深的纯黑色背景 */
    color: #fff !important; 
    border-radius: 12px !important; 
    overflow: hidden !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
    min-height: 420px !important;
}

/* 带有平滑渐变的占位图容器 */
.hero-image-placeholder {
    flex: 1.2 !important;
    position: relative !important;
    background: #151515 !important;
    overflow: hidden !important;
}

/* 强制后台插入的 img 标签完美铺满，不留黑边 */
.hero-image-placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 保持比例裁剪铺满 */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
}

/* 重新加上向右的黑色渐变遮罩，让图片与右侧无缝融合 */
.hero-image-placeholder::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; 
    bottom: 0 !important; 
    left: 0 !important; 
    right: 0 !important;
    background: linear-gradient(to right, rgba(21,21,21,0) 40%, rgba(21,21,21,1) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* 主卡片右侧文字区 */
.hero-content { 
    flex: 1 !important; 
    padding: 60px 50px 60px 20px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
    align-items: center !important; /* 新增：交叉轴居中，让按钮等元素居中 */
    text-align: center !important; /* 新增：文字内容居中 */
    z-index: 4 !important; /* 确保文字在最上层 */
}

.hero-content h2 { 
    font-size: 40px !important; 
    font-weight: 800 !important; 
    margin-bottom: 20px !important; 
    color: #fff !important; 
    line-height: 1.3 !important; 
    font-family: 'Arial Black', Impact, sans-serif !important; 
}
.hero-content p { 
    color: #d0d0d0 !important; 
    line-height: 1.7 !important; 
    margin-bottom: 35px !important; 
    font-size: 17px !important; 
    font-weight: 400 !important;
}

/* 6. 次要卡片区 (News & FAQ) */
.sub-resources-grid { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: 30px !important; 
}
.secondary-card { 
    background: #fff !important; 
    border: 1px solid #eaeaea !important; 
    padding: 50px 45px !important; 
    border-radius: 12px !important; 
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
.secondary-card:hover { 
    transform: translateY(-6px) !important; 
    border-color: #e60000 !important; 
    box-shadow: 0 15px 35px rgba(230,0,0,0.08) !important; 
}
.secondary-card h3 { 
    font-size: 30px !important; 
    font-weight: 800 !important; 
    color: #000 !important; 
    margin-bottom: 16px !important; 
    display: flex !important; 
    align-items: center !important; 
    gap: 12px !important; 
    font-family: 'Arial Black', Impact, sans-serif !important;
}
.secondary-card h3::before { 
    content: '' !important; 
    display: inline-block !important; 
    width: 8px !important; 
    height: 8px !important; 
    background: #e60000 !important; 
    border-radius: 50% !important; 
}
.secondary-card p { 
    color: #555 !important; 
    line-height: 1.7 !important; 
    margin-bottom: 35px !important; 
    font-size: 16px !important; 
}

/* 7. 按钮样式优化（强制覆盖） */
.btn-primary { 
    display: inline-block !important; 
    padding: 15px 36px !important; 
    background: #e60000 !important; 
    color: #fff !important; 
    text-decoration: none !important; 
    border-radius: 6px !important; 
    font-weight: 700 !important; 
    font-size: 16px !important; 
    transition: all 0.3s ease !important; 
    width: fit-content !important;
}
.btn-primary:hover { 
    background: #cc0000 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(230,0,0,0.3) !important; 
}

/* 修改次级按钮：红底白字 */
.btn-secondary { 
    display: inline-block !important; 
    padding: 13px 32px !important; 
    background: #e60000 !important; 
    color: #fff !important; 
    text-decoration: none !important; 
    border-radius: 6px !important; 
    font-weight: 700 !important; 
    border: 2px solid #e60000 !important; 
    transition: all 0.3s ease !important; 
    width: fit-content !important; 
    font-size: 15px !important;
}
.btn-secondary:hover { 
    background: #cc0000 !important; 
    border-color: #cc0000 !important;
    color: #fff !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(230,0,0,0.3) !important;
}

/* 8. 响应式：适配手机端 */
@media (max-width: 992px) {
    .hero-resource-card { flex-direction: column !important; }
    .hero-image-placeholder { min-height: 250px !important; }
    .hero-image-placeholder::after { background: linear-gradient(to bottom, rgba(21,21,21,0) 40%, rgba(21,21,21,1) 100%) !important; } /* 手机端渐变向下 */
    .hero-content { padding: 40px 30px !important; }
    .sub-resources-grid { grid-template-columns: 1fr !important; }
    .page-title { font-size: 42px !important; }
}