/* 品牌空间设计页面专用样式 - Updated: <?php echo time(); ?> */

/* ===== 页面容器 ===== */
.brand-space-design-page {
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== 中间内容区域 ===== */
.content-section {
    flex: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 40px 0;
    overflow: hidden; /* 防止内容溢出 */
}

.content-container {
    max-width: 1200px;
    max-height: 70vh; /* 改回原来的70vh */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    gap: 60px;
    width: 100%;
    align-items: stretch;
    box-sizing: border-box;
    justify-content: space-between; /* 左右两端对齐 */
}

/* ===== 左侧图片区域 ===== */
.images-area {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    width: 50%; /* 固定左侧宽度为50% */
    height: 65vh; /* 改为65vh */
}

.image-large {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

.image-large .case-image {
    max-width: 100%;
    width: auto; /* 改为auto，保持图片原始比例 */
    height: 100%; /* 高度占满容器 */
    max-height: none; /* 移除最大高度限制 */
    display: block;
    border-radius: 0;
    transition: transform 0.3s ease;
    object-fit: cover; /* 改为cover，填满容器 */
    object-position: left center; /* 左对齐 */
}

.image-large .case-image:hover {
    transform: scale(1.05);
}

/* ===== 右侧区域 ===== */
.right-area {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0; /* 去掉gap，改用margin控制间距 */
    min-width: 0;
    width: calc(50% - 60px); /* 50%减去gap的宽度 */
    height: 65vh; /* 改为65vh，与左侧一致 */
    overflow: visible;
    box-sizing: border-box;
    align-items: flex-end; /* 内容右对齐 */
    justify-content: space-between; /* 上下两端对齐 */
}

/* ===== 右侧文字区域 ===== */
.text-area {
    flex: 0 0 auto; /* 改为不伸缩，根据内容自动调整 */
    position: relative;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 改为顶部对齐 */
    text-align: right;
    overflow: visible;
    box-sizing: border-box;
    word-wrap: break-word;
    width: 100%;
    align-items: flex-end; /* 内容右对齐 */
}

/* 右侧紫色竖线 */
.text-area::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: calc(2.5rem + 1rem + 5px);
    width: 4px;
    background: #7028aa;
}

.page-main-title {
    position: relative;
    padding-right: 0;
    font-size: 1.8rem; /* 改为1.8rem，与PPT设计页面一致 */
    font-weight: bold;
    color: #333;
    margin: 0;
    font-family: 'SweiSpring', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    text-align: right;
}

.page-sub-title {
    padding-right: 0;
    font-size: 0.85rem; /* 改为0.85rem，与PPT设计页面一致 */
    color: #999;
    margin: 0 0 30px 0;
    letter-spacing: 2px;
    font-family: 'SweiSpring', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    text-align: right;
}

/* 按钮和描述文字的容器 - 横向排列 */
.content-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end; /* 改为底部对齐 */
    gap: 40px; /* 按钮和文字之间的间距 */
    width: 100%;
    justify-content: flex-end; /* 整体右对齐 */
    margin-top: -10px; /* 减小上边距 */
    margin-bottom: 10px; /* 增加下边距 */
}

.page-description {
    text-align: right;
    flex: 1; /* 占据剩余空间 */
    padding-top: 5px; /* 恢复上边距 */
    padding-bottom: 15px; /* 恢复下边距 */
}

