/* Page-specific styles extracted from Photos.html. */
/* =========================
       Photos page (scoped)
       ========================= */

    main.photos-page{
      width: 1300px;
      margin: 0 auto;
      padding: 28px 0 64px;

      --surface: var(--surface);
      --text: var(--text);
      --muted: var(--muted);
      --border: rgba(0,0,0,0.08);
      --shadow: 0px 10px 30px rgba(0,0,0,0.04); /* 【升级】更高级柔和的阴影 */

      --radius: 16px; /* 【升级】统一大圆角 */
      --gap: 24px;    /* 【升级】拉开图片间距呼吸感 */

      --h1: 26px;
      --h2: 20px;
      --p: 14px;
      --lh: 1.6;
    }

    /* Overall layout */
    main.photos-page .layout{
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px; /* 稍微加宽侧边栏 */
      gap: 30px;
      align-items: start;
    }

    /* Header */
    main.photos-page .hero-top{
      padding-bottom: 12px;
      border-bottom: 2px solid rgba(0,0,0,0.04);
      margin-bottom: 20px;
    }
    main.photos-page h1{
      margin:0;
      font-size: var(--h1);
      letter-spacing: 0.2px;
      color: var(--primary);
      font-family: var(--font-heading);
    }
    main.photos-page .sub{
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: var(--lh);
    }

    /* Section wrapper */
    main.photos-page .section{
      margin-bottom: 30px;
    }
    main.photos-page .section-head{
      display:flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      padding-bottom: 10px;
      margin-bottom: 15px;
      border-bottom: 2.5px solid rgba(253,184,55,0.8);
    }
    main.photos-page h2{
      margin:0;
      font-size: var(--h2);
      letter-spacing: 0.5px;
      color: var(--primary-600);
      font-family: var(--font-heading);
      font-weight: 800;
    }
    main.photos-page .sec-note{
      font-size: 13px;
      color: var(--muted);
      font-weight: 600;
      white-space: nowrap;
    }

    /* Grid */
    main.photos-page .grid{
      display: grid;
      gap: var(--gap);
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 8px 0 12px;
    }

    /* =========================================
       【核心升级 1】画廊级卡片 (4:3 完美比例 & 悬浮特效)
       ========================================= */
    main.photos-page .photo{
      min-width: 0; 
      background: #fff;
      border: 1px solid rgba(0,0,0,0.03);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      cursor: zoom-in; /* 提示可点击放大 */
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, opacity 0.4s ease;
    }
    main.photos-page .photo:hover{
      transform: translateY(-6px); /* 悬浮上浮 */
      box-shadow: 0 18px 40px rgba(0,0,0,0.08); /* 加深阴影 */
    }

    /* 图片容器强制 4:3 比例 */
    main.photos-page .media{
      background: rgba(0,0,0,0.02);
      aspect-ratio: 4 / 3; /* 黄金比例锁死，绝对整齐 */
      overflow: hidden;
    }
    main.photos-page .media img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover; /* 保证铺满不拉伸 */
      transition: transform 0.6s ease; /* 图片内部微缩放动画 */
    }
    main.photos-page .photo:hover .media img {
      transform: scale(1.05); /* 鼠标悬停，图片轻微放大 */
    }

    /* 预留说明文字空间 */
    main.photos-page .cap{
      margin: 0;
      padding: 12px 16px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--muted);
      word-break: break-word;
    }

    /* =========================================
       【核心升级 3】侧边栏 (玻璃拟态 Glassmorphism)
       ========================================= */
    main.photos-page .toolbar{
      position: sticky;
      top: 30px;
      border-radius: 16px;
      padding: 15px;
      background: rgba(255,255,255,0.6); /* 降低透明度 */
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.8); /* 边缘高光 */
      box-shadow: 0 10px 40px rgba(0,0,0,0.05); /* 弥散阴影托底 */
    }
    main.photos-page .toolbar h3{
      margin: 6px 8px 12px;
      font-size: 14px;
      font-weight: 900;
      color: var(--primary-600);
      letter-spacing: 0.5px;
      font-family: var(--font-heading);
    }
    main.photos-page .tool{
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    main.photos-page .toolbar a{
      display:block;
      padding: 10px 14px;
      border-radius: 10px;
      text-decoration: none;
      color: #555;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
    }
    main.photos-page .toolbar a:hover{
      background: rgba(146,7,28,0.04);
      color: var(--primary-600);
      transform: translateX(4px); /* 悬停微动 */
    }
    /* 当前选中的分类高亮 */
    main.photos-page .toolbar a.is-active {
      background: rgba(146,7,28,0.08); /* 极浅酒红背景 */
      color: var(--primary);          /* 主题色 */
      font-weight: 900;               /* 加黑加粗 */
    }

    /* =========================================
       【核心动画】过滤动画控制类
       ========================================= */
    .photo.is-hiding {
      opacity: 0 !important;
      transform: scale(0.9) !important;
      pointer-events: none;
    }
    .photo.is-hidden {
      display: none !important;
    }

    /* =========================================
       【核心升级 2】全屏灯箱 (Lightbox)
       ========================================= */
    #lightbox {
      position: fixed;
      top: 0; left: 0; width: 100vw; height: 100vh;
      background: rgba(0, 0, 0, 0.85); /* 深色磨砂背景 */
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    #lightbox.is-active {
      opacity: 1;
      pointer-events: auto;
    }
    #lightbox img {
      max-width: 90%;
      max-height: 90%;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      transform: scale(0.9);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      object-fit: contain; /* 保证原图无损比例展示 */
    }
    #lightbox.is-active img {
      transform: scale(1);
    }
    .lightbox-close {
      position: absolute;
      top: 30px;
      right: 40px;
      font-size: 45px;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
      transition: color 0.2s ease, transform 0.2s ease;
      line-height: 1;
    }
    .lightbox-close:hover {
      color: #fff;
      transform: scale(1.1);
    }

    /* Responsive */
    @media (max-width: 1400px){
      main.photos-page{ width: min(1300px, 92vw); }
    }
    @media (max-width: 1100px){
      main.photos-page .layout{ grid-template-columns: minmax(0,1fr) 190px; }
      main.photos-page .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 900px){
      main.photos-page .layout{ grid-template-columns: 1fr; }
      main.photos-page .toolbar{ position: relative; top: 0; margin-bottom: 20px; }
      main.photos-page .grid{ grid-template-columns: 1fr; }
    }