/* ============================
   Project Detail 独立样式
   ============================ */

/* 页面容器 */
.page-project {
    margin-top: var(--nav-height);
    padding-bottom: 80px;
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 1. Hero 区域 (定制版：宽图 + 文字自由对齐) --- */
.project-hero {
    /* 1. 宽度设为 100%，铺满全屏 */
    width: 100%; 
    /* 2. 删掉最大宽度限制 (和首页轮播图对齐) */
    max-width: none; 
    /* 3. 核心：使用和首页完全一样的变量控制左右留白 */
    /* 上下保持 0 (由margin控制)，左右必须是 var(--page-gap) */
    padding: 0 var(--page-gap);
    
    margin: 0 auto 40px; /* 居中显示 */
    box-sizing: border-box;
    text-align: left; /* 整体左对齐 */
}

/* 主图 */
.main-visual {
    width: 100%; /* 跟随上面 .project-hero 的宽度 */
    /* 按固定比例控制 */
    /* 16 / 9 = 标准宽屏 */
    /* 21 / 9 = 超宽电影感 (适合展示全景) */
    /* 3 / 2  = 经典相机比例 */
    /* auto   = 图片原本是什么样就是什么样 */
    aspect-ratio: 21 / 9; 
    object-fit: cover;
    
    margin-top: 40px;  /* 顶部留白 */
    margin-bottom: 0px;   /* 底部留白 */
    
    /* 图片本身不需要 padding，它要撑满容器 */
    display: block;
}

/* 1. 外层容器 */
.project-title {
    width: 100%;
    /* 左右留白跟随全局变量 */
    padding-left: 0; 
    margin-top: 20px;
    margin-bottom: 80px;
    text-align: left;
}

/* 2. 大标题 */
.project-title h1 {
    font-size: 28px;
    font-family: 'Raleway', 'Noto Serif SC', serif; /* 标题可以用衬线体显得更有文化感，或者保持 Sans */
    font-weight: 400;
    color: #000;
    margin-bottom: 20px; /* 标题和下面内容的距离 */
    letter-spacing: 1px;
}

/* 3. 分栏布局容器 (PC端) */
.project-info-layout {
    display: grid;
    /* 定义两列宽度：左侧占 35%，右侧占 55% */
    grid-template-columns: 35% 55%;
    
    /* =========== 🔴 [调整] 左侧栏与右侧栏之间的间距 =========== */
    gap: 10%; 
    
    align-items: start; /* 顶部对齐 */
}

/* --- 左侧：参数列表容器 --- */
.info-left {
    display: flex;
    flex-direction: column;
    
    /* =========== [调整] 每一行参数之间的垂直距离 =========== */
    gap: 12px; 
    
    font-size: 14px;
}

/* 每一行的布局 */
.info-row {
    display: grid;
    /* 这里的 100px 是参数名的宽度。*/
    /* 如果你想让参数值离参数名远一点，可以加大这个数字 (例如 120px) */
    grid-template-columns: 100px 1fr; 
    
    /* =========== [调整] 参数名与参数值之间的额外间距 =========== */
    gap: 0px; 

    align-items: baseline; 
}

/* 参数名 (Label) */
.label {
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 400; 
    color: #000;

    /* =========== 🔴 [调整] 参数名独立留白 (上-右-下-左) =========== */
    margin: 0px 0px 0px 0px;
}

/* 参数值 (Value) */
.value {
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 300; 
    color: #000;
    line-height: 1.6;

    /* =========== 🔴 [调整] 参数值独立留白 (上-右-下-左) =========== */
    margin: 0px 0px 0px 0px;
}

/* ============================
   左侧底部自定义文字样式
   ============================ */
.left-custom-note {
    /* --- 1. 布局与留白 (上 右 下 左) --- */
    margin-top:    60px;  /* 距离上方参数列表的距离 */
    margin-bottom: 0px;   /* 距离底部的距离 */
    margin-left:   0px;   /* 左边距 */
    margin-right:  0px;   /* 右边距 */

    /* --- 2. 字体与颜色 --- */
    color: #666666;       /* 文字颜色：#000是黑，#888是灰 */
    font-size: 12px;      /* 字体大小 */
    font-family: 'Noto Sans SC', sans-serif; /* 字体 */
    font-weight: 300;     /* 字重：300细，400正常，700粗 */
    line-height: 1.6;     /* 行高，数字越大行距越宽 */
    
    /* --- 3. 对齐方式 --- */
    text-align: left;     /* left左对齐, center居中, right右对齐 */
    
    /* 如果你想限制它的宽度，不让它撑满左侧那35% */
    max-width: 100%;      
}

/* 让里面的 p 标签不带默认边距，方便控制 */
.left-custom-note p {
    margin: 0 0 10px 0; /* 每段文字下面留 10px 空隙 */
}

/* --- 右侧：文章描述 --- */
.info-right p {
    font-size: 15px;
    line-height: 2.0; 
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 300;
    color: #000;
    text-align: justify; 

    /* =========== 🔴 [调整] 段落之间的距离 (段后距) =========== */
    margin-bottom: 20px;

    /* =========== 🔴 [调整] 段落的其他留白 (上-右-下-左) =========== */
    margin-top:    0px;
    margin-right:  0px;
    margin-left:   0px;
}

/* --- 2. Gallery 区域 (修改版：一行4张 + 完美对齐) --- */
.project-gallery {
    /* 🔴 1. 宽度设置 (和 Hero 区域保持一致) */
    width: 100%;
    /* 🔴 2. 去掉最大宽度限制 */
    max-width: none; 
    /* 🔴 3. 核心：使用全局变量控制留白 */
    padding: 0 var(--page-gap); 
    box-sizing: border-box;
    margin-bottom: 100px;
}

.gallery-grid {
    display: grid;
    /* 🔴 4. 改为一行 4 列 */
    grid-template-columns: repeat(4, 1fr); 

    gap: 15px; /* 图片之间的间距 */
}

.gallery-item {
    width: 100%;
    /* 设置默认比例 */
    aspect-ratio: 3 / 2; 
    overflow: hidden;
    cursor: zoom-in;
    background: #f0f0f0;
}

/* --- 特殊模式控制  --- */
/* 如果父容器加了 mode-1-1，强制变正方形 */
.gallery-grid.mode-1-1 .gallery-item {
    aspect-ratio: 1 / 1 !important;
}

/* 如果父容器加了 mode-3-2，强制变宽屏 */
.gallery-grid.mode-3-2 .gallery-item {
    aspect-ratio: 3 / 2 !important;
}

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

.gallery-item:hover img {
    transform: scale(1.05);
    filter: brightness(0.95);
}

/* --- 移动端适配  --- */
@media screen and (max-width: 768px) {
     :root {
        /* 导航栏高度适配 */
        --nav-height: 70px; 
    }

    /* 1. 父容器：控制主图的左右留白 */
    .project-hero {
        width: 100% !important;
        padding-left: 8px !important;  
        padding-right: 8px !important;
        box-sizing: border-box; 
        margin: 0 !important;
    }
    
    /* 2. 主图：竖屏全屏模式 */
    .main-visual {
        width: 100% !important;
        height: calc(100vh - var(--nav-height) - 10vh) !important;
        object-fit: cover !important;
        object-position: center; 
        aspect-ratio: auto !important;
        margin: 0 !important;
    }
    
    /* 3. 文字容器 & 字体同步 */
    .project-title {
        margin-top: 8px !important; 
        margin-bottom: 8px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .project-title h1 {
        font-size: 22px;
        margin-bottom: 30px;
    }

    /* 手机上改为单列布局 */
    .project-info-layout {
        grid-template-columns: 1fr; /* 强制单列 */
        
        /* ===========  [手机] 参数表(上) 与 正文(下) 之间的距离 =========== */
        gap: 20px; 
        
        /* 容器整体留白 */
        margin-top:    0px;
        margin-bottom: 0px;
    }

     /*  参数列表容器 */
    .info-left {
        font-size: 13px;
        display: flex;
        flex-direction: column;
        
        /* ===========  [手机] 每一行参数之间的垂直距离 =========== */
        gap: 10px; 
    }

    /*  单行参数布局 (名 + 值) */
    .info-row {
        display: grid;
        
        /* ===========  [手机] 左侧参数名宽度 & 中间间距 =========== */
        /* 80px 是参数名的宽度 (不够可改大) */
        /* 1fr 是参数值自动填满剩余空间 */
        grid-template-columns: 80px 1fr; 
        
        /* 参数名和参数值之间的水平间距 */
        gap: 10px; 
        
        align-items: baseline;
    }

     /* 手机端参数名 (Label) */
    .label {
        /* ===========  [手机] 参数名独立留白 (上-右-下-左) =========== */
        margin-top:    0px;
        margin-right:  0px;
        margin-bottom: 0px;
        margin-left:   0px;
    }

    /* 手机端参数值 (Value) */
    .value {
        /* ===========  [手机] 参数值独立留白 (上-右-下-左) =========== */
        margin-top:    0px;
        margin-right:  0px;
        margin-bottom: 0px;
        margin-left:   0px;
    }

    /* 4. 文章描述 (在手机上位于下方) */
    .info-right p {
        font-size: 14px;
        line-height: 1.8;
        
        /* =========== 🔴 [手机] 段落之间的距离 =========== */
        margin-bottom: 20px;
        
        /* =========== 🔴 [手机] 段落独立留白 (上-右-下-左) =========== */
        margin-top:    0px;
        margin-right:  0px;
        margin-left:   0px;
    }

    /* ============================
       手机端：左侧底部文字 
       ============================ */
    .left-custom-note {
        /* --- 1. 布局与留白 (上 - 右 - 下 - 左) --- */
        /* margin-top 控制它离上面"参数列表"的距离 */
        margin-top:    30px;  
        margin-right:  0px;
        margin-bottom: 20px;  /* 手机上可能需要底部多留点白 */
        margin-left:   0px;

        /* --- 2. 字体与颜色 --- */
        color: #999999;       /* 手机上颜色 (可以和电脑不一样) */
        font-size: 13px;      /* 手机上字体大小 */
        font-family: 'Noto Sans SC', sans-serif;
        font-weight: 300;     /* 字重：300细，400正常 */
        line-height: 1.6;     /* 行高 */

        /* --- 3. 对齐方式 --- */
        text-align: left;     /* left左对齐, center居中 */
        
        /* --- 4. 宽度控制 --- */
        width: 100%;          /* 手机上强制占满整行宽度 */
    }

    /* 如果有多段文字，控制段落间距 */
    .left-custom-note p {
        margin-bottom: 10px;  /* 每一段下面的间距 */
    }
    

    /* 4. 画廊容器 */
    .project-gallery {
        padding-left: 8px !important; 
        padding-right: 8px !important;
        box-sizing: border-box;
    }

    /* 5. 网格布局：3列 */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px 5px !important; 
    }

    /* 6. 图片单元格：正方形 */
    .gallery-item {
        width: 100%;
        aspect-ratio: 1 / 1 !important;
        height: auto !important; 
    }

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