/* 详情页布局修复 */
.detail-main {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 调整比例，让主内容区域更宽 */
    gap: 20px;
}

/* 确保详情内容在左侧 */
.detail-body {
    grid-column: 1; /* 明确指定在第一列 */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 确保侧边栏在右侧 */
.detail-sidebar {
    grid-column: 2; /* 明确指定在第二列 */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 确保详情头部跨越整个宽度 */
.detail-header {
    grid-column: 1 / -1; /* 从第一列跨到最后一列 */
    background-color: var(--white);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

/* 响应式调整 */
@media (max-width: 992px) {
    .detail-main {
        grid-template-columns: 1fr; /* 在小屏幕上变为单列 */
    }
    
    .detail-body, .detail-sidebar {
        grid-column: 1; /* 都在第一列 */
    }
    
    .detail-sidebar {
        margin-top: 20px; /* 添加一些间距 */
    }
}