/* 品牌设计整合页面样式 - 完全复制原页面布局 */

/* ===== 页面容器 ===== */
.all-designs-page {
    width: 100%;
    height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
    scroll-snap-type: none;
    scroll-behavior: auto;
    overscroll-behavior: none;
}

/* ===== 每个设计屏幕 ===== */
.design-screen {
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: none;
    position: relative;
    overflow: hidden;
}

/* ===== 第一屏：品牌视觉识别 - 完全复制brand-visual-identity.css ===== */
#screen-0 .content-container {
    --screen-0-layout-height: 380px; /* 固定第一屏左右布局高度，避免右图缩放影响左侧文字 */
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 90px;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    gap: 60px;
    width: 100%;
    height: var(--screen-0-layout-height);
    align-items: stretch;
}

#screen-0 .text-area {
    --title-anchor-y: 118px; /* 调整标题整体位置：数值变小上移，变大下移 */
    --title-group-y: -232px;
    flex: 0 0 35%;
    position: relative;
    padding-left: 0;
    padding-top: var(--title-anchor-y);
    display: block;
    box-sizing: border-box;
    top: var(--title-group-y);
    left: 4px;
}

#screen-0 .page-main-title {
    position: relative;
    padding-left: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin: -28px;
    font-family: 'Swei Spring CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 竖线从page-main-title顶部开始，延伸到page-sub-title底部 */
#screen-0 .page-main-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem; /* 向下偏移，与文字顶部对齐 */
    /* 计算高度：标题高度 + 副标题高度（1rem），不包含副标题的margin */
    height: calc(100% + 1.2rem);
    width: 4px;
    background: #7028aa;
}

#screen-0 .page-sub-title {
    font-size: 1.28rem;
    color: #999;
    margin: 28px 0 30px -6px;
    font-family: 'Inter', 'Swei Spring CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

#screen-0 .page-description {
    margin-left: -8px;
    margin-top: px;
}

#screen-0 .page-description p {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #666;
    font-family: 'Source Han Sans SC', 'SourceHanSans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    margin-bottom: -1px;
}

#screen-0 .more-cases-button {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    text-decoration: none;
    color: #333;
    position: relative;
    gap: 15px;
    flex-shrink: 0;
    margin-top: 102px;
    left: 122px;
}

#screen-0 .image-area {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: visible;
    min-width: 0;
    height: 100%;
}

#screen-0 .case-image {
    --case-image-width: 864px; /* 调整右侧图片宽度 */
    --case-image-height: 640px; /* 调整右侧图片高度；图片比例不符时会裁切 */
    --case-image-top: -130px; /* 调整右侧图片上下位置：负数上移，正数下移 */
    --case-image-right: -14px; /* 调整右侧图片左右位置：负数右移，正数左移 */
    position: absolute;
    top: var(--case-image-top);
    right: var(--case-image-right);
    flex: 0 0 auto;
    width: var(--case-image-width);
    height: var(--case-image-height);
    max-width: none;
    max-height: none;
    display: block;
    border-radius: 0;
    transition: transform 0.3s ease;
    object-fit: cover;
    object-position: center center;
}

#screen-0 .image-area:hover .case-image {
    transform: scale(1.05);
}

/* ===== 第二屏：品牌空间设计 - 完全复制brand-space-design.css ===== */
#screen-1 .content-container {
    --screen-1-layout-height: 560px; /* 固定第二屏布局高度，避免文字和图片互相影响 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    height: var(--screen-1-layout-height);
    position: relative;
    box-sizing: border-box;
}

#screen-1 .images-area-left {
    --space-large-image-width: 632px; /* 左侧大图大小 */
    --space-large-image-height: 682px; /* 左侧大图高度；图片比例不符时会裁切 */
    --space-large-image-top: -40px; /* 左侧大图上下位置：负数上移，正数下移 */
    --space-large-image-left: 12px; /* 左侧大图左右位置：负数左移，正数右移 */
    position: absolute;
    top: var(--space-large-image-top);
    left: var(--space-large-image-left);
    width: var(--space-large-image-width);
    height: var(--space-large-image-height);
    overflow: visible;
}

