/* ================================================================
   Our Work Section - 结构修正全量版
   1. 适配新 HTML 结构 (.work-header)
   2. 增加 Header 高度，使 Title 更显眼且绝对居中
   3. 严格保护下方 Card 的原始动画、交互与文字
   ================================================================ */

.work-section {
    width: 100%;
    height: 100vh;
    background-color: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    scroll-margin-top: clamp(80px, 5vw + 20px, 130px);
    -webkit-tap-highlight-color: transparent;
}

/* --- 1. Header 区域 (针对你的 index.html 结构修复) --- */
.work-header {
    width: 100% !important;
    flex: 0 0 85px !important;
    height: 85px !important;
    background-color: #000;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
    padding: 0 !important;
    margin: 0 !important;
}

.work-header h2 {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    color: #ffffff;
    font-size: clamp(1.6em, 3.2vw, 3.2em) !important;
    font-weight: 300;
    opacity: 1;
    margin: 0 !important;
    text-align: center !important;
    line-height: 85px !important;
}

/* --- 2. 下方网格区域 (自动压缩高度以适配上方 Header) --- */
.work-grid {
    flex: 1;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* --- 3. Card 基础样式 (100% 还原你最原始的布局与动画) --- */
.work-card {
    flex: 1;
    position: relative;
    overflow: hidden;
    transition: flex 0.8s cubic-bezier(0.25, 1, 0.3, 1), height 0.6s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    will-change: flex, transform;
}

.work-card:hover,
.work-card.active-touch {
    flex: 6;
}

.card-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 保持你原版的 48vh 垂直对齐逻辑 */
    padding-top: 48vh;
    padding-left: clamp(12px, 2vw, 25px);
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
    transition: padding-left 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}


.work-card:hover .card-content-wrapper,
.work-card.active-touch .card-content-wrapper {
    padding-left: clamp(40px, 5vw, 120px);
    padding-right: 50px;
}

.card-content-wrapper h4 {
    color: #ffffffb5;
    margin: 0;
    font-weight: 500;
    line-height: 1.15;
    font-size: clamp(1.5rem, 2vw, 2rem);
    opacity: 0.6;
    transition: color 0.4s ease, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), font-size 0.6s ease;
}

.work-card:hover .card-content-wrapper h4,
.work-card.active-touch .card-content-wrapper h4 {
    color: #66b966 !important;
    font-size: clamp(1.6em, 3.2vw, 3.2em);
    opacity: 1;
}

.card-desc-area {
    max-height: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease, max-height 0.6s ease;
}

.work-card:hover .card-desc-area,
.work-card.active-touch .card-desc-area {
    max-height: 800px;
    opacity: 1;
    transform: translateY(0);
    margin-top: clamp(25px, 4vh, 60px);
}

.card-desc-area p {
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(1.1rem, 1.25vw, 2.2rem);
    line-height: 1.55;
    max-width: clamp(450px, 55vw, 1100px);
}

.card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 1.5s ease;
    opacity: 0.65;
}

.work-card:hover .card-bg,
.work-card.active-touch .card-bg {
    transform: scale(1.08);
    opacity: 1;
}

.work-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.85;
}

/* 保持原始五个颜色 */
.work-card:nth-child(1)::before {
    background: radial-gradient(circle at center, rgba(37, 166, 179, 0.4), #063f44);
}

.work-card:nth-child(2)::before {
    background: radial-gradient(circle at center, rgba(0, 110, 255, 0.4), #001e50);
}

.work-card:nth-child(3)::before {
    background: radial-gradient(circle at center, rgba(102, 185, 102, 0.4), #0a3c14);
}

.work-card:nth-child(4)::before {
    background: radial-gradient(circle at center, rgba(255, 160, 0, 0.4), #502800);
}

.work-card:nth-child(5)::before {
    background: radial-gradient(circle at center, rgba(180, 50, 255, 0.4), #320a46);
}

/* --- 4. 移动端适配 (100% 还原) --- */
@media (max-width: 991px) {
    .work-section {
        height: auto;
    }

    .work-header {
        height: 60px !important;
        flex: 0 0 60px !important;
    }

    .work-header h2 {
        line-height: 60px !important;
        font-size: 1.8rem !important;
    }

    .work-grid {
        flex-direction: column;
        height: auto;
    }

    .work-card {
        width: 100% !important;
        min-height: 300px;
        height: auto !important;
        flex: 1 1 auto !important;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .work-card.active-touch {
        height: 450px !important;
        /* 点击后高度 */
    }

    /* 关键修复：重置移动端文字的垂直位置 */
    .card-content-wrapper {
        /* 移动端绝对不能用 48vh，改为 120px 确保在 300px 高的卡片里能看到文字 */
        padding-top: 150px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        justify-content: center !important;
        /* 强制内容在移动端卡片内垂直居中 */
    }

    .work-card.active-touch .card-content-wrapper {
        padding-top: 60px !important;
        /* 点击展开后，上边距缩小，给描述文字腾位 */
    }

    .work-card.active-touch h4 {
        font-size: 2.2rem !important;
    }

    .card-desc-area p {
        font-size: 1.05rem !important;
        line-height: 1.5;
        margin-top: 10px;
    }
}

/* --- 5. 入场动画 (适配水平布局) --- */
.work-header h2.letter-flip-container span {
    display: inline-block;
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg) translate3d(0, 10px, 0);
    will-change: transform, opacity;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.8s ease;
}

.work-section.is-visible .work-header h2.letter-flip-container span {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg) translate3d(0, 0, 0);
}