/* 首页布局样式 - 添加左右空白但不影响教程页面 */

/* 首页主容器样式 */
body.homepage .homepage-main-container {
    max-width: 98% !important; /* 从95%增加到98%，进一步减少左右空白 */
    margin: 0 auto !important; /* 居中显示 */
}

/* 首页内容区域样式 */
body.homepage .content {
    max-width: 98% !important; /* 从95%增加到98%，与容器宽度保持一致 */
    margin: 0 auto !important;
}

/* 首页其他容器样式 */
body.homepage .main-content-area {
    max-width: 98% !important; /* 从95%增加到98%，与容器宽度保持一致 */
    margin: 0 auto !important;
}

/* 首页三列容器布局优化 */
body.homepage .three-column-container {
    max-width: 95% !important; /* 调整为95%确保整体居中 */
    margin: 0 auto !important;
    display: flex !important;
    gap: 8px !important; /* 进一步减少左右区域间距，从15px减少到8px */
    padding: 0 10px !important;
    justify-content: center !important; /* 确保内容居中对齐 */
}

/* 首页主内容区域 */
body.homepage .container {
    flex: 1 !important;
    max-width: 75% !important; /* 限制左边内容区域最大宽度为75% */
    margin: 0 !important;
    padding: 0 !important;
}

/* 首页右边栏位置调整 */
body.homepage .right-sidebar {
    position: static !important;
    width: 280px !important; /* 从180px增加到280px，让右边栏更宽 */
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    padding: 8px !important;
    top: auto !important;
    right: auto !important;
}

/* 媒体查询 - 在小屏幕上调整布局 */
@media (max-width: 768px) {
    body.homepage .homepage-main-container,
    body.homepage .content,
    body.homepage .main-content-area {
        max-width: 100% !important; /* 在小屏幕上使用全宽 */
        padding: 0 5px !important; /* 减小内边距 */
    }
    
    /* 小屏幕上三列容器改为垂直布局 */
    body.homepage .three-column-container {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 5px !important;
    }
    
    /* 小屏幕上右边栏全宽显示 */
    body.homepage .right-sidebar {
        width: 100% !important;
        position: static !important;
        margin: 10px 0 !important;
    }
}