#screen-1 .image-large {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#screen-1 .image-large img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    border-radius: 0;
    transition: transform 0.3s ease;
    object-fit: cover;
    object-position: left center;
}

#screen-1 .image-large:hover img {
    transform: scale(1.05);
}

#screen-1 .right-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

#screen-1 .text-area {
    --space-title-top: -52px; /* 第二屏文字整体上下位置：负数上移，正数下移 */
    --space-title-right: -6px; /* 第二屏文字整体左右位置：负数右移，正数左移 */
    --space-title-width: 430px;
    position: absolute;
    top: var(--space-title-top);
    right: var(--space-title-right);
    width: var(--space-title-width);
    padding-right: 24px;
    display: block;
    text-align: right;
    overflow: visible;
    box-sizing: border-box;
    pointer-events: auto;
}

#screen-1 .text-area::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0.9rem;
    height: calc(2rem + 1.28rem + 18px);
    width: 4px;
    background: #7028aa;
}

#screen-1 .page-main-title {
    position: relative;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    font-family: 'Swei Spring CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    text-align: right;
    
}

#screen-1 .page-sub-title {
    padding-right: 0;
    font-size: 1.28rem;
    color: #999;
    margin: 4px 0 0 0;
    font-family: 'Inter', 'Swei Spring CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    text-align: right;
}

#screen-1 .content-row {
    display: block;
}

#screen-1 .page-description {
    text-align: right;
    margin-top: 31px;
    padding: 0;
}

#screen-1 .page-description p {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
    font-family: 'Source Han Sans SC', 'SourceHanSans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

#screen-1 .more-cases-button {
    --space-more-top: -6px; /* 更多案例相对小字的上下距离 */
    --space-more-x: -378px; /* 更多案例左右微调：负数左移，正数右移 */
    margin-top: var(--space-more-top);
    left: var(--space-more-x);
    justify-content: flex-end;
}

#screen-1 .image-small {
    --space-small-image-width: 520px; /* 右下小图大小 */
    --space-small-image-height: 400px; /* 右下小图高度；图片比例不符时会裁切 */
    --space-small-image-top: 240px; /* 右下小图上下位置：负数上移，正数下移 */
    --space-small-image-right: 0px; /* 右下小图左右位置：负数右移，正数左移 */
    position: absolute;
    top: var(--space-small-image-top);
    right: var(--space-small-image-right);
    width: var(--space-small-image-width);
    height: var(--space-small-image-height);
    overflow: hidden;
    pointer-events: auto;
}

#screen-1 .case-image-small {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    border-radius: 0;
    transition: transform 0.3s ease;
    object-fit: cover;
    object-position: right center;
}

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

/* ===== 第三屏：品牌形象设计 - 完全复制brand-image-design.css ===== */
#screen-2 .content-container {
    --screen-2-layout-height: 760px; /* 固定第三屏布局高度，避免文字和图片互相影响 */
    max-width: 1250px;
    margin: 0 auto;
    display: block;
    width: 100%;
    height: var(--screen-2-layout-height);
    position: relative;
    box-sizing: border-box;
    
}

#screen-2 .title-section {
    --image-title-top: 0px; /* 第三屏标题区上下位置：负数上移，正数下移 */
    --image-title-left: 20px; /* 第三屏标题区左右位置：负数左移，正数右移 */
    position: absolute;
    top: var(--image-title-top);
    left: var(--image-title-left);
    right: 20px;
    height: 90px;
}

#screen-2 .title-container {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 20px;
}

#screen-2 .title-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3rem; /* 向下偏移，与文字顶部对齐 */
    /* 计算高度：标题高度 + 副标题高度 */
    height: calc(2rem * 1.5 + 1.28rem * 1.2);
    width: 4px;
    background: #7028aa;
}

#screen-2 .page-main-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    font-family: 'Swei Spring CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    text-align: left;
}

#screen-2 .page-sub-title {
    font-size: 1.28rem;
    color: #999;
    margin: 4px 0 0 0;
    font-family: 'Inter', 'Swei Spring CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    text-align: left;
}

