/* ==================== All Projects 页面样式 ==================== */
/* 与一级页面保持一致的缩放逻辑：纯 rem 定位，不使用响应式断点 */
:root {
    --project-card-width: calc(17.5rem); /* 280px */
    --project-card-image-height: calc(11.75rem); /* 188px */
    --grid-gap: calc(1.875rem); /* 30px */
    /* 一行五个卡片的总宽度：5 * 17.5rem + 4 * 1.875rem = 95rem */
    --grid-total-width: calc(5 * var(--project-card-width) + 4 * var(--grid-gap));
    /* 单个卡片+间距的步进距离 */
    --card-step: calc(var(--project-card-width) + var(--grid-gap)); /* 19.375rem */
}

.project-all-page {
    background: var(--bg-white);
    position: relative;
    width: 100%;
    min-height: calc(67.5rem); /* 最小高度与设计稿一致 */
    overflow-x: hidden;
    overflow-y: auto;
}

/* 确保 html 和 body 允许滚动 */
html:has(.project-all-page),
body:has(.project-all-page) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
}

/* ==================== 顶部导航 ==================== */
/* 与 product-detail.css 保持一致的顶栏风格 */
.product-header {
    position: fixed;
    top: calc(3.125rem);
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background-color: #FFFFFF;
    height: calc(1.5rem);
    padding: 0 calc(3.125rem);
    pointer-events: auto;
}

/* 顶栏上方遮挡层 - 确保滚动内容不会在顶栏上方显示 */
.product-header:before {
    content: '';
    position: absolute;
    top: calc(-3.125rem);
    left: 0;
    right: 0;
    height: calc(3.125rem);
    background-color: #FFFFFF;
    z-index: -1;
}

.header-left {
    display: flex;
    align-items: center;
}

/* 面包屑导航 */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: calc(0.5rem);
    font-family: var(--font-family);
    font-size: calc(1rem);
    line-height: calc(1.6rem);
}

