/* =============================================
   CMA Theme - Tag Styles
   People | Student Work | Grid Layout
============================================= */

/* =============================================
   Base Styles
============================================= */
.tag-margin {
    padding-left: 8vw;
    padding-right: 8vw;
}

/* =============================================
   People Section
============================================= */

/* People Background */
.people-content {
    position: relative;
    margin-top: -5vw;
    width: 50%;
    margin-bottom: 12vw;
    overflow: visible; 
    z-index: 2;
    display: block;
}

.people-background {
    padding-top: 5vw;
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
    overflow: hidden;
}

.people-text {
    margin-top: 2vw;
}

.people-background img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.people-content h1 {
    font-size: clamp(2.6rem, 4vw, 4rem);
    font-weight: bold;
    width: 38vw;
    text-transform: uppercase;
    line-height: 1.2;
}

.people-content .title::before {
    content: "#";
    color: #7FEF35;
    margin-right: 2vw;
}

.people-content p {
    font-size: clamp(1rem, 1.33vw, 1.23rem);
    font-family: 'AlibabaPuHuiTi', sans-serif;
    line-height: 1.4;
    margin-bottom: 1.5vw;
    width: 67vw;
    color: #ffffff;
}

/* People List */
.people-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5vw;
    padding: 0;
    position: relative;
    z-index: 3;
    margin-top: -5vw;
}

.people-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.people-item .people-image {
    width: 100%;
    height: auto;
    margin-bottom: 0vw;
}

.people-item .people-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.people-item .people-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    color: #fff;
    background: #000;
    margin-top: -1vw;
    padding: 1.2vw 1.2vw 1.2vw 0;
}

.people-item .people-name {
    font-size: clamp(1rem, 1.13vw, 1.13rem);
    font-family: 'AlibabaPuHuiTiHeavy', sans-serif;
}

.people-item .people-text p {
    font-size: clamp(1rem, 1.13vw, 1.13rem);
    font-family: 'AlibabaPuHuiTi', sans-serif;
    line-height: 1.2;
    margin: 0;
    text-align: left;
    font-weight: bold;
    padding-left: 0;
}

.people-item .people-text .people-name {
    font-family: 'AlibabaPuHuiTiHeavy', sans-serif !important;
}

.people-item .people-text .people-title {
    background: #0000FF;
    padding: 0;
    margin-top: 0.5vw;
    text-align: left;
    border-radius: 0px;
    margin-left: 0;
}


/* =============================================
   Student Work Section
============================================= */

/* Student Work Content */
.studentwork-content {
    position: relative;
    width: 50%;
    margin-bottom: 5vw;
    overflow: visible; 
    z-index: 2;
    display: block;
}

.studentwork-content h1 {
    font-size: clamp(2.6rem, 4vw, 4rem);
    font-weight: bold;
    width: 60vw;
    margin-top: 3vw;
    text-transform: uppercase;
    line-height: 1.2;
}

.studentwork-content .title::before {
    content: "#";
    color: #7FEF35;
    margin-right: 2vw;
}

/* Student Work Items Container */
.student-work-list {
    display: flex;
    flex-direction: column;
    gap: 0vw;
    margin-top: 4vw;
}

.student-work-item {
    display: flex;
    gap: 0;
    background: transparent;
    padding: 0;
    margin-bottom: 5vw;
}

.student-work-image {
    margin-top: 0vw;
    flex: 1;
    max-width: 100%;
}

.student-work-image img {
    width: 45vw;
    height: auto;
    object-fit: cover;
    display: block;
    z-index: 0;
}

.student-work-content {
    flex: 1;
    color: #fff;
    padding: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
}

/* Work Title Section */
.work-title-section {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5vw;
}

.work-hash {
    color: #FFB800;
    font-size: clamp(1rem, 1.85vw, 1.8rem);
    font-weight: bold;
    margin-right: 1vw;
}

.work-title {
    color: white;
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-size: clamp(1rem, 1.85vw, 1.8rem);
    font-weight: bold;
    margin: 0;
}

/* Work Authors */
.work-authors {
    font-size: clamp(1rem, 1.33vw, 1.33rem);
    font-weight: bold;
    color: #fff;
    margin-bottom: 2vw;
    font-family: 'AlibabaPuHuiTi', sans-serif;
}

