/* ========== Base ========== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --bg:#0f0d13;
  --card:#141119;
  --line:rgba(255,255,255,.08);
  --muted:rgba(255,255,255,.78);
  --text:#fff;
  --text-hover:#ffe8b3;
}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  color:var(--text);
  background:var(--bg);
}
/* --- Site background (图1作为整站大背景) --- */
/* 请把图1放到 /assets/img/camellia-bg.jpg */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background: url("/assets/img/camellia-bg.jpg") center top / 1200px auto repeat fixed;
  opacity:.18;                /* 想更明显就加大 */
  pointer-events:none;
}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:10;
  background:rgba(15,13,19,.82);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{font-weight:600;letter-spacing:.2px}
.site-nav a{margin-right:18px;color:var(--text);text-decoration:none;opacity:.9}
.site-nav a:hover{opacity:1}
#langToggle{border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--text);
  border-radius:999px;padding:6px 12px;cursor:pointer}

/* Section */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-top:12px}
.muted{opacity:.7;font-size:.95rem}
.h1{font-size:34px;margin:0 0 6px}

/* ========== Cards Grid ========== */
.grid{
  display:grid; gap:16px; margin-top:16px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:1024px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .grid{ grid-template-columns:1fr; } }

.card{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:16px;
  background:rgba(255,255,255,.04);
  aspect-ratio:4/3; min-height:280px;
  transition:transform .2s ease;
}
.card:hover{ transform:translateY(-2px); }

/* 封面层（默认仍可用img） */
.card .card-cover{ position:absolute; inset:0; }
.card .card-cover img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
  filter:brightness(.90);
}
.card:hover .card-cover img{ filter:brightness(1.05); }

/* 文字层 + 颜色 hover */
.card .card-body{
  position:relative; z-index:1; height:100%; padding:18px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.card .eyebrow, .card h3, .card p{ color:var(--text); transition:color .2s ease; }
.card:hover .eyebrow, .card:hover h3, .card:hover p{ color:var(--text-hover); }

/* 整卡可点 */
.card-link{ display:block; height:100%; color:inherit; text-decoration:none; }

/* Bird 专用：用背景图承载在文字下方 */
.card--bg{ position:relative; }
.card--bg .card-cover{ display:none; } /* 关闭<img>封面 */
.card--bg::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: var(--card-bg, none) center/cover no-repeat;
  filter: brightness(.0.9) saturate(.1);
}
.card--bg::after{
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18)); /* 渐变减弱 */
}
.card--bg .card-body{ position:relative; z-index:1; }

/* ========== Project Hero（详情页顶部） ========== */
.project-hero{position:relative;min-height:46vh;display:flex;align-items:flex-end;margin:0 0 24px}
.project-hero::before{
  content:"";position:absolute;inset:0;
  background-position:center 40%;background-size:cover;background-repeat:no-repeat;opacity:.28;
}
.project-hero-inner{position:relative;padding:48px 0 28px;text-align:left}
.project-subtle{color:var(--muted);font-size:14px;margin-top:4px}
.backline{margin-top:10px}
.backline a{color:var(--text);opacity:.85;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.35)}
.backline a:hover{opacity:1}

/* ========== Gallery（缩略图30%） ========== */
.gallery{ display:grid; gap:16px; margin:24px 0 64px; grid-template-columns:repeat(3,1fr); }
@media (max-width:1024px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .gallery{ grid-template-columns:1fr; } }

.gallery figure{
  margin:0; padding:16px 12px; border:1px solid var(--line);
  border-radius:16px; background:rgba(20,17,25,.95);
  display:flex; flex-direction:column; align-items:center;
}
.gallery figure > img{
  width:30% !important; height:auto; display:block; object-fit:contain;
  cursor:zoom-in; background:#000; border-radius:10px; opacity:.98; transition:opacity .2s ease;
}
@media (max-width:640px){ .gallery figure > img{ width:60% !important; } }

.gallery figcaption{
  margin-top:10px; font-size:13px; line-height:1.5; color:var(--muted); text-align:center;
  width:100%; border-top:1px solid var(--line); padding-top:10px;
}