#screen-2 .image-section {
    --image-design-image-width: 1200px; /* 第三屏主图宽度 */
    --image-design-image-height: 540px; /* 第三屏主图高度；图片比例不符时会裁切 */
    --image-design-image-top: 110px; /* 第三屏主图上下位置：负数上移，正数下移 */
    position: absolute;
    top: var(--image-design-image-top);
    left: calc(50% - var(--image-design-image-width) / 2);
    width: var(--image-design-image-width);
    height: var(--image-design-image-height);
    overflow: hidden;
}

#screen-2 .case-image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    border-radius: 0;
    transition: transform 0.3s ease;
    object-fit: cover;
    object-position: center center;
}

#screen-2 .image-section:hover .case-image {
    transform: scale(1.05);
}

#screen-2 .description-section {
    --image-description-width: 460px; /* 第三屏下方文案宽度 */
    --image-description-top: 700px; /* 第三屏下方文案上下位置：负数上移，正数下移 */
    --image-description-left: 220px; /* 第三屏下方文案左右位置：负数左移，正数右移 */
    position: absolute;
    top: var(--image-description-top);
    width: var(--image-description-width);
    left: calc(50% - var(--image-description-width) / 2);
}

#screen-2 .page-description {
    text-align: center;
}

#screen-2 .page-description p {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
    font-family: 'Source Han Sans SC', 'SourceHanSans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

#screen-2 .more-cases-button {
    --image-more-top: 54px; /* 第三屏更多案例上下位置 */
    --image-more-right: 0px; /* 第三屏更多案例左右位置：负数右移，正数左移 */
    position: absolute;
    top: var(--image-more-top);
    right: var(--image-more-right);
}

/* ===== 第四屏：品牌包装设计 - 完全复制brand-packaging-design.css ===== */
#screen-3 .content-container {
    --screen-3-layout-height: 874px; /* 固定第四屏布局高度，避免标题、图片、按钮互相影响 */
    max-width: 1250px;
    margin: 0 auto;
    display: block;
    width: 100%;
    height: var(--screen-3-layout-height);
    position: relative;
    box-sizing: border-box;
}

#screen-3 .title-section {
    --packaging-title-top: 20px; /* 第四屏标题区上下位置：负数上移，正数下移 */
    --packaging-title-right: 20px; /* 第四屏标题区左右位置：负数右移，正数左移 */
    position: absolute;
    top: var(--packaging-title-top);
    right: var(--packaging-title-right);
    height: 90px;
}

#screen-3 .title-container {
    position: relative;
    padding-right: 20px;
}

#screen-3 .title-container::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0.5rem; /* 向下偏移，与文字顶部对齐 */
    /* 计算高度：标题高度 + 副标题高度 */
    height: calc(2rem * 1.5 + 1.28rem * 1.2);
    width: 4px;
    background: #7028aa;
}

#screen-3 .page-main-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    font-family: 'Swei Spring CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    text-align: right;
}

#screen-3 .page-sub-title {
    font-size: 1.28rem;
    color: #999;
    margin: 4px 0 0 0;
    font-family: 'Inter', 'Swei Spring CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    text-align: right;
}

#screen-3 .description-section {
    --packaging-description-width: 760px; /* 第四屏文案宽度 */
    --packaging-description-top: 152px; /* 第四屏文案上下位置：负数上移，正数下移 */
    position: absolute;
    top: var(--packaging-description-top);
    left: calc(50% - var(--packaging-description-width) / 2);
    width: var(--packaging-description-width);
    z-index: 1;
}

#screen-3 .page-description {
    text-align: center;
}

#screen-3 .page-description p {
    font-size: 0.8rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
    font-family: 'Source Han Sans SC', 'SourceHanSans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

#screen-3 .images-section {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: visible;
}

#screen-3 .image-container {
    position: absolute;
    overflow: hidden;
}