/* Work Description */
.work-description {
    font-size: clamp(1rem, 1.33vw, 1.33rem);
    line-height: 1.4;
    color: #fff;
    text-align: left;
    margin-top: -1vw;
    font-family: 'AlibabaPuHuiTi', sans-serif;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
}

.student-work-item .work-description {
    -webkit-line-clamp: 6;
    line-clamp: 6;
}

.grid-item.style2-item .work-description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Student Work Alternating Styles */
/* Style 1: 奇数项 (1,3,5,7...) - 图片在左，内容在右 */
.student-work-item:nth-child(2n+1) {
    flex-direction: row;
}

.student-work-item:nth-child(2n+1) .student-work-image {
    mask-image: linear-gradient(to right, black 60%, transparent 100%);
    order: 1;
}

.student-work-item:nth-child(2n+1) .student-work-content {
    margin-left: -8vw;
    order: 2;
}

/* Style 2: 偶数项 (2,4,6,8...) - 图片在右，内容在左 */
.student-work-item:nth-child(2n) {
    flex-direction: row-reverse;
}

.student-work-item:nth-child(2n) .student-work-image {
    mask-image: linear-gradient(to left, black 60%, transparent 100%);
    order: 1;
}

.student-work-item:nth-child(2n) .student-work-content {
    align-items: flex-end;
    margin-right: -12vw;
    order: 2;
}

.student-work-item:nth-child(2n) .work-title-section,
.student-work-item:nth-child(2n) .work-authors {
    padding-left: 16vw;
}

/* =============================================
   Grid Layout Section
============================================= */

/* Grid Container */
.student-work-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

/* Grid Image Overlay */
.student-work-image-overlay {
    display: block;
    overflow: hidden;
    border-radius: 0px;
}

.student-work-image-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Grid Content Overlay */
.student-work-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
}

.student-work-content-overlay .work-title-section {
    display: flex;
    align-items: center;
    margin-bottom: 1vw;
}

.student-work-content-overlay .work-hash {
    color: #FFB800;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: bold;
    margin-right: 0.5vw;
}

.student-work-content-overlay .work-title {
    color: #FFB800;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: bold;
    margin: 0;
}

.student-work-content-overlay .work-authors {
    font-size: clamp(1rem, 1.33vw, 1.33rem);
    color: #fff;
    margin-bottom: 1vw;
    font-family: 'AlibabaPuHuiTi', sans-serif;
}