.page-description p {
    font-size: 0.9rem;
    line-height: 1.5; /* 从2改为1.5，减小行间距 */
    color: #666;
    margin: 0;
    font-family: 'SweiSpringSugar', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.page-description p:last-child {
    line-height: 1; /* 最后一行设置为1，确保底部对齐 */
}

/* 更多案例按钮 - 参考PPT设计页面样式 */
.more-cases-button {
    display: flex;
    flex-direction: row; /* 横向排列 */
    align-items: flex-end; /* 底部对齐 */
    text-decoration: none;
    color: #333;
    position: relative;
    gap: 15px; /* 句号和下划线区域之间的间距 */
    flex-shrink: 0; /* 不缩小 */
    align-self: flex-end; /* 改为底部对齐 */
}

/* 覆盖首页CSS中的::before样式 */
.brand-space-design-page .more-cases-button::before {
    display: none !important;
}

.more-dot {
    font-size: 1.5rem;
    color: #7028aa;
    line-height: 1;
    flex-shrink: 0; /* 不缩小 */
}

.more-text {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    font-family: 'SweiSpringSugar', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    transition: color 0.3s ease;
    position: relative;
    padding-bottom: 7px; /* 增加padding，为下划线留出空间 */
    line-height: 1; /* 设置行高为1，确保底部对齐 */
}

/* 下划线 */
.more-text::after {
    content: '';
    position: absolute;
    bottom: 0; /* 下划线在容器底部 */
    right: 0; /* 从右边开始 */
    width: 130%; /* 向左延伸 */
    height: 2px;
    background: #7028aa;
    transition: width 0.3s ease;
}

.more-cases-button:hover .more-text {
    color: #7028aa;
}

.more-cases-button:hover .more-text::after {
    width: 150%; /* hover时更长 */
}

/* ===== 右下方小图 ===== */
.image-small {
    flex: 0 0 auto; /* 不伸缩，根据内容自动调整 */
    display: flex;
    justify-content: flex-end; /* 右对齐 */
    align-items: flex-end; /* 底部对齐 */
    overflow: visible; /* 改为visible */
    width: 100%; /* 确保不超出父容器 */
    padding-right: 20px; /* 与text-area的padding-right保持一致 */
    box-sizing: border-box;
    align-self: flex-end; /* 自身底部对齐 */
}

.case-image-small {
    max-width: 100%; /* 改为100%，让图片可以完全右对齐 */
    max-height: 30vh; /* 限制小图最大高度 */
    width: 100%; /* 满宽显示 */
    height: auto;
    display: block;
    border-radius: 0;
    transition: transform 0.3s ease;
    object-fit: cover; /* 改为cover，填满容器 */
    object-position: right center; /* 图片内容右对齐 */
}

.case-image-small:hover {
    transform: scale(1.05);
}

/* ===== 导航菜单二级菜单选中状态 ===== */
.brand-space-design-page .nav-submenu a.active,
.brand-space-design-page .nav-submenu a[href*="brandSpaceDesign"] {
    color: #7028aa !important;
    background: #f8f4ff !important;
    font-weight: 600 !important;
}

/* ===== 响应式设计 ===== */

/* 平板设备 */
@media (max-width: 1024px) {
    .content-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .images-area {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .right-area {
        flex: 0 0 100%;
        width: 100%;
    }
    
    .text-area {
        text-align: left;
    }
    
    .text-area::after {
        left: 0;
        right: auto;
    }
    
    .page-main-title,
    .page-sub-title,
    .page-description {
        text-align: left;
    }
    
    .more-cases-button {
        align-self: flex-start;
        flex-direction: row;
    }
    
    .image-small {
        justify-content: center;
    }
    
    .case-image-small {
        max-width: 100%;
    }
}

/* 移动设备 */
@media (max-width: 768px) {
    .content-section {
        padding: 30px 0;
    }
    
    .content-container {
        gap: 30px;
    }
    
    .page-main-title {
        font-size: 1.8rem;
    }
    
    .page-sub-title {
        font-size: 0.85rem;
    }
    
    .page-description p {
        font-size: 0.85rem;
    }
    
    .more-cases-button {
        justify-content: center;
        margin: 0 auto;
    }
    
    .image-large .case-image {
        max-height: 40vh;
    }
    
    .case-image-small {
        max-height: 20vh;
    }
}

/* 小屏幕移动设备 */
@media (max-width: 480px) {
    .page-main-title {
        font-size: 1.5rem;
    }
    
    .page-sub-title {
        font-size: 0.8rem;
    }
    
    .page-description p {
        font-size: 0.8rem;
        line-height: 1.8;
    }
    
    .more-cases-button {
        font-size: 1rem;
    }
    
    .more-cases-button::before {
        width: 50px;
    }
    
    .more-cases-button:hover::before {
        width: 70px;
    }
}