/* ============================
   Project 页面布局 (顶部筛选栏版)
   ============================ */

.page-project {
    margin-top: var(--nav-height);
    min-height: 100vh;
}

.project-container {  
    width: 100%;   /* 确保和导航栏一样铺满屏幕 */
    max-width: none;
    /* 布局属性 */
    display: block;
    margin: 0 auto;
    padding: 10px var(--page-gap);  /* 上下保持 60px，左右改为 var(--page-gap) */
    box-sizing: border-box;  /* 确保 padding 算在宽度内，不会撑出横向滚动条 */
}

/* --- 1. 顶部筛选栏 (Filter Bar) --- */
.project-filter-bar {
    display: flex;
    justify-content: center; /* 让中间的分类菜单居中 */
    align-items: center; /* 垂直对齐 */
    margin-bottom: 30px; /* 距离下方网格的距离 */
    padding-bottom: 20px;
    /* 吸顶逻辑 (Sticky) */
    position: sticky; /* 开启吸顶 */
    /* 这里的 top 必须等于导航栏高度，否则会被导航栏挡住 */
    top: var(--nav-height); 
    z-index: 900; /* 层级要比下面的图片高，但比导航栏(1000)低 */
    
    /* 背景与外观 */
    background-color: var(--bg-color); /*  必须加背景色，否则滚动时文字会重叠 */
    margin-bottom: 10px;    /*  控制【筛选栏整体】距离下面图片网格的距离 */
    padding-top: 10px;    /*  控制【文字上方】的留白 */
    padding-bottom: 10px;     /*  控制【文字下方】的留白 */
    /* border-bottom: 1px solid #eee;  <-- 如果想要一条底线分隔，可以取消注释 */
}

/* 左侧：分类菜单 (All, Architecture...) */
/* 中文版 */
.category-menu {
    list-style: none;
    display: flex;
    /* 中文间距控制 */
    gap: 57px; 
    padding: 0; 
    margin: 0;
}
/* 英文版 */
/* 只要 body 标签上有 class="lang-en"，就会执行 */
body.lang-en .category-menu {
    /* 英文间距*/
    gap: 40px; 
}

/* 左侧：分类菜单 (默认状态) */
.category-menu li {
    padding: 10px 20px;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 18px; 
    
    /* 字体设置：Raleway + Noto */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    
    /* 默认粗细：Regular 400 */
    font-weight: 300;
    
    color: #000; /* 纯黑 */
    text-transform: capitalize;
    text-decoration: none; /* 去掉下划线，完全靠粗细区分 */
    
    /* 过渡效果：平滑改变粗细 */
    transition: font-weight 0.2s ease;
}

/* 修正第一个选项的左边距 (保持不变) */
.category-menu li:first-child {
    padding-left: 0;
}

/* 悬停 (Hover) 和 选中 (Active) 状态 */
.category-menu li:hover {
    font-weight: 400;
    color: #000;
    /* 如果要悬停时也出现下划线，把下面这行注释解开 */
    /* text-decoration: underline; text-underline-offset: 5px; */
}

/* 鼠标放上去，或者被选中时，都变成 600 */
.category-menu li.active {
    font-weight: 500; 
    color: #000;
    /* 下划线 */
    text-decoration: underline;
    text-underline-offset: 5px; /* 下划线和文字之间空隙*/
}

/* 右侧：状态下拉菜单容器 */
.status-dropdown-wrapper {
    /* 强制固定在最右侧，不干扰中间居中 */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    z-index: 100; 
}

/* 下拉菜单样式 (保持不变) */
.filter-dropdown {
    position: relative;
    cursor: pointer;
}