#screen-3 .image-left {
    --packaging-left-width: 376px; /* 左图宽度 */
    --packaging-left-height:  610px; /* 左图高度；图片比例不符时会裁切 */
    --packaging-left-top: 152px; /* 左图上下位置：负数上移，正数下移 */
    --packaging-left-left: 20px; /* 左图左右位置：负数左移，正数右移 */
    top: var(--packaging-left-top);
    left: var(--packaging-left-left);
    width: var(--packaging-left-width);
    height: var(--packaging-left-height);
}

#screen-3 .image-right {
    --packaging-right-width: 376px; /* 右图宽度 */
    --packaging-right-height: 610px; /* 右图高度；图片比例不符时会裁切 */
    --packaging-right-top: 152px; /* 右图上下位置：负数上移，正数下移 */
    --packaging-right-left: 846px; /* 右图左右位置：负数左移，正数右移 */
    top: var(--packaging-right-top);
    left: var(--packaging-right-left);
    width: var(--packaging-right-width);
    height: var(--packaging-right-height);
}

#screen-3 .image-center {
    --packaging-center-width: 376px; /* 中图宽度 */
    --packaging-center-height: 610px; /* 中图高度；图片比例不符时会裁切 */
    --packaging-center-top: 266px; /* 中图上下位置：负数上移，正数下移 */
    --packaging-center-left: 432px; /* 中图左右位置：负数左移，正数右移 */
    top: var(--packaging-center-top);
    left: var(--packaging-center-left);
    width: var(--packaging-center-width);
    height: var(--packaging-center-height);
}

#screen-3 .case-image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    border-radius: 0;
    transition: transform 0.3s ease;
    object-fit: cover;
    object-position: center center;
}

#screen-3 .image-container:hover .case-image {
    transform: scale(1.05);
}

#screen-3 .more-cases-button-wrapper {
    --packaging-more-top: 846px; /* 更多案例上下位置：负数上移，正数下移 */
    --packaging-more-right: 20px; /* 更多案例左右位置：负数右移，正数左移 */
    position: absolute;
    top: var(--packaging-more-top);
    right: var(--packaging-more-right);
}

/* ===== 第五屏：定制PPT设计 - 完全复制ppt-design.css ===== */
#screen-4 {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

#screen-4 .title-section-top {
    --ppt-title-group-top: 126px; /* 第五屏标题组三件套整体上下位置：负数上移，正数下移 */
    --ppt-title-group-left: 18px; /* 第五屏标题组三件套整体左右位置：负数左移，正数右移 */
    height: 207px;
    padding: 0;
    background: #fff;
    flex-shrink: 0;
    position: relative;
}

#screen-4 .title-container {
    max-width: 1250px;
    margin: 0 auto;
    position: relative;
    top: var(--ppt-title-group-top);
    left: var(--ppt-title-group-left);
    width: 100%;
    padding-left: 20px;
    box-sizing: border-box;
}

#screen-4 .title-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3rem;
    height: calc(2rem * 1.5 + 1.28rem * 1.2);
    width: 4px;
    background: #7028aa;
}

#screen-4 .page-main-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    font-family: 'Swei Spring CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    text-align: left;
}

#screen-4 .page-sub-title {
    font-size: 1.28rem;
    color: #999;
    margin: 4px 0 0 0;
    font-family: 'Inter', 'Swei Spring CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    text-align: left;
}

#screen-4 .cases-display {
    --ppt-cases-height: 425px; /* 第五屏主体内部布局参考高度 */
    flex: 1 1 auto;
    background: #fff;
    display: block;
    min-height: 0;
}

#screen-4 .cases-container {
    --ppt-layout-height: 425px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: block;
    width: 100%;
    height: var(--ppt-layout-height);
    position: relative;
    box-sizing: border-box;
}

#screen-4 .case-large {
    --ppt-large-width: 734px; /* 左侧大图宽度 */
    --ppt-large-height: 396px; /* 左侧大图高度；图片比例不符时会裁切 */
    --ppt-large-top: 44px; /* 左侧大图上下位置：负数上移，正数下移 */
    --ppt-large-left: -5px; /* 左侧大图左右位置：负数左移，正数右移 */
    position: absolute;
    top: var(--ppt-large-top);
    left: var(--ppt-large-left);
    width: var(--ppt-large-width);
    height: var(--ppt-large-height);
    z-index: 1;
    overflow: hidden;
}