/* The Poetry of a Bird：图片填满方框 */
.gallery--tiles figure{
  padding:16px 12px;
}

/* 覆盖全局 30% 的缩略图规则 */
.gallery--tiles figure > img{
  width:100% !important;     /* 关键：全宽 */
  aspect-ratio:1 / 1;        /* 方形框，想要长方形改 4/3 或 3/2 */
  height:auto;               /* 由 aspect-ratio 计算高度 */
  object-fit:cover;          /* 铺满并裁切 */
  display:block;
  border-radius:12px;
}

/* 标题保持在下方 */
.gallery--tiles figcaption{
  margin-top:10px;
  border-top:1px solid var(--line);
  padding-top:10px;
  text-align:center;
}

/* 响应式列数维持你全站规则 */
@media (max-width:1024px){ .gallery--tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .gallery--tiles{ grid-template-columns:1fr; } }

/* 视频维持全宽（不进灯箱） */
.gallery figure.video-hero{ grid-column:span 2; }
.gallery figure.video-hero video{ width:100%; max-height:720px; display:block; }
@media (max-width:1024px){
  .gallery figure.video-hero{ grid-column:span 1; }
  .gallery figure.video-hero video{ max-height:480px; }
}

/* ========== Lightbox ========== */
.lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:32px;background:rgba(0,0,0,.88)}
.lightbox.open{display:flex}
.lightbox-content{max-width:92vw;max-height:92vh}
.lightbox-content img{max-width:92vw;max-height:92vh;display:block}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#lbClose{top:18px;right:18px;transform:none}#lbPrev{left:16px}#lbNext{right:16px}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:16px 0;opacity:.85}

/* Hero 图片横幅：更矮+留间距 */
.hero-media {
  width: 100%;
  aspect-ratio: 4 / 1;   /* 宽高比更扁，原来 2:1 改为 4:1 */
  overflow: hidden;
  margin: 20px 0;        /* 上下各留 20px 间距，可调 */
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* ==== Bird 页面：方块内铺满 ==== */
/* 用 id 提升优先级，覆盖全局 30% !important 规则 */
#gallery {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width:1024px){ #gallery{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){  #gallery{ grid-template-columns: 1fr; } }

#gallery figure{
  /* 取消全局的居中对齐，避免图片被压小 */
  display: block;
  padding: 16px 12px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(20,17,25,.95);
  overflow: hidden;
}

/* 关键：图片填满方框并裁切 */
#gallery figure > img{
  width: 100% !important;      /* 覆盖全局 30% */
  height: auto;                /* 让 aspect-ratio 生效 */
  aspect-ratio: 4 / 3;         /* 想要长方形改为 4/3 或 3/2 */
  object-fit: cover;           /* 铺满并居中裁切 */
  display: block;
  border-radius: 12px;
}

/* 标题仍在下方 */
#gallery figcaption{
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  text-align: center;
  color: var(--muted);
}

/* ===== Mobile layout fixes (≤640px) ===== */
@media (max-width:640px){
  /* 头部整体更紧凑 */
  .site-header { backdrop-filter: blur(6px); }
  .nav{ 
    flex-wrap: wrap;            /* 允许换行 */
    gap: 8px 12px;
    padding: 10px 0; 
  }
  .brand{
    flex: 1 0 100%;             /* 品牌独占一行 */
    font-size: 16px;
    line-height: 1.2;
  }
  .site-nav{
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;           /* 横向可滑动，避免拥挤换行 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* 隐藏滚动条 */
  }
  .site-nav::-webkit-scrollbar{ display:none; }

  .site-nav a{
    margin: 0;                  /* 去掉桌面的右外边距 */
    font-size: 14px;
    white-space: nowrap;        /* 文案不换行 */
    opacity:.95;
  }
  #langToggle{
    padding: 4px 10px;
    font-size: 12px;
    margin-left: auto;          /* 贴右侧 */
  }

  /* Hero 横幅更矮一些，和内容留距离 */
  .hero-media{
    aspect-ratio: 5 / 2;        /* 比桌面更扁 */
    margin: 12px 0 16px;
  }

  /* 卡片网格：单列，卡片高度略降 */
  .grid{ grid-template-columns: 1fr; gap: 16px; }
  .card{ min-height: 260px; aspect-ratio: 3 / 2; }
  
  /* Bird 页图库：单列显示、间距更紧 */
  #gallery{ grid-template-columns: 1fr !important; gap: 12px; }
  #gallery figure{ padding: 12px; border-radius: 14px; }
  #gallery figure > img{ border-radius: 10px; }
}