/* 1. 下拉菜单触发按钮 (显示"状态"或"Status"的地方) */
.dd-trigger {
    font-size: 14px;
    
    /* 修改：Raleway + Noto Sans SC */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    
    font-weight: 400; 
    text-transform: capitalize;
    color: #000; /* 纯黑 */
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.dd-options {
    position: absolute;
    top: 100%;
    right: 0; /* 靠右对齐 */
    margin-top: 10px;
    background-color: #fff;
    min-width: 120px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 10px 0;
    
    display: none;
    flex-direction: column;
}

.dd-options.show {
    display: flex;
}

/* 2. 下拉菜单里的选项 (All, Completed...) */
.dd-options button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    
    /* 修改：Raleway + Noto Sans SC */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    
    color: #000; /* 确保选项也是黑色 */
    padding: 8px 20px;
    width: 100%;
    text-transform: capitalize;
    text-align: left;
    
    /* 加上粗细过渡，看起来更高级 */
    font-weight: 400; 
    transition: background-color 0.2s, font-weight 0.2s;
}

/* 悬停或选中状态 */
.dd-options button:hover,
.dd-options button.active {
    background-color: #f9f9f9;
    font-weight: 600; /* 选中变粗 */
    color: #000;
}

/* --- 2. 网格布局 (3列宽幅 19:6) --- */
.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    column-gap: 30px; 
    row-gap: 60px;    
}

.work-item {
    position: relative;
    width: 100%;
    height: auto;
    background: transparent;
    border-bottom: 0.5px solid #ccc; 
    padding-bottom: 20px;
    animation: fadeIn 0.5s ease;
}

.work-item a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
    color: inherit;
}

.work-img {
    width: 100%;
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    background-color: #f0f0f0;
}

.work-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.work-item:hover .work-img img {
    transform: scale(1.03);
}

.work-info {
    position: relative; 
    padding: 15px 0 0 0;
    color: var(--primary-color);
    text-align: left;
}

.work-info h3 {
    font-size: 15px;
    margin-bottom: 5px;
    text-transform: capitalize;
    letter-spacing: 1px;
    
    /* 字体+字重500+纯黑 */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 500;
    color: #000;
}

.work-info p {
    font-size: 12px;
    
    /* 字体+字重300+纯黑 */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 300;
    color: #000;
}

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