.student-work-content-overlay .work-description {
    font-size: clamp(1rem, 1.33vw, 1.33rem);
    line-height: 1.4;
    color: #fff;
    font-family: 'AlibabaPuHuiTi', sans-serif;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 4n+1 循环网格布局 */
.student-work-grid-container {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    margin-top: 1vw;
    margin-bottom: 0vw;
}

.grid-row {
    display: flex;
    gap: 6vw;
    align-items: flex-start;
    justify-content: flex-start;
}

.grid-item {
    position: relative;
    overflow: visible;
}

/* 奇数行 (2n+1) - 第1列小尺寸，第2列大尺寸 */
.grid-row:nth-child(2n+1) .grid-item:nth-child(1) {
    width: 55vw;
    height: 25vw;
}

.grid-row:nth-child(2n+1) .grid-item:nth-child(1) .student-work-image-overlay {
    display: block !important;
    width: 100%;
    height: 100%;
}

.grid-row:nth-child(2n+1) .grid-item:nth-child(2) {
    width: 43vw;
    height: 50vw;
}

.grid-row:nth-child(2n+1) .grid-item:nth-child(2) .student-work-image-overlay {
    display: block !important;
    width: 100%;
    height: 100%;
}

/* 偶数行 (2n) - 第1列大尺寸，第2列小尺寸 */
.grid-row:nth-child(2n) .grid-item:nth-child(1) {
    width: 43vw;
    height: 50vw;
}

.grid-row:nth-child(2n) .grid-item:nth-child(1) .student-work-image-overlay {
    display: block !important;
    width: 100%;
    height: 100%;
}

.grid-row:nth-child(2n) .grid-item:nth-child(2) {
    width: 55vw;
    height: 25vw;
}

.grid-row:nth-child(2n) .grid-item:nth-child(2) .student-work-image-overlay {
    display: block !important;
    width: 100%;
    height: 100%;
}

/* 网格项目图片样式 */
.grid-item .student-work-image-overlay {
    position: relative;
    border-radius: 0px;
    overflow: visible;
}

.grid-item .student-work-image-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 特殊定位 */
.grid-row:nth-child(2n) .grid-item:nth-child(1) {
    margin-top: -20vw;
}

.grid-row:nth-child(2n) .grid-item:nth-child(2) {
    margin-top: 6vw;
}

/* 文本宽度限制 */
.grid-row:nth-child(2n+1) .grid-item:nth-child(2) .student-work-content-overlay .work-description {
    max-width: 30vw;
}

.grid-row:nth-child(2n) .grid-item:nth-child(1) .student-work-content-overlay .work-description {
    max-width: 30vw;
}

.grid-row:nth-child(2n+1) .grid-item:nth-child(1) .student-work-content-overlay {
    margin-bottom: -2vw;
}


/* 网格项目内容叠加样式 */
.grid-item .student-work-content-overlay {
    position: absolute;
    bottom: -1.5vw;
    left: 0;
    right: 0;
    color: #fff;
    padding: 2vw 1.5vw 1.5vw 1.5vw;
    transform: translateY(0);
    transition: transform 0.3s ease;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
}

.grid-item .student-work-content-overlay .work-title-section {
    display: flex;
    align-items: center;
    margin-bottom: 0.3vw;
}

.grid-item .student-work-content-overlay .work-hash {
    color: #FFB800;
    font-size: clamp(1rem, 1.85vw, 1.8rem);
    font-weight: bold;
    margin-right: 0.3vw;
}

.grid-item .student-work-content-overlay .work-title {
    color: white;
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: bold;
    margin: 0;
}

.grid-item .student-work-content-overlay .work-authors {
    font-size: clamp(1rem, 1.13vw, 1.13rem);
    color: #fff;
    margin-bottom: 0.2vw;
    font-family: 'AlibabaPuHuiTi', sans-serif;
}

.grid-item .student-work-content-overlay .work-description {
    font-size: clamp(1rem, 1.13vw, 1.13rem);
    line-height: 1.4;
    color: #fff;
    font-family: 'AlibabaPuHuiTi', sans-serif;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 网格项目悬浮效果 */
.grid-item:hover .student-work-content-overlay {
    background: linear-gradient(to top, #0000FF 0%, #0000FF 50%, #0000FF 100%);
    clip-path: polygon(0% 0%, 100% 15%, 100% 100%, 0% 100%);
    transform: translateY(-0.5vw);
    padding: 2.5vw 1.5vw 2vw 1.5vw;
}

.grid-item:hover .student-work-content-overlay .work-description {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}



/* =============================================
   Text Ellipsis and Hover Effects
============================================= */

/* 多行省略号样式 */
.student-work-list p.multi-line-ellipsis,
.student-work-content p.multi-line-ellipsis,
.student-work-content-overlay p.multi-line-ellipsis {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 基础省略号样式 */
.student-work-content .work-description,
.student-work-item .work-description {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.3s ease !important;
}

/* Style 1和Style 2悬浮效果 */
.student-work-item:hover .work-description {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    background: rgba(0, 0, 0, 0.1);
}

.student-work-item:hover .work-description p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}

/* 网格项目描述文本省略 */
.grid-item .student-work-content-overlay .work-description {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* studentwork2.hbs专用样式 */
.grid-item.style2-item .student-work-content-overlay .work-description p {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0;
    font-size: clamp(1rem, 1.13vw, 1.13rem);
    line-height: 1.4;
    color: #fff;
    font-family: 'AlibabaPuHuiTi', sans-serif;
    transition: all 0.3s ease;
}

.grid-item.style2-item:hover .student-work-content-overlay .work-description p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}

/* =============================================
   Responsive Design - Media Queries
============================================= */

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .people-content {
        text-align: justify;
        width: 100%;
        padding: 1vh;
        word-wrap: break-word;
        hyphens: auto;
        position: static;
        margin-bottom: 2rem;
        display: block;
    }
    
    .people-background {
        position: static;
        width: 100%;
        height: auto;
        order: -1;
        text-align: center;
    }
    
    .people-background img {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        object-fit: cover;
        border-radius: 0px;
    }
    
    .people-content h1 {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
        margin-bottom: 1.5rem;
        line-height: 1.3;
        width: 100%;
        padding-top: 0;
        text-align: left;
    }
    
    .people-content p {
        font-size: clamp(0.9rem, 3.5vw, 1.1rem);
        line-height: 1.6;
        text-align: justify;
        margin-bottom: 1.2rem;
        max-width: 100%;
        width: 100%;
        word-wrap: break-word;
        hyphens: auto;
    }
    
    .people-list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
        padding: 1vh;
        margin-top: 0;
        position: static;
        z-index: 3;
    }
    
    .people-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 0px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        transition: transform 0.2s ease;
    }
    
    .people-item:hover {
        transform: scale(1.02);
    }
    
    .people-item:active {
        transform: scale(0.98);
    }
    
    .people-item .people-image {
        width: 100%;
        height: auto;
        margin-bottom: 0;
    }
    
    .people-item .people-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }
    
    .people-item .people-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        color: #fff;
        background: #000;
        margin-top: -1vw;
        padding: 1rem 0.8rem;
    }
    
    .people-item .people-name {
        font-size: clamp(0.9rem, 3vw, 1rem);
        font-family: 'HYFangDieF', 'AlibabaPuHuiTi', sans-serif;
        margin-bottom: 0.3rem;
    }
    
    .people-item .people-text p {
        font-size: clamp(0.8rem, 2.8vw, 0.9rem);
        font-family: 'AlibabaPuHuiTi', sans-serif;
        line-height: 1.2;
        margin: 0;
        text-align: left;
        font-weight: bold;
        padding-left: 0;
    }
    
    .people-item .people-text .people-title {
        background: #0000FF;
        padding: 0.2rem 0.5rem;
        margin-top: 0.3rem;
        text-align: left;
        border-radius: 0px;
        margin-left: 0;
        font-size: clamp(0.7rem, 2.5vw, 0.8rem);
    }
    
    .studentwork-content {
        position: static;
        width: 100%;
        height: auto;
        display: block;
        padding-top: 0;
        margin-bottom: 2rem;
        padding: 1vh;
        text-align: left;
    }
    
    .studentwork-content h1 {
        font-size: clamp(1.4rem, 5vw, 2rem);
        margin-bottom: 0.5rem;
        line-height: 1.3;
        width: 100%;
        margin-top: 0;
        padding-top: 3vh;
        text-align: left;
        font-family: 'HYFangDieF', 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                     "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        color: #ffffff;
        font-weight: 400;
        letter-spacing: 0.02em;
    }
    
    .student-work-item {
        flex-direction: column !important;
        gap: 2vw;
        margin-bottom: 8vw;
    }
    
    .student-work-image {
        max-width: 100%;
        order: 1;
        margin-top: 0;
    }
    
    .student-work-image img {
        width: 100% !important;
        height: auto;
        object-fit: cover;
    }
    
    .student-work-content {
        order: 2;
        padding: 4vw 2vw;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-height: auto;
    }
    
    .student-work-item:nth-child(2n) {
        flex-direction: column !important;
    }
    
    .student-work-item:nth-child(2n) .student-work-image {
        order: 1;
    }
    
    .student-work-item:nth-child(2n) .student-work-content {
        order: 2;
        align-items: flex-start !important;
        padding-left: 2vw !important;
    }
    
    .student-work-item:nth-child(2n) .work-title-section,
    .student-work-item:nth-child(2n) .work-authors {
        padding-left: 0 !important;
    }
    
    .work-description {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .work-description p {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .student-work-content .work-description,
    .student-work-item .work-description {
        white-space: normal !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    
    .student-work-grid-container {
        gap: 6vw;
        padding: 0 2vw;
    }
    
    .grid-row {
        flex-direction: column;
        gap: 6vw;
        align-items: center;
        margin-bottom: 4vw;
    }
    
    .grid-row:nth-child(2n+1) .grid-item:nth-child(1),
    .grid-row:nth-child(2n+1) .grid-item:nth-child(2),
    .grid-row:nth-child(2n) .grid-item:nth-child(1),
    .grid-row:nth-child(2n) .grid-item:nth-child(2) {
        width: 100%;
        height: 50vw;
        margin-top: 0;
    }
    
    .grid-item .student-work-content-overlay {
        padding: 4vw 3vw 3vw 3vw;
    }
    
    .grid-item .student-work-content-overlay .work-hash,
    .grid-item .student-work-content-overlay .work-title {
        font-size: clamp(0.9rem, 3.5vw, 1.4rem);
    }
    
    .grid-item .student-work-content-overlay .work-authors {
        font-size: clamp(0.7rem, 2.8vw, 0.9rem);
        margin-bottom: 1.5vw;
    }
    
    .grid-item .student-work-content-overlay .work-description {
        font-size: clamp(0.6rem, 2.2vw, 0.75rem);
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        transition: all 0.3s ease;
        line-height: 1.3;
    }
    
    .student-work-item .work-description p {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    
    .grid-item.style2-item .student-work-content-overlay .work-description p {
        font-size: clamp(0.6rem, 2.2vw, 0.75rem);
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        transition: all 0.3s ease;
        line-height: 1.3;
    }
    
    .grid-item:hover .student-work-content-overlay .work-description {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
    }
    
    .grid-item.style2-item:hover .student-work-content-overlay .work-description p {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
    }
    
    .student-work-item:hover .work-description {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
        background: rgba(0, 0, 0, 0.1);
    }
}

/* Medium Mobile (<=640px) */
@media (max-width: 640px) {
    .people-content h1 {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
        margin-bottom: 1.2rem;
    }
    
    .people-content p {
        font-size: clamp(0.85rem, 4vw, 1rem);
        line-height: 1.7;
    }
    
    .people-list {
        gap: 1.2rem;
    }
    
    .people-item .people-name {
        font-size: clamp(0.85rem, 3.5vw, 0.95rem);
    }
    
    .people-item .people-text p {
        font-size: clamp(0.75rem, 3vw, 0.85rem);
    }
    
    .people-item .people-text .people-title {
        font-size: clamp(0.65rem, 2.8vw, 0.75rem);
    }
    
    .studentwork-content h1 {
        font-size: clamp(1.2rem, 5.5vw, 1.8rem);
        margin-bottom: 0.3rem;
        line-height: 1.3;
        padding-top: 3vh;
        text-align: left;
        font-family: 'HYFangDieF', 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                     "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        color: #ffffff;
        font-weight: 400;
        letter-spacing: 0.02em;
    }
    
    .student-work-item {
        margin-bottom: 6vw;
    }
    
    .student-work-content {
        padding: 3vw 1.5vw;
    }
    
    .work-hash,
    .work-title {
        font-size: clamp(1.2rem, 4vw, 1.6rem);
    }
    
    .work-authors {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
        margin-bottom: 1.5vw;
    }
    
    .work-description {
        font-size: clamp(0.9rem, 3vw, 1rem);
    }
    
    .student-work-grid-container {
        gap: 5vw;
        padding: 0 1.5vw;
    }
    
    .grid-row {
        gap: 5vw;
        margin-bottom: 3vw;
    }
    
    .grid-item .student-work-content-overlay .work-hash,
    .grid-item .student-work-content-overlay .work-title {
        font-size: clamp(0.8rem, 3.2vw, 1.2rem);
    }
    
    .grid-item .student-work-content-overlay .work-authors {
        font-size: clamp(0.65rem, 2.5vw, 0.8rem);
        margin-bottom: 1.5vw;
    }
    
    .grid-item .student-work-content-overlay .work-description {
        font-size: clamp(0.55rem, 2vw, 0.7rem);
        line-height: 1.3;
    }
    
    .grid-item.style2-item .student-work-content-overlay .work-description p {
        font-size: clamp(0.55rem, 2vw, 0.7rem);
        line-height: 1.3;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        transition: all 0.3s ease;
    }
}

/* Small Mobile (<=480px) */
@media (max-width: 480px) {
    .people-content h1 {
        font-size: clamp(1.4rem, 8vw, 2rem);
        margin-bottom: 1rem;
        line-height: 1.2;
    }
    
    .people-content p {
        font-size: clamp(0.8rem, 4.5vw, 0.95rem);
        line-height: 1.7;
        margin-bottom: 0.9rem;
    }
    
    .people-list {
        gap: 1rem;
    }
    
    .people-item {
        border-radius: 0px;
    }
    
    .people-item .people-name {
        font-size: clamp(0.8rem, 4vw, 0.9rem);
    }
    
    .people-item .people-text p {
        font-size: clamp(0.7rem, 3.5vw, 0.8rem);
    }
    
    .people-item .people-text .people-title {
        font-size: clamp(0.6rem, 3vw, 0.7rem);
        padding: 0.15rem 0.4rem;
    }
    
    .studentwork-content h1 {
        font-size: clamp(1.1rem, 6vw, 1.6rem);
        margin-bottom: 0.3rem;
        line-height: 1.2;
        padding-top: 3vh;
        text-align: left;
        font-family: 'HYFangDieF', 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                     "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        color: #ffffff;
        font-weight: 400;
        letter-spacing: 0.02em;
    }
    
    .student-work-item {
        margin-bottom: 5vw;
    }
    
    .student-work-content {
        padding: 2.5vw 1vw;
    }
    
    .work-hash,
    .work-title {
        font-size: clamp(1rem, 4.5vw, 1.4rem);
    }
    
    .work-authors {
        font-size: clamp(0.8rem, 3.5vw, 1rem);
        margin-bottom: 1vw;
    }
    
    .work-description {
        font-size: clamp(0.8rem, 3.5vw, 0.9rem);
        line-height: 1.5;
    }
    
    .student-work-grid-container {
        gap: 4vw;
        padding: 0 1vw;
    }
    
    .grid-row {
        gap: 4vw;
        margin-bottom: 2vw;
    }
    
    .grid-item .student-work-content-overlay .work-hash,
    .grid-item .student-work-content-overlay .work-title {
        font-size: clamp(0.7rem, 2.8vw, 1rem);
    }
    
    .grid-item .student-work-content-overlay .work-authors {
        font-size: clamp(0.6rem, 2.2vw, 0.75rem);
        margin-bottom: 1.2vw;
    }
    
    .grid-item .student-work-content-overlay .work-description {
        font-size: clamp(0.5rem, 1.8vw, 0.65rem);
        line-height: 1.3;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        transition: all 0.3s ease;
    }
    
    .student-work-item .work-description p {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    
    .grid-item.style2-item .student-work-content-overlay .work-description p {
        font-size: clamp(0.5rem, 1.8vw, 0.65rem);
        line-height: 1.3;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        transition: all 0.3s ease;
    }
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .people-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 4.5vw;
    }
    
    .people-content h1 {
        font-size: clamp(2.8rem, 4vw, 3.2rem);
        width: 42vw;
    }
    
    .people-content p {
        font-size: clamp(1rem, 1.3vw, 1.15rem);
        width: 68vw;
    }
    
    .grid-item .student-work-content-overlay .work-hash,
    .grid-item .student-work-content-overlay .work-title {
        font-size: clamp(0.8rem, 1.4vw, 1.2rem) !important;
    }
    
    .grid-item .student-work-content-overlay .work-authors {
        font-size: clamp(0.7rem, 1.1vw, 0.85rem) !important;
        margin-bottom: 1vw;
    }
    
    .grid-item .student-work-content-overlay .work-description {
        font-size: clamp(0.7rem, 1vw, 0.8rem) !important;
        line-height: 1.3;
    }
}

/* Tablet Portrait (769px - 899px) */
@media (min-width: 769px) and (max-width: 899px) {
    .student-work-item .work-description {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* Tablet Landscape (900px - 1024px) */
@media (min-width: 900px) and (max-width: 1024px) {
    .student-work-item .work-description {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

/* Desktop (1025px+) */
@media (min-width: 1025px) and (max-width: 1199px) {
    .student-work-item .work-description {
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }
    
    .people-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 4vw;
    }
    
    .people-content h1 {
        font-size: clamp(2.5rem, 4.2vw, 2.8rem);
        width: 45vw;
    }
    
    .people-content p {
        font-size: clamp(0.95rem, 1.4vw, 1.1rem);
        width: 72vw;
    }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .student-work-item .work-description {
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
    
    .people-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 4.5vw;
    }
    
    .people-content h1 {
        font-size: clamp(2.8rem, 4vw, 3.2rem);
        width: 42vw;
    }
    
    .people-content p {
        font-size: clamp(1rem, 1.3vw, 1.15rem);
        width: 68vw;
    }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .student-work-item .work-description {
        -webkit-line-clamp: 6;
        line-clamp: 6;
    }
    
    .grid-item.style2-item .student-work-content-overlay .work-description {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    
    .people-list {
        grid-template-columns: repeat(5, 1fr);
        gap: 5vw;
    }
}