/* ===== Mobile layout fixes (≤640px) ===== */
@media (max-width:640px){
  .nav{
    display:flex !important;
    flex-wrap: wrap !important;     /* 允许换行 */
    gap: 8px 12px;
    padding: 10px 0;
  }
  .brand{
    flex: 1 0 100% !important;      /* 品牌独占一行 */
    font-size: 16px;
    line-height: 1.2;
  }
  .site-nav{
    display:flex !important;
    align-items:center;
    gap:12px;
    overflow-x:auto;                /* 横向可滑动 */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .site-nav::-webkit-scrollbar{ display:none; }

  .site-nav a{
    margin:0 !important;
    font-size:14px;
    white-space:nowrap;
  }
  #langToggle{
    padding:4px 10px;
    font-size:12px;
    margin-left:auto;
  }

  /* 让横幅与项目更紧凑 */
  .hero-media{ aspect-ratio: 5/2; margin:12px 0 16px; }
  .grid{ grid-template-columns:1fr !important; gap:16px; }
  .card{ min-height:260px; aspect-ratio:3/2; }
}

/* Moonbloom PDF 区域 */
.pdf-wrap { margin: 0 0 48px; }
.pdf-frame{
  width: 100%;
  height: calc(100vh - 280px);  /* 桌面近全屏视觉 */
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
@media (max-width: 1024px){ .pdf-frame{ height: 70vh; } }
@media (max-width: 640px){  .pdf-frame{ height: 64vh; } }

/* 让整张卡都可点击（链接覆盖整卡） */
.card{ position:relative; }
.card .card-link{
  position:absolute; inset:0;         /* 铺满卡片 */
  display:block; text-decoration:none; color:inherit;
  z-index:2;                          /* 高于背景层 */
}
/* 文字容器放在链接里，定位到底部 */
.card .card-link .card-body{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px;
}

/* 保证背景层在最底，别挡点击 */
.card--bg::before, .card--bg::after{ z-index:0; }
.card--bg .card-cover{ display:none; }  /* 这行你已有，留着 */

/* ===== PDF 详情页：唯一的居中规则 ===== */
.container.pdf-wrap{
  /* 让整个 PDF 区域和首页卡片同宽，并水平居中 */
  max-width: 1100px;
  margin: 0 auto 48px;
  padding: 0 20px;
  display: block;                 /* 禁用之前的 flex 布局 */
}

.container.pdf-wrap .pdf-box{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;                 /* 双保险居中 */
}

.container.pdf-wrap .pdf-frame{
  /* 先把历史遗留的定位/限制清空，再按需要设置 */
  position: static !important;
  left: auto !important;
  transform: none !important;
  max-width: none !important;

  display: block !important;
  box-sizing: border-box;
  width: 100% !important;         /* 占满容器宽度 */
  height: calc(100vh - 220px);    /* 桌面高度：接近满屏 */
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  margin: 0 auto;                 /* 居中（双保险） */
}

/* 提示文字在 PDF 下方并居中 */
.container.pdf-wrap .muted,
.container.pdf-wrap .center{
  text-align: center !important;
  margin-top: 8px !important;
}

/* 高度在小屏自适应 */
@media (max-width:1024px){
  .container.pdf-wrap .pdf-frame{ height: 72vh !important; }
}
@media (max-width:640px){
  .container.pdf-wrap .pdf-frame{ height: 64vh !important; }
}