/* ============================================================================
   PAGE: portfolioY
   Description: 摄影页面专用样式 (Header Layout + Sticky Filter Context)
   Dependencies: design-tokens.css
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. VARIABLES & CALCULATIONS
   ----------------------------------------------------------------------------
*/
.section-portfolio,
.gallery-context {
  /* [移动端吸附高度计算]
     公式 = Logo顶部偏移 + Logo尺寸 + 额外呼吸空间
     例如: 24px + 50px + 24px = 98px
  */
  --mobile-sticky-top: calc(var(--trigger-offset, 24px) + var(--trigger-size, 50px) + var(--space-md));
  
  /* [桌面端吸附高度]
     桌面端 Header 和 Filter 分离，吸顶位置为浏览器顶部
  */
  --desktop-sticky-top: 0px;
  
  /* [Right Calc] 右侧安全区计算 (NEW)
       公式 = 菜单触发器尺寸 + 触发器偏移 + 呼吸间距
       这确保 Filter 的右边缘与页面标题 (Title) 的右对齐线一致，
       避开右上角的 Menu 按钮区域。
  */

  --desktop-right-gutter: calc(var(--trigger-size) + var(--trigger-offset) + var(--space-md));
}


/* ----------------------------------------------------------------------------
   2. PAGE HEADER
   ----------------------------------------------------------------------------
*/
.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;
  
  /* 确保标题位于基础层之上，但在 Sticky 之下 */
  z-index: 10;
}

.section-portfolio__subtitle{
    position: absolute;
    top: calc(var(--trigger-offset, 24px) + var(--text-2xl));
    right: calc(var(--trigger-size, 50px) + var(--trigger-offset, 24px) + var(--space-md));
    
    font-family: var(--font-heading);
    font-weight: var(--weight-light);
    font-size: var(--text-xl);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-text-main);
    text-align: right;
    margin: 0;
    
    padding-top: var(--space-xs);
    
    /* 确保标题位于基础层之上，但在 Sticky 之下 */
    z-index: 10;
}


/* ----------------------------------------------------------------------------
   3. GALLERY CONTEXT (Sticky Logic Core)
   [Architecture Change]
   不再使用单纯的 Container，而是使用 Context 包裹 Filter + Grid。
   ----------------------------------------------------------------------------
*/
.gallery-context {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

/* [哨兵] 负责监测滚动位置 */
.sticky-sentinel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
  
  /* 哨兵向上探测，与 Filter 的吸附位置形成对冲 */
  top: calc(var(--mobile-sticky-top) * -1);
  z-index: -1;
}

/* [外壳] 负责 Sticky 定位与层级 */
.gallery-filter {
  position: sticky;
  width: 100%;
  
  /* [保持不变] 吸附阈值 */
  top: var(--mobile-sticky-top);
  
  /* [保持不变] Z-Index */
  z-index: var(--layer-sticky);
  
  /* 视觉复位 */
  background: transparent;
  transition: top 0.3s ease;

  /* [新增] 初始位置下移
     使用 margin-top 给标题和过滤器之间增加呼吸感。
     建议使用 --space-md (约24px-32px) 或 --space-lg (约48px-64px)。
  */
  margin-top: var(--space-xl);

  /* [保持不变] 这里的 margin-bottom 负责推开下面的 Grid */
  margin-bottom: var(--space-xl);
}

/* [网格容器包装]
   位于 Context 内部，负责撑开 Context 的高度
   (对应 HTML 中的 .gallery-grid-wrapper)
*/
.gallery-grid-wrapper {
  position: relative;
  z-index: var(--layer-base);
}


/* ----------------------------------------------------------------------------
   4. VISUAL LAYER (Background & Buttons)
   ----------------------------------------------------------------------------
*/

/* [背景层] */
.gallery-filter::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  
  background-color: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  
  transition: all 0.4s ease;
}

/* [状态: 吸顶] */
.gallery-filter.is-stuck::before {
  /* 1. 回退策略：针对不支持 backdrop-filter 的浏览器 */
  background-color: rgba(255, 255, 255, 0.95);
  
  /* 2. 现代浏览器策略 */
  @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  border-bottom: 1px solid rgba(0,0,0,0.05);
  
  /* 移动端特殊逻辑：背景向上生长填补空隙 */
  top: calc(var(--mobile-sticky-top) * -1);
  height: calc(100% + var(--mobile-sticky-top));
}


/* ============================================================================
   5. LAYOUT OVERRIDE: LIST VIEW (ARCHIVE STYLE)
   Description: 将原本的 Grid 卡片强制转换为纵向列表索引样式
   ============================================================================ */