.breadcrumb-item {
    color: var(--primary-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item:hover {
    color: var(--primary-black);
}

.breadcrumb-item.current {
    color: var(--primary-black);
}

.breadcrumb-separator {
    color: var(--primary-gray);
    font-size: calc(0.875rem);
}

/* 右侧按钮组 */
.header-right {
    display: flex;
    align-items: center;
    gap: calc(1.25rem); /* 20px */
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-black);
    transition: opacity 0.3s ease;
}

.icon-btn:hover {
    opacity: 0.6;
}

.shop-link {
    /* 纯图标模式 */
    display: inline-block;
    width: calc(1.25rem); /* 24px */
    height: calc(1.25rem); /* 24px */
    padding: 0 !important;
    background: none;
    border: none;
}

/* 隐藏所有文字 */
.shop-link span {
    display: none;
}

/* 图片填满容器 */
.shop-link img {
    width: 100%;
    height: 100%;
    display: block;
    filter: none; /* 保持原色 */
}

.shop-link:hover {
    opacity: 0.8;
}

/* ==================== 主内容区域 ==================== */
/* 使用纯 rem 定位，与一级页面保持一致的缩放逻辑 */
.main-content {
    position: relative;
    width: 100%;
    min-height: calc(67.5rem - 4.625rem); /* 减去顶部导航高度（3.125rem + 1.5rem） */
    display: flex;
    padding-top: calc(4.625rem); /* 给顶部导航留空间（3.125rem + 1.5rem） */
    max-width: calc(120rem); /* 1920px */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* 左侧空白区域 - 让内容区居中 */
/* 120rem(1920px) - 95rem(五个卡片) = 25rem，左右各 12.5rem */
.left-spacer {
    flex: 0 0 calc(12.5rem);
    min-width: calc(12.5rem);
}

/* 右侧内容区域 */
.right-content {
    flex: 0 0 var(--grid-total-width); /* 固定为五个卡片的宽度 */
    width: var(--grid-total-width);
    display: flex;
    flex-direction: column;
    /* 垂直方向：顶部留一定空间 */
    padding-top: calc(6rem);
    padding-bottom: calc(5rem);
}

/* ==================== 页面标题与筛选栏 ==================== */
.page-header {
    display: flex;
    align-items: flex-end; /* 底部对齐 */
    justify-content: flex-start;
    margin-bottom: calc(2rem);
    position: relative;
    z-index: 50;
    width: 100%;
}

.page-title {
    font-family: var(--font-family);
    font-size: calc(3rem); /* 48px */
    line-height: calc(3.5rem); /* 56px */
    letter-spacing: calc(0.12rem);
    text-transform: uppercase;
    color: var(--primary-black);
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

/* ==================== 筛选栏 ==================== */
/* 筛选栏使用绝对定位，精确对齐第3-5个卡片 */
.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    position: absolute;
    z-index: 60;
    /* 第三个卡片起始位置 = 2 * (cardWidth + gap) = 2 * 19.375rem = 38.75rem */
    left: calc(2 * var(--card-step));
    bottom: 0; /* 底部与标题底部对齐 */
    /* 筛选栏占据第3-5个卡片的宽度 */
    width: calc(3 * var(--project-card-width) + 2 * var(--grid-gap));
}

/* "Filter:" 标签 - 使用绝对定位，右边界与第二个卡片右边界对齐 */
.filter-label {
    font-family: var(--font-family);
    font-size: calc(1rem); /* 12px */
    line-height: calc(1.6rem); /* 20px */
    color: var(--primary-black);
    white-space: nowrap;
    text-align: right;
    position: absolute;
    /* 定位到筛选栏左侧 */
    left: calc(-1 * var(--grid-gap) - 3rem);
    bottom: 0; /* 底部对齐 */
    width: calc(3rem);
}

.filter-item {
    position: relative;
    z-index: 10;
    /* 每个筛选项宽度与卡片宽度一致 */
    width: var(--project-card-width);
    flex-shrink: 0;
}

/* 第一个筛选项（品牌）与第三个卡片对齐 - 在 filter-bar 起始位置 */
.filter-item:nth-child(2) {
    /* 紧跟在起始位置 */
}

/* 第二个筛选项（年份）与第四个卡片对齐 */
.filter-item:nth-child(3) {
    margin-left: var(--grid-gap);
}

/* 第三个筛选项（产品）与第五个卡片对齐 */
.filter-item:nth-child(4) {
    margin-left: var(--grid-gap);
}

.filter-item.open {
    z-index: 100;
}

.filter-dropdown {
    display: flex;
    align-items: center;
    gap: calc(0.5rem);
    padding: calc(0.5rem) 0;
    border-bottom: 1px solid var(--primary-black);
    cursor: pointer;
    width: 100%; /* 填满 filter-item 宽度（即卡片宽度） */
    justify-content: space-between;
    transition: opacity 0.3s ease;
}

.filter-dropdown:hover {
    opacity: 0.7;
}

.filter-name {
    font-family: var(--font-family);
    font-size: calc(1rem);
    line-height: calc(1.6rem);
    color: var(--primary-gray);
    white-space: nowrap;
    flex-shrink: 0;
    width: calc(5rem); /* 固定宽度，适应日文 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-value {
    font-family: var(--font-family);
    font-size: calc(1rem);
    line-height: calc(1.6rem);
    color: var(--primary-black);
    white-space: nowrap;
    flex: 1;
    text-align: right;
    padding-right: calc(0.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-arrow {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.filter-item.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* 下拉菜单 */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: calc(0.25rem);
    box-shadow: 0 calc(0.25rem) calc(0.75rem) rgba(0, 0, 0, 0.1);
    max-height: calc(15rem);
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.filter-item.open .dropdown-menu {
    display: block;
}

.dropdown-option {
    padding: calc(0.625rem) calc(1rem);
    font-family: var(--font-family);
    font-size: calc(0.8rem);
    line-height: calc(1.25rem);
    color: var(--primary-black);
    cursor: pointer;
    transition: background 0.2s ease;
}

.dropdown-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dropdown-option.active {
    background: rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

/* ==================== 项目网格 ==================== */
.projects-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
    width: 100%;
    position: relative;
    z-index: 1;
}

/* 加载状态 */
.loading-message,
.empty-message {
    width: 100%;
    text-align: center;
    font-family: var(--font-family);
    font-size: calc(1rem);
    color: var(--primary-gray);
    padding: calc(5rem) 0;
}

/* ==================== 项目卡片 ==================== */
.project-card {
    width: var(--project-card-width);
    display: flex;
    flex-direction: column;
    gap: calc(0.75rem); /* 12px */
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.project-card:hover {
    transform: translateY(calc(-0.25rem));
}

.project-card-image {
    width: 100%;
    height: var(--project-card-image-height);
    overflow: hidden;
    position: relative;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.project-card:hover .project-card-image img {
    transform: scale(1.05);
}

.project-card-title {
    font-family: var(--font-family);
    font-size: calc(1em); /* 中号字体 */
    line-height: calc(1.6rem);
    color: #000000; /* 黑色 */
    font-weight: 700;
    text-transform: capitalize;
    margin: 0;
}

.project-card-year {
    font-family: var(--font-family);
    font-size: calc(0.8em); /* 小号字体 */
    line-height: calc(1.25rem);
    color: #404040; /* 灰色 */
    font-weight: 400;
    text-transform: capitalize;
}

/* ==================== 动画效果 ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(calc(1.25rem));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.page-title {
    animation: fadeIn 0.6s ease-out both;
}

.filter-bar {
    animation: fadeIn 0.6s ease-out 0.1s both;
}

.project-card {
    animation: fadeInScale 0.5s ease-out both;
}

/* 卡片交错动画 */
.project-card:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2) { animation-delay: 0.15s; }
.project-card:nth-child(3) { animation-delay: 0.2s; }
.project-card:nth-child(4) { animation-delay: 0.25s; }
.project-card:nth-child(5) { animation-delay: 0.3s; }
.project-card:nth-child(6) { animation-delay: 0.35s; }
.project-card:nth-child(7) { animation-delay: 0.4s; }
.project-card:nth-child(8) { animation-delay: 0.45s; }
.project-card:nth-child(9) { animation-delay: 0.5s; }
.project-card:nth-child(10) { animation-delay: 0.55s; }

/* ==================== 响应式设计 ==================== */
/* 与一级页面保持一致：不使用媒体查询断点，完全依赖 rem 等比缩放 */
/* 当视口宽度变化时，html font-size 会按比例调整，所有 rem 值自动等比缩放 */
/* 这样可以避免断点处的布局跳变和元素堆叠问题 */