#screen-4 .case-large img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    object-fit: cover;
    object-position: right center;
}

#screen-4 .case-large img:hover {
    transform: scale(1.02);
}

#screen-4 .case-right {
    --ppt-right-top: 0px; /* 右侧区域上下位置：负数上移，正数下移 */
    --ppt-right-right: 0px; /* 右侧区域左右位置：负数右移，正数左移 */
    --ppt-right-width: 400px; /* 右侧文案、按钮、小图的参考宽度 */
    --ppt-description-top: 44px; /* 右侧文案上下位置；调它时更多案例会跟着走 */
    --ppt-description-right: 0px; /* 右侧文案左右位置 */
    --ppt-more-offset-top:  182px; /* 更多案例相对文案的上下距离；调它不会影响文案 */
    --ppt-more-right: 0px; /* 更多案例左右位置 */
    position: absolute;
    right: var(--ppt-right-right);
    top: var(--ppt-right-top);
    z-index: 2;
    width: var(--ppt-right-width);
    height: 100%;
}

#screen-4 .page-description {
    position: absolute;
    top: var(--ppt-description-top);
    right: var(--ppt-description-right);
    width: 100%;
    text-align: right;
}

#screen-4 .page-description p {
    font-size: 0.8rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
    font-family: 'Source Han Sans SC', 'SourceHanSans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

#screen-4 .more-cases-wrapper {
    position: absolute;
    top: calc(var(--ppt-description-top) + var(--ppt-more-offset-top));
    right: var(--ppt-more-right);
    width: 100%;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    overflow: visible;
}

#screen-4 .case-small {
    --ppt-small-width: 445px; /* 右下小图宽度 */
    --ppt-small-height: 240px; /* 右下小图高度；图片比例不符时会裁切 */
    --ppt-small-top: 290px; /* 右下小图上下位置 */
    position: absolute;
    top: var(--ppt-small-top);
    right: 0px;
    width: var(--ppt-small-width);
    height: var(--ppt-small-height);
    overflow: hidden;
}

#screen-4 .case-small img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: left center;
    display: block;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

#screen-4 .case-small img:hover {
    transform: scale(1.02);
}

/* 底部联系信息 - 使用公共底部CSS */
/* 所有底部样式由common-footer.css控制 */

/* ===== 更多案例按钮通用样式 ===== */
.more-cases-button {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    text-decoration: none;
    color: #333;
    position: relative;
    gap: 15px;
    flex-shrink: 0;
}

.all-designs-page .more-cases-button::before {
    display: none !important;
}

.more-dot {
    font-size: 1rem;
    color: #7028aa;
    line-height: 1;
    flex-shrink: 0;
    padding-bottom: 7px; /* 和more-text保持一致，让dot和下划线对齐 */
    position: relative;
    top: 13px; /* 向下移动13px，让dot和下划线对齐 */
    margin-right: 52px;
}

.more-text {
    font-size: 0.7rem;
    font-weight: 500;
    color: #333;
    font-family: 'SweiSpringSugar', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    transition: color 0.3s ease;
    position: relative;
    padding-bottom: 7px;
    line-height: 1;
}

.more-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 248%;
    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%;
}

/* ===== 屏幕导航指示器样式覆盖 ===== */
.all-designs-page .nav-dot {
    border-color: #7028aa;
}

.all-designs-page .nav-dot:hover {
    border-color: #7028aa;
}

.all-designs-page .nav-dot.active {
    background: #7028aa;
    border-color: #7028aa;
    box-shadow: 0 0 10px rgba(112, 40, 170, 0.5);
}

/* ===== 桌面端固定 1920 x 1080 设计画布 ===== */
@media (min-width: 1101px) {
    .desktop-page-shell .all-designs-page {
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .desktop-page-shell .design-screen {
        width: 1920px;
        height: 1080px;
        min-height: 1080px;
    }

    .desktop-page-shell .all-designs-page .screen-navigator {
        right: 120px;
        top: 540px;
    }
}