/* ==========================================================================
   Cases View Styles (客户案例页面专用样式)
   依赖：tsingoal.css (flex + rem 基础类)
   根容器：.is-view-cases
   ========================================================================== */

/* --- 1. Top Banner --- */
.is-view-cases .cases-banner {
    position: relative;
    overflow: hidden;
    height: 43.75rem;
}

.is-view-cases .cases-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.is-view-cases .cases-banner .banner-content {
    position: relative;
    z-index: 2;
}

/* --- 2. Cases Grid --- */
.is-view-cases .cases-section {
    padding-top: 7.5rem; 
    padding-bottom: 7.5rem;
}

/* 3列网格 */
.is-view-cases .cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem; /* 24px间距 */
}

/* 案例卡片 */
.is-view-cases .case-card {
    position: relative;
    width: 100%;
    border-radius: 0.5rem; /* 8px圆角 */
    overflow: hidden;
    /* 根据设计稿中的长宽比设置一个合理的固切比例 (如16:10) */
    aspect-ratio: 16 / 10;
    display: block; 
    text-decoration: none;
}

.is-view-cases .case-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.is-view-cases .case-card:hover img {
    transform: scale(1.05);
}

/* 底部渐变与文本区域 */
.is-view-cases .case-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    padding: 1.5rem 1.25rem; 
    background: linear-gradient(180deg, rgba(133,155,196,0) 0%, #255A9B 100%);
    pointer-events: none; /* 让鼠标事件穿透 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: height 0.6s ease;
    z-index: 1;
}


.is-view-cases .case-card:hover .case-card-overlay {
    height: 150%;
}

/* 文本包装器：保持标题始终可见 */
.is-view-cases .case-card-text {
    transition: transform 0.6s ease;
}

/* 介绍文字展开容器：利用 grid 的 0fr→1fr 实现自适应高度动画 */
.is-view-cases .case-card-desc-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s ease;
}

.is-view-cases .case-card:hover .case-card-desc-wrap {
    grid-template-rows: 1fr;
}

/* 案例卡片标题 */
.is-view-cases .case-card-title {
    color: #FFFFFF;
    font-size: 1.5rem; /* 24px */
    line-height: 2.0625rem!important; /* 33px */
    margin: 0!important; 
    font-family: s-semibold, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 案例卡片介绍 */
.is-view-cases .case-card-desc {
    color: #FFFFFF;
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
    padding-top: 0.375rem; /* 6px，距离标题的间距 */
    font-family: s-regular, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: hidden;
    min-height: 0; /* grid 0fr 收缩关键属性 */
    opacity: 0;
    transition: opacity 0.6s ease;
}

.is-view-cases .case-card:hover .case-card-desc {
    opacity: 1;
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .is-view-cases .cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .is-view-cases .cases-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}
@media (max-width: 640px) {
    .is-view-cases .cases-grid {
        grid-template-columns: 1fr;
    }
}