/* 1. 重置网格容器为弹性纵向列 */
.gallery-grid {
    margin-top: var(--space-md);
  display: flex !important; /* 强制覆盖 grid 布局 */
  flex-direction: column;
  gap: 0 !important; /* 移除网格间隙，改用边框分割 */
  width: 100%;
  max-width: 100%; /* 确保占满容器 */
}

/* 2. 卡片变为“行” */
.gallery-card {
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 细致的分割线 */
  transition: border-color 0.3s ease;
}

/* 最后一个元素去掉底边框 (可选) */
.gallery-card:last-child {
  border-bottom: none;
}

/* 3. 链接变为横向布局容器 */
.gallery-card__link {
  display: flex;
  justify-content: space-between; /* 左右分布：标题在左，类别在右 */
  align-items: baseline; /* 文字基线对齐 */
  padding: 24px 0; /* 上下的呼吸空间 */
  text-decoration: none;
  width: 100%;
  group: hover; /* 用于后续 hover 效果 */
}

/* 4. 信息区域重置 */
.gallery-card__info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  align-items: baseline;
}

/* 移动端适配：如果屏幕太小，可能需要折行，或者保持紧凑 */
@media (max-width: 768px) {
  .gallery-card__info {
    flex-direction: column; /* 手机上垂直排列 */
    gap: 8px;
  }
}

/* 5. 标题样式：加大，类似索引 */
.gallery-card__title {
  font-family: var(--font-heading);
  font-size: 2rem; /* 比较大的字号，强调项目名 */
  font-weight: 400; /* 不需要太粗，保持优雅 */
  margin: 0;
  color: var(--color-text-main);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 6. 类别样式：变小，作为元数据 */
.gallery-card__category {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-light, #888); /* 灰色文字 */
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ----------------------------------------------------------------------------
   HOVER INTERACTIONS (交互反馈)
   ----------------------------------------------------------------------------
*/

/* 鼠标悬停时，整行的分割线变黑 */
.gallery-card:hover {
  border-bottom-color: var(--color-text-main);
}

/* 鼠标悬停时，标题向右轻微移动，类似翻阅目录 */
.gallery-card:hover .gallery-card__title {
  transform: translateX(10px);
  /* 可选：加粗或变色 */
  /* color: var(--color-primary); */
}

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


/* ============================================================================
   6. DESKTOP OVERRIDES (min-width: 769px)
   ============================================================================ */
@media (min-width: 769px) {

  /* 1. 变量定义：计算两种状态下的间距 */
  .section-portfolio,
  .gallery-context {
    
    /* [STATE A: NORMAL] 居中模拟
       计算出的 Padding 会让左右元素看起来分别对齐网格的左右边缘。
    */
    --scope-center-padding: max(var(--space-md), calc((100vw - var(--container-lg)) / 2));
    
    /* [STATE B: STUCK] 避让模式
       左侧 Padding = Sidebar 宽度 + 间距
       右侧 Padding = Menu 按钮区域宽度
    */
    --layout-sidebar-width: clamp(380px, 35vw, 500px);
    
    --scope-avoid-left: calc(var(--layout-sidebar-width) + var(--space-md));
    --scope-avoid-right: var(--desktop-right-gutter);
  }

  /* 2. 基础复位 */
  .sticky-sentinel {
      top: -100px;
    }
  
  .gallery-filter { top: var(--desktop-sticky-top); }
  
  .gallery-filter.is-stuck::before {
    top: 0;
    height: 100%;
    /* 既然分离了，我们可以给背景加更细腻的效果 */
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  /* 3. 布局容器逻辑 */
  .ui-scope-bar__layout {
    /* 默认状态：注入居中变量 */
    --scope-safe-left: var(--scope-center-padding);
    --scope-safe-right: var(--scope-center-padding);
  }

  /* 4. 吸顶状态切换 */
  .gallery-filter.is-stuck .ui-scope-bar__layout {
    /* 吸顶状态：注入避让变量 */
    --scope-safe-left: var(--scope-avoid-left);
    --scope-safe-right: var(--scope-avoid-right);
  }
}

/* ----------------------------------------------------------------------------
   7. MOBILE HEADER ADJUSTMENTS (max-width: 768px)
   ----------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .section-portfolio {
    height: auto;
    /* 给标题留出空间。
      计算逻辑：Sticky高度 + 额外留白
    */
    padding-top: calc(var(--mobile-sticky-top) + var(--space-lg));
  }
  
  .section-portfolio__title {
    position: static;
    text-align: left;
    margin-bottom: var(--space-md);
    padding-left: var(--space-md);
    padding-right: 60px;
  }
  
  .section-portfolio__subtitle {
    position: static;
    text-align: left;
    margin-bottom: var(--space-md);
    padding-left: var(--space-md);
    padding-right: 60px;
  }
}