/* ============================================================================
   PAGE: PORTFOLIO (配置驱动版)
   ============================================================================ */

/* --- 1. 视图切换与全局设定 --- */
.portfolio-main {
    position: relative;
    min-height: 100vh;
}

.portfolio-view {
    display: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.portfolio-view.is-active {
    display: block;
    opacity: 1;
    animation: portfolioFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* --- 2. 作品集目录页首 --- */
.section-portfolio {
    position: relative;
    width: 100%;
    min-height: calc(var(--space-sm) + 2 * var(--text-3xl));
    margin-bottom: 0;
}

.section-portfolio__title {
    position: absolute;
    top: var(--trigger-offset, 24px);
    right: calc(var(--trigger-size, 50px) + var(--trigger-offset, 24px) + var(--space-md));
    font-family: var(--font-heading);
    font-weight: var(--weight-black);
    font-size: var(--text-2xl);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-text-main);
    text-align: right;
    margin: 0;
    z-index: 10;
}

.section-portfolio__subtitle {
    position: absolute;
    top: calc(var(--trigger-offset, 24px) + var(--text-2xl) + 8px);
    right: calc(var(--trigger-size, 50px) + var(--trigger-offset, 24px) + var(--space-md));
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-align: right;
    z-index: 10;
}

/* --- 3. 极简项目列表 --- */
.portfolio-list {
    max-width: var(--container-lg);
    margin: calc(var(--space-2xl) * 2) auto var(--space-xl);
    padding: 0 var(--space-md);
    position: relative;
    z-index: 5;
}

.index-item {
    display: flex;
    align-items: baseline;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.index-item:hover {
    transform: translateX(20px);
    border-bottom-color: var(--color-text-muted);
}

.index-item__year {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    width: 80px;
    flex-shrink: 0;
}

.index-item__title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-light);
    color: var(--color-text-muted);
    transition: color 0.4s ease;
    margin: 0;
}

.index-item:hover .index-item__title {
    color: var(--color-text-main);
}

/* 🚀 动态预览背景层（支持平滑的暗黑滤镜动画） */
.portfolio-preview-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.8s ease, filter 0.8s ease;
}

/* 🚀 全局反相魔法：只要加上 invert-on-dark 的元素，在暗黑模式下就会完美反相 */
body.theme-dark .invert-on-dark {
    filter: invert(1) hue-rotate(180deg);
}

/* --- 4. 沉浸模式冲突保护 --- */
body.viewer-is-open .brand-logo,
body.viewer-is-open .menu-trigger,
body.viewer-is-open .section-portfolio {
    display: none !important;
}

.viewer-nav {
    position: sticky;
    top: 0;
    padding: var(--space-md) var(--space-lg) var(--space-xl) var(--space-lg);
    background: linear-gradient(to bottom, var(--color-bg-body) 60%, transparent);
    z-index: 9999;
}

.viewer-btn-back {
    background: transparent;
    border: none;
    color: var(--color-text-main);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 10px 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.viewer-btn-back:hover {
    opacity: 0.7;
    transform: translateX(-5px);
}

/* --- 5. 沉浸式图纸阅读器 (Data-Driven Layout) --- */
#portfolio-viewer {
    background-color: var(--color-bg-body);
    min-height: 100vh;
}

.viewer-content {
    width: 100%;
    padding-bottom: var(--space-2xl);
    position: relative;
    overflow-x: hidden;
}

/* 数据注入的悬浮标题 */
.pj-custom-header {
    position: absolute;
    top: var(--pj-title-top, 10vh);
    left: var(--pj-title-left, 5vw);
    z-index: 10;
    pointer-events: none;
}

.pj-custom-title {
    font-family: var(--pj-title-font, var(--font-heading));
    font-size: var(--pj-title-size, var(--text-3xl));
    color: var(--pj-title-color, var(--color-text-main));
    line-height: 0.9;
    margin: 0 0 var(--space-xs) 0;
    letter-spacing: var(--tracking-tight);
}

.pj-custom-subtitle {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin: 0;
}

/* --- 6. 模块化排版核心系统 (Block System) --- */
.pj-blocks {
    padding-top: 40vh; /* 为上方标题留白 */
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    align-items: center;
}

/* 性能优化：内容可见性跳过屏幕外渲染运算 */
.pj-block-img, .pj-block-text, .pj-block-grid {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
    width: 100%;
    max-width: var(--container-lg);
}

/* 文字块：收缩宽度以保证阅读体验 */
.pj-block-text {
    max-width: var(--container-sm);
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--color-text-main);
    line-height: var(--leading-loose);
    padding: 0 var(--space-md);
}

/* 全出血大图：突破容器限制，强行撑满屏幕宽度 */
.pj-block-img.is-full-bleed {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.pj-block-img {
    margin: 0;
}
.pj-block-img img {
    width: 100%;
    height: auto;
    display: block;
}
.pj-block-img figcaption {
    padding: var(--space-sm) var(--space-md) 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: right;
}

/* 网格排版 */
.pj-block-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: 0 var(--space-md);
}

.pj-block-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* --- 内容揭露容器 --- */
.pj-info-reveal {
    position: relative;
    z-index: var(--layer-overlay);
    margin-top: 5vh;
}

/* 占位符：确保滚动条能继续滚动，触发揭露 */
.pj-info-reveal__sticky-spacer {
    height: 2vh;
}

/* --- 浮起的信息面板 --- */
.pj-info-reveal__content {
    /* 核心：固定在底部，但层级最高 */
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* 视觉设计：引用你的 Token */
    background-color: var(--color-bg);
    color: var(--color-text-main);
    padding: var(--space-xl) var(--space-md);
    
    /* 边框（可选）*/
    border-top: 1px solid var(--color-border);
}

.pj-block-img.is-last-sticky {
    position: sticky;
    top: 0;
    height: 100vh; /* 撑满屏幕 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* 较低层级 */
    overflow: hidden;
    margin-bottom: 0; /* 取消默认间距 */
}

/* --- 信息网格排版 --- */
.pj-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    max-width: var(--container-lg);
    margin: 0 auto;
}

@media (min-width: 768px) {
    .pj-info-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pj-info-item label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xs);
    letter-spacing: var(--tracking-wide);
}

.pj-info-item span {
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
}

.theme-toggle {
    transition: top 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                opacity 0.4s ease;
}

/* 3. 当阅读器打开时，切换按钮上移到汉堡菜单的位置 */
body.viewer-is-open .theme-toggle {
    top: var(--trigger-offset, 24px); /* 填补汉堡菜单原本的 top 值 */
}

/* --- 移动端响应式 --- */
@media (max-width: 768px) {
    .index-item { flex-direction: column; gap: var(--space-xs); padding: var(--space-lg) 0; }
    .pj-block-grid { grid-template-columns: 1fr; }
    .pj-blocks { padding-top: 25vh; }
}

@media (max-width: 768px) {
    
    .section-portfolio {
        height: auto;
        padding-top: calc(var(--mobile-sticky-top) + var(--space-lg));
    }

    .section-portfolio__title,
    .section-portfolio__subtitle{
        position: static;
        text-align: left;
        margin-bottom: var(--space-md);
        padding-left: var(--space-md);
        padding-right: 60px;
    }
}