/* B站营销页面布局修复 - 将上下排列恢复为左右排列 */

/* 主容器样式 */
.bili-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Banner宽屏修复 - 全局应用 */
.bili-marketing-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    position: relative !important;
}

/* Banner特别处理 */
.bilibili-banner, 
.bili-banner-section, 
.bili-header, 
[class*="-banner-section"],
[class*="banner-container"],
.bili-marketing-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Banner内容居中 */
.bilibili-banner .container, 
.bili-banner-section .container,
.bili-header .container,
[class*="-banner-section"] .container,
[class*="banner-container"] .container,
.bili-marketing-banner .container {
    max-width: 1200px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 非Banner区块居中显示 */
.bili-marketing-container > section:not(.bilibili-banner):not(.bili-banner-section):not(.bili-header):not([class*="-banner-section"]):not([class*="banner-container"]):not(.bili-marketing-banner),
.bili-marketing-container > div:not(.bilibili-banner):not(.bili-banner-section):not(.bili-header):not([class*="-banner-section"]):not([class*="banner-container"]):not(.bili-marketing-banner) {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* 确保每个区块都有正确的左右排列 */
.bili-ecosystem-section .row,
.bili-business-scope-section .row,
.bili-marketing-solutions-section .row,
.bili-marketing-strategy-section .row,
.bili-core-values-section .row,
.bili-success-cases-section .row,
.bili-faq-section .row,
/* 添加所有可能的嵌套行 */
.bili-eco-pane .row,
.bili-user-profile-content .row,
.bili-chart-row,
.bili-stats-row,
.bili-features-row,
.bili-content-row,
.bili-solutions-row,
.bili-cases-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

/* 确保列元素正确显示 */
.row > [class*="col-"] {
    display: block !important;
    flex: 0 0 auto !important;
    float: left !important; /* 增加兼容性 */
}

/* 修复列宽度 */
.col-xs-12 {
    width: 100% !important;
}

.col-sm-6 {
    width: 50% !important;
}

.col-md-6 {
    width: 50% !important;
}

.col-md-4 {
    width: 33.333333% !important;
}

.col-md-3 {
    width: 25% !important;
}

.col-lg-4 {
    width: 33.333333% !important;
}

.col-lg-6 {
    width: 50% !important;
}

.col-lg-3 {
    width: 25% !important;
}

/* 确保flex布局正确工作 */
.bili-ecosystem-tabs,
.bili-highlight-stats,
.bili-interest-container,
.bili-consumption-grid,
.bili-content-eco-grid,
.bili-marketing-grid,
.bili-solutions-grid,
.bili-cases-grid {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* 清除浮动 */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* 确保容器宽度合适 */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* 修复数据卡片的布局 */
.bili-stat-card, 
.bili-highlight-stat, 
.bili-user-profile-card,
.content-type-card,
.feature-card,
.case-card {
    margin-bottom: 20px;
    height: calc(100% - 20px);
}

/* 确保图表和数据展示区域正确显示 */
.bili-user-profile-chart,
.chart-card,
.data-visualization-container {
    width: 100%;
}

/* 为特定区块添加覆盖样式 */
.bili-user-profile-chart {
    overflow: hidden !important;
}

/* 确保面板内容左右排列 */
.bili-eco-pane .col-lg-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    float: left !important;
}

/* 修复特殊面板 */
.bili-eco-pane {
    display: none;
}

.bili-eco-pane.active {
    display: block !important;
}

/* 修复选项卡容器 */
.bili-ecosystem-tabs {
    gap: 10px;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* 确保卡片网格正确布局 */
.row [class*="col-"] .bili-user-profile-card,
.row [class*="col-"] .content-type-card,
.row [class*="col-"] .feature-card,
.row [class*="col-"] .case-card {
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

/* B站全域传播矩阵修复 */
.bili-business-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.bili-business-grid-item {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 30px !important;
    position: relative !important; 
}

@media (min-width: 992px) {
    .bili-business-grid-item {
        width: 33.333333% !important;
        float: left !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .bili-business-grid-item {
        width: 50% !important;
        float: left !important;
    }
}

/* B站营销解决方案修复 */
.bili-solutions-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.bili-solutions-grid-item {
    padding-left: 15px !important;
    padding-right: 15px !important;
    position: relative !important;
}

/* B站传播策略修复 */
.bili-strategy-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.bili-strategy-grid-item {
    padding-left: 15px !important;
    padding-right: 15px !important;
    position: relative !important;
}

/* 核心价值修复 */
.bili-values-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.bili-values-grid-item {
    padding-left: 15px !important;
    padding-right: 15px !important;
    position: relative !important;
}

/* 成功案例修复 */
.bili-cases-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.bili-cases-grid-item {
    padding-left: 15px !important;
    padding-right: 15px !important;
    position: relative !important;
}

/* FAW修复 */
.bili-faq-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.bili-faq-grid-item {
    padding-left: 15px !important;
    padding-right: 15px !important;
    position: relative !important;
}

/* B站营销统计修复 */
.bili-business-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: 40px !important;
    justify-content: center !important;
}

.bili-business-stat-item {
    flex: 0 0 calc(25% - 40px) !important;
    margin: 20px !important;
}

@media (max-width: 992px) {
    .bili-business-stat-item {
        flex: 0 0 calc(50% - 40px) !important;
    }
}

@media (max-width: 768px) {
    .bili-business-stat-item {
        flex: 0 0 calc(100% - 40px) !important;
    }
}

/* 在小屏幕上保持响应式布局 */
@media (max-width: 767px) {
    .col-md-6, .col-md-4, .col-md-3, .col-lg-4, .col-lg-6, .col-lg-3, .col-sm-6 {
        width: 100% !important;
        float: none !important;
    }
    
    .bili-ecosystem-section .row,
    .bili-business-scope-section .row,
    .bili-marketing-solutions-section .row,
    .bili-marketing-strategy-section .row,
    .bili-core-values-section .row,
    .bili-success-cases-section .row,
    .bili-faq-section .row,
    .bili-eco-pane .row,
    .bili-user-profile-content .row {
        display: block !important;
    }
}