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

/* ----------------------------------------------------------------------------
   1. 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)
   ----------------------------------------------------------------------------
 */

.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, 0px);
  /* [保持不变] 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);
}

/* [背景层] */
.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: background-color 0.6s ease,
              backdrop-filter 0.6s ease,
              border-color 0.6s ease,
              top 0.4s ease,
              height 0.4s ease;
}

/* [状态: 吸顶] */
.gallery-filter.is-stuck::before {
  /* 🚀 核心修改 1：使用变量替代硬编码色值 */
  background-color: var(--color-bg-body-alpha);
  
  /* 现代浏览器策略 */
  @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
    /* 🚀 核心修改 2：暗黑模式下透明度可以稍微调低，质感更好 */
    background-color: var(--color-bg-body-alpha-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  /* 🚀 核心修改 3：边框颜色也变量化 */
  border-bottom: 1px solid var(--color-border);
  
  top: calc(var(--mobile-sticky-top) * -1);
  height: calc(100% + var(--mobile-sticky-top));
}

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


/* ----------------------------------------------------------------------------
   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%;
          /* 🚀 核心修改 4：同步桌面端背景 */
          background-color: var(--color-bg-body-alpha);
          border-bottom: 1px solid var(--color-border);
      }

    /* 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;
        
        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;
    }
}