/* * 新版项目详情页样式
 * 布局：左侧图片瀑布流 + 右侧信息固定
 */
.wrap {
    overflow: visible !important; 
}

/* ===== 核心容器布局 ===== */

/* ===== 左侧：图片画廊 (Grid 俄罗斯方块风) ===== */


.gallery-item {
    position: relative;
    overflow: hidden;
    /*border-radius: 4px; 轻微圆角 */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.gallery-item:hover img {
    transform: scale(1.03); /* 鼠标悬停微动效 */
}

/* 标题样式 */
.project-title {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
}

/* 详情列表样式重构 */
.case_itme_details dd,
.case_itme_details dt {
    display: block;
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.6;
}

.case_itme_details dd {
    color: #222;
    margin-top: -10px; /* 紧贴上一行 */
    margin-bottom: 25px;
    font-weight: 400;
}

/* 字段名 */
.case_itme_details {
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    opacity: 0.8;
    margin-top: 30px; /* 增加一点与大标题的距离 */
    margin-bottom: 20px;
    font-family: "Lato", sans-serif;
}

/* ===== 底部通用 Section ===== */
.section-footer-area {
    max-width: 1400px;
    margin: 80px auto;
    padding: 0 40px;
}

.section {
    margin-bottom: 80px;
}

.section-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.section-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.case-info {
    padding: 15px 0;
}

/* Part 3: 底部关联区域重构 (仿 XAL 风格) */

/* --- 1. 基础卡片容器设置 --- */
.case-grid {
    display: grid;
    /* 默认还是 4 列 */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.case-card {
    display: block;
    position: relative; /* 关键：为了让里面的文字能绝对定位 */
    overflow: hidden;
    text-decoration: none !important; /* 强制去掉所有下划线 */
}

/* 需求①：鼠标悬停也不要下划线 */
.case-card:hover,
.case-card:hover .case-title {
    text-decoration: none !important;
}

/* --- 2. 图片容器 (定义基础) --- */
.case-thumb {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f5f5f5;
    /* border-radius 已经在上一步删掉了，保持直角 */
}

.case-thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* 保证图片填满不拉伸 */
    transition: transform 0.5s ease;
}

/* 鼠标悬停时图片轻微放大 */
.case-card:hover .case-thumb img {
    transform: scale(1.05);
}

/* --- 3. 需求②：文字移到图片左下角 (悬浮覆盖) --- */
.case-info {
    position: absolute; /* 绝对定位，浮在图片上 */
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 15px; /* 给文字留点呼吸空间 */
    box-sizing: border-box;
    z-index: 2;
    
    /* 加一个渐变黑色背景，防止白色文字在浅色图片上看不清 */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

.case-title {
    color: #fff; /* 文字改为白色 */
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* 加一点文字阴影增加质感 */
    text-align: left;
    font-family: "Lato", sans-serif;
}

/* --- 4. 需求③：样式拆分 (产品正方形 vs 案例长方形) --- */

/* 针对 Used In This Case (产品)：正方形 1:1 */
.recommend-products .case-thumb {
    padding-top: 100%; /* 100% 代表 1:1 正方形 */
}

/* 针对 More Case (案例)：保持原本的长方形 3:2 */
.correlation-case .case-thumb {
    padding-top: 66.666%; /* 3:2 比例 */
}

.smart-masonry-grid {
    display: grid;
    /* 定义两列基础网格 */
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
    /* --- 核心魔法 ---
       dense 意思是“紧密堆积”。浏览器会尝试填满网格里的每一个空隙。
       这是实现大小图自动错落拼接的关键属性。 */
    grid-auto-flow: dense; 
}

/* =========================================
   新版布局：上文下图 (全宽画廊模式)
   ========================================= */

/* 1. 布局容器：改为垂直排列 */
.project-layout-container {
    display: flex;
    flex-direction: column; /* 关键：上下排列 */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* 2. 顶部文字区域 */
.project-info-right {
    width: 100%; /* 占满全宽 */
    margin-bottom: 60px; /* 文字和下方图片的间距 */
    text-align: center;
    margin: 0 auto;
}

.case_itme_details dd {
    margin-bottom: 0px; /* 控制行间距 */
    text-align: center; 
}

/* 之前是固定定位，现在要取消，恢复正常 */
.sticky-wrapper {
    position: static; 
    top: auto;
    z-index: auto;
    max-width: 1400px; /* 建议限制一下文字的最大宽度，否则在大屏上阅读体验不好 */
}
/* 3. 底部图片区域 (全宽) */
.project-gallery-left {
    width: 100%; /* 占满全宽 */
}

.smart-masonry-grid {
    display: grid;
    /* 重点建议：全宽模式下，2列可能图片太大了，建议改为 3列 */
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
    grid-auto-flow: dense;
}
/* --- 智能错落规则 --- */

/* 规则1：宽图 (is-wide) -> 横跨两列 */
/* (PHP逻辑设定了第1张图和特别宽的图会应用这个类) */
.gallery-item.is-wide {
    grid-column: span 2;
}

/* 规则2：竖图 (is-tall) -> 纵跨两行 */
/* (PHP逻辑设定了高瘦的图会应用这个类) */
/* 这会让它旁边空出位置，给后面的小图填补进来，形成错落感 */
.gallery-item.is-tall {
    grid-row: span 2;
}
/* ===== 移动端适配 (Responsive) ===== */
@media (max-width: 1024px) {
    .project-title {
        font-size: 28px;
    }
    .case-grid {
        grid-template-columns: repeat(3, 1fr); /* 平板显示3列 */
    }
}

@media (max-width: 768px) {
    .smart-masonry-grid {
        /* 手机上恢复单列垂直排列，体验最好 */
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        gap: 15px;
    }
    
    /* 手机上取消所有跨列跨行，全部变为单张大图 */
    .gallery-item.is-wide,
    .gallery-item.is-tall {
        grid-column: auto;
        grid-row: auto;
    }
    .section-footer-area {
        padding: 0 20px;
    }
    .case-grid {
        grid-template-columns: repeat(2, 1fr); /* 手机显示2列 */
        gap: 10px;
    }
    .case-title {
        font-size: 13px; /* 手机上文字小一点 */
        padding: 10px;
    }
    .project-layout-container {
        padding: 0 20px;
        margin-top: 40px;
    }
    .project-info-right {
        margin-bottom: 40px;
    }
    /* 手机上列表恢复垂直 */
    .case_itme_details {
        display: block;
        border: none;
    }
    .case_itme_details dd {
        margin-bottom: 10px;
    }
    
    /* 手机上图片单列 */
    .smart-masonry-grid {
        grid-template-columns: 1fr;
    }
    .gallery-item.is-wide, 
    .gallery-item.is-tall {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 480px) {

}