/* --- 移动端适配  --- */
@media screen and (max-width: 768px) {
    
    /* 1. 手机端筛选栏：保持吸顶，但改为上下排列 */
    .project-filter-bar {
        position: sticky;
        top: 70px; /* 手机导航栏高度通常较小 */
        
        flex-direction: column; /* 上下排列 */
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        
        /* 手机端不需要绝对定位的右侧，因为空间不够 */
    }

    .project-container {
        display: block; /* 改为块级 */
        
        /* =========== 页面整体留白 =========== */
        /* 上下 15px，左右 10px */
        padding: 15px 10px; 
        
        box-sizing: border-box;
    }

     /* =========================================
       1. 默认样式 (中文版)：单行滑动
       ========================================= */
    .category-menu {
        display: flex;       
        width: 100%;      
        overflow-x: auto;    
        padding: 0;
        margin: 0;
        gap: 0;     
        border-bottom: none !important; 
    }
    
    /* 未选中状态：300 */
    .category-menu li {
        flex: 1;             
        text-align: center;
        font-size: 15px; 
        padding: 12px 0;
        white-space: nowrap; 
        
        font-family: 'Raleway', 'Noto Sans SC', sans-serif;
        font-weight: 300; /* Light */
        color: #000;
        transition: font-weight 0.2s ease; /* 加一个过渡，点击时变粗会有动画 */
    }

    /* 选中状态：500 */
    .category-menu li.active {
        border-left: none;
        background: none;
        border-bottom: 2px solid #000; 
        text-decoration: none; 
        
        font-weight: 500; /* Medium */
    }

    /* =========================================
       2. 英文版 (body.lang-en)：两行三列
       ========================================= */
     body.lang-en .category-menu {
        /* 1. 强制改回 Flex 布局 */
        display: flex !important;
        width: 100%;
        overflow-x: auto;
        
        /* 2. 清除之前的 Grid 属性 */
        grid-template-columns: none !important;
        gap: 0 !important;
        margin-bottom: 0;
        
        /* 隐藏滚动条 */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    body.lang-en .category-menu::-webkit-scrollbar {
        display: none;
    }

    body.lang-en .category-menu li {
        /* 核心：flex: 1 表示大家平分宽度 (和中文一样) */
        flex: 1 !important;  
        width: auto !important;
        
        /* 恢复默认内边距 */
        padding: 12px 0 !important; 
        
        text-align: center;
        white-space: nowrap;
        
        /* 字体设置 */
        font-family: 'Raleway', sans-serif;
        font-weight: 300; 
        font-size: 13px; /* 英文如果还觉得挤，可以微调这个字号 */
        border-bottom: none;
    }
    
    /* 选中状态 */
    body.lang-en .category-menu li.active {
        font-weight: 500; 
        border-bottom: 2px solid #000; 
    }
    
     /* 重置右侧下拉框的位置 */
    .status-dropdown-wrapper {
        position: static; /* 取消绝对定位，回归正常文档流 */
        transform: none;  /* 取消位移 */
        width: 100%;
        display: flex;
        justify-content: flex-end; /* 靠右对齐 */
        padding-right: 10px; 
    }
    
    .dd-trigger {
        font-family: 'Raleway', 'Noto Sans SC', sans-serif;
        font-weight: 500;
    }

    /* 列表容器 */
    .works-grid {
        display: block; /* 取消 Grid，方便控制间距 */
        /* grid-template-columns: 1fr; (删除) */
        /* row-gap: 25px; (删除，改用下面的 margin-bottom) */
    }

     /* 单个项目 (控制项目之间的距离) */
    .work-item {
        position: relative;
        width: 100%;
        border-bottom: none; /* 去掉底部分割线，更干净 */
        padding-bottom: 0;   
        
        /* =========== 项目之间的垂直间距 =========== */
        margin-bottom: 20px; 
    }
    
    .work-item a {
        display: block;
        width: 100%;
        text-decoration: none;
        color: inherit;
    }

    /* 文字区域 (控制文字框的留白) */
    .work-info {
        /* 强制清除 PC 端继承下来的顶部内边距 */
        padding-top: 0 !important; 
        /* =========== 文字框的外间距 (上-右-下-左) =========== */
        /* 如果希望文字和图片左侧对齐，确保这里的 margin-left 和上面的 margin-left 一致 */
        margin-top:    0px;
        margin-right:  0px;
        margin-bottom: 0px;
        margin-left:   0px; 

        /* =========== 文字框的内补白 (可选) =========== */
        /* 如果想让文字比图片稍微往里缩一点，可以加 padding-left */
        padding-left:  0px;  
        padding-right: 0px;
    }
    
    /* 图片区域 (控制图片的留白) */
    .work-img {
        width: 100%;
        aspect-ratio: 16 / 9; 
        background-color: #f0f0f0;

        /* =========== 图片的留白 (上-右-下-左) =========== */
        margin-top:    0px;
        margin-right:  0px;
        margin-bottom: 5px; /* 图片距离下方文字的距离 */
        margin-left:   0px;  /* 图片缩进，增加这里 */
    }
    
    /* 6. 标题 (Grid Coffee...) */
    .work-info h3 {
        font-size: 15px;
        font-family: 'Raleway', 'Noto Sans SC', sans-serif;
        font-weight: 400; 
        color: #000;
        line-height: 1.4;

        /* =========== 标题独立间距 (上-右-下-左) =========== */
        margin-top:    0px;   /* 距离上方图片的距离 */
        margin-right:  0px;
        margin-bottom: 5px;   /* 距离下方地址的距离 */
        margin-left:   0px;   /* 标题缩进调这个 */
    }
    
    /* 7. 地址/副标题 (Retail / ChengDu...) */
    .work-info p {
        font-size: 12px;
        font-family: 'Raleway', 'Noto Sans SC', sans-serif;
        font-weight: 300;
        color: #000;

        /* =========== 地址独立间距 (上-右-下-左) =========== */
        margin-top:    0px;   /* 额外增加距离上方标题的距离 */
        margin-right:  0px;
        margin-bottom: 0px;
        margin-left:   0px;   /* 想地址缩进调这个 */
    }
}