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

/* ----------------------------------------------------------------------------
   1. VARIABLES & CALCULATIONS
   ----------------------------------------------------------------------------
*/
.section-photograph,
.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-photograph {
  position: relative;
  width: 100%;
  
  /* 桌面端基础高度，确保标题不和下面重叠 */
  min-height: calc(var(--space-sm) + 2 * var(--text-3xl));
  margin-bottom: 0;
}

.section-photograph__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;
}


/* ----------------------------------------------------------------------------
   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%;
  
  /* [保持不变] 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. GRID ANIMATION
   ----------------------------------------------------------------------------
*/
.gallery-card {
  animation: fadeIn 0.6s ease forwards;
}

.gallery-card.is-hidden {
  display: none;
}

@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-photograph,
  .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-photograph {
    height: auto;
    /* 给标题留出空间。
      计算逻辑：Sticky高度 + 额外留白
    */
    padding-top: calc(var(--mobile-sticky-top) + var(--space-lg));
  }
  
  .section-photograph__title {
    position: static;
    text-align: left;
    margin-bottom: var(--space-md);
    padding-left: var(--space-md);
    padding-right: 60px;
  }
}