/* ━━━ 写真系列 · 作品展示 & 系列详情页 ━━━
   依赖 garden.css 的设计变量与基础组件。 */

/* ════════ 一、写真页：精选系列索引（替代小格主题） ════════ */

/* 索引：特写(01) + 四组并置(02–05)，序号自然从左到右、从上到下 */
.series-grid { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(44px, 6vw, 84px); }
.series-card { display: block; text-decoration: none; color: inherit; position: relative; }
.series-card .sc-media {
  position: relative; overflow: hidden; background: var(--ivory);
  box-shadow: 0 36px 80px -42px color-mix(in srgb, var(--ink) 40%, transparent);
}
.series-card image-slot { width: 100%; height: auto; display: block; }
.series-card .sc-media image-slot { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }

/* 悬停柔光罩 + 进入提示 */
.sc-veil {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--accent-deep) 58%, transparent), transparent 50%);
  transition: opacity .8s ease; z-index: 2;
}
.sc-enter {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 22px 24px; display: flex; align-items: center; gap: 11px;
  color: var(--cream); font-size: 13px; letter-spacing: .24em; text-indent: .24em;
  opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.sc-enter em { font-style: normal; font-family: var(--latin); font-size: 20px; transition: transform .5s ease; }
.series-card:hover .sc-media image-slot { transform: scale(1.05); }
.series-card:hover .sc-veil { opacity: 1; }
.series-card:hover .sc-enter { opacity: 1; transform: none; }
.series-card:hover .sc-enter em { transform: translateX(8px); }

/* 图下文字标签 */
.sc-meta {
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline;
  padding: 17px 2px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); margin-top: 15px;
}
.sc-num { font-family: var(--latin); font-style: italic; font-size: clamp(19px, 2vw, 26px); color: var(--gold); line-height: 1; grid-row: span 2; }
.sc-name { font-size: clamp(17px, 1.9vw, 21px); font-weight: 600; letter-spacing: .1em; }
.sc-name i { font-family: var(--latin); font-style: italic; font-weight: 500; color: var(--accent-deep); font-size: .6em; letter-spacing: .2em; margin-left: 10px; text-transform: uppercase; }
.sc-desc { color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; letter-spacing: .04em; margin-top: 6px; }

/* —— 特写 01：图文并置，作页面焦点 —— */
.series-card.feature { display: grid; grid-template-columns: 1.32fr 1fr; gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.series-card.feature .sc-media image-slot { aspect-ratio: 4 / 3; }
.series-card.feature .sc-veil, .series-card.feature .sc-enter { display: none; }
.series-card.feature .sc-meta { display: block; border-top: none; margin: 0; padding: 0; }
.series-card.feature .sc-num { display: block; font-size: clamp(34px, 4.4vw, 58px); margin-bottom: 14px; }
.series-card.feature .sc-name { font-size: clamp(26px, 3.2vw, 40px); letter-spacing: .07em; }
.series-card.feature .sc-name i { font-size: .48em; margin-left: 14px; }
.series-card.feature .sc-desc { font-size: clamp(15px, 1.6vw, 17px); line-height: 2; margin-top: 16px; max-width: 21em; }
.sc-go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  color: var(--accent-deep); font-size: 13.5px; letter-spacing: .22em; text-indent: .22em;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-deep) 40%, transparent); padding-bottom: 5px;
  transition: gap .4s ease, border-color .4s ease;
}
.sc-go em { font-style: normal; font-family: var(--latin); font-size: 18px; }
.series-card.feature:hover .sc-go { gap: 17px; border-color: var(--accent-deep); }

/* —— 其余四组：并排，序号 02→05 —— */
.series-rest { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.series-rest .series-card .sc-media image-slot { aspect-ratio: 3 / 4; }

/* —— 三辑并排（婚纱摄影等三系列页面） —— */
.series-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.8vw, 44px); max-width: 1200px; margin: 0 auto; }
.series-trio .series-card .sc-media image-slot { aspect-ratio: 4 / 5; }
@media (max-width: 860px) { .series-trio { grid-template-columns: 1fr; max-width: 420px; } }

@media (max-width: 920px) {
  .series-card.feature { grid-template-columns: 1fr; gap: 26px; }
  .series-card.feature .sc-media image-slot { aspect-ratio: 16 / 10; }
  .series-rest { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 470px) {
  .series-rest { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

/* ════════ 二、系列详情页（分页） ════════ */

/* 首屏：标题 + 大幅封面 */
.series-hero {
  position: relative; z-index: 2;
  padding: clamp(120px, 16vh, 170px) clamp(20px, 6vw, 90px) 0;
  max-width: 1320px; margin: 0 auto;
}
.sh-top { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vh, 70px); }
.sh-back {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--ink-soft); font-size: 13.5px; letter-spacing: .22em; text-indent: .22em;
  margin-bottom: clamp(26px, 4vh, 44px); transition: color .4s ease, gap .4s ease;
}
.sh-back i { font-family: var(--latin); font-style: normal; font-size: 17px; transition: transform .4s ease; }
.sh-back:hover { color: var(--accent-deep); gap: 14px; }
.sh-back:hover i { transform: translateX(-5px); }
.series-hero .hand-title {
  font-family: var(--hand); font-weight: 400; line-height: 1.12;
  font-size: clamp(52px, 9vw, 116px); color: var(--ink);
  text-shadow: 0 2px 36px color-mix(in srgb, var(--accent) 30%, transparent);
}
.series-hero .sh-sub {
  margin-top: 22px; color: var(--ink-soft); font-size: clamp(15px, 1.8vw, 19px);
  letter-spacing: .12em; line-height: 2.1; text-wrap: pretty;
}
.sh-cover {
  position: relative; overflow: hidden; background: var(--ivory);
  box-shadow: 0 50px 110px -50px color-mix(in srgb, var(--ink) 46%, transparent);
}
.sh-cover image-slot { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; }
@media (max-width: 760px) { .sh-cover image-slot { aspect-ratio: 4 / 5; } }

/* 编辑式画廊容器 */
.ed-section {
  position: relative; z-index: 2; max-width: 1320px;
  margin: clamp(56px, 9vh, 110px) auto 0; padding: 0 clamp(20px, 6vw, 90px);
  display: flex; flex-direction: column; gap: clamp(48px, 8vh, 110px);
}

/* 通用图块 */
.ed-fig { position: relative; display: flex; flex-direction: column; gap: 14px; }
.ed-fig .em-wrap { position: relative; overflow: hidden; background: var(--ivory);
  box-shadow: 0 36px 80px -44px color-mix(in srgb, var(--ink) 42%, transparent); }
.ed-fig image-slot { width: 100%; height: auto; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ed-fig .em-wrap:hover image-slot { transform: scale(1.04); }
.ed-fig figcaption {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 13.5px; color: var(--ink-soft); letter-spacing: .14em;
}
.ed-fig figcaption b {
  font-family: var(--latin); font-style: italic; font-weight: 500; color: var(--gold);
  font-size: 13px; letter-spacing: .12em; white-space: nowrap;
}
.ed-fig.r-45 image-slot { aspect-ratio: 4 / 5; }
.ed-fig.r-34 image-slot { aspect-ratio: 3 / 4; }
.ed-fig.r-54 image-slot { aspect-ratio: 5 / 4; }
.ed-fig.r-32 image-slot { aspect-ratio: 3 / 2; }
.ed-fig.r-23 image-slot { aspect-ratio: 2 / 3; }
.ed-fig.r-169 image-slot { aspect-ratio: 16 / 9; }
.ed-fig.r-11 image-slot { aspect-ratio: 1 / 1; }

/* 放大查看按钮 */
.zoom-btn {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: color-mix(in srgb, var(--cream) 80%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--accent-deep); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.8); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1), background .3s ease;
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--ink) 40%, transparent);
}
.ed-fig .em-wrap:hover .zoom-btn,
.sh-cover:hover .zoom-btn { opacity: 1; transform: none; }
.zoom-btn:hover { background: var(--accent-deep); color: var(--cream); }
.zoom-btn svg { width: 18px; height: 18px; }

/* 场景：双图（高低错落） */
.ed-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.ed-duo .ed-fig:nth-child(2) { transform: translateY(clamp(28px, 6vw, 84px)); }
@media (max-width: 760px) {
  .ed-duo { grid-template-columns: 1fr; }
  .ed-duo .ed-fig:nth-child(2) { transform: none; }
}

/* 场景：文字 + 图（概念页） */
.ed-textimg { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 86px); align-items: center; }
.ed-textimg.flip .ed-copy { order: 2; }
.ed-textimg.flip .ed-fig { order: 1; }
.ed-copy .kicker { display: block; }
.ed-copy h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 600; letter-spacing: .08em; margin: 16px 0 22px; line-height: 1.35; }
.ed-copy h2 .hand-accent { font-family: var(--hand); color: var(--accent-deep); font-weight: 400; }
.ed-copy p { color: var(--ink-soft); font-size: clamp(15px, 1.7vw, 18px); line-height: 2.15; letter-spacing: .05em; text-wrap: pretty; max-width: 30em; }
.ed-copy p + p { margin-top: 1.1em; }
@media (max-width: 760px) {
  .ed-textimg, .ed-textimg.flip { grid-template-columns: 1fr; gap: 30px; }
  .ed-textimg.flip .ed-copy, .ed-textimg.flip .ed-fig { order: 0; }
}

/* 场景：整幅横图 */
.ed-wide { width: 100%; }
.ed-wide image-slot { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .ed-wide image-slot { aspect-ratio: 4 / 3; } }

/* 场景：三联（大图 + 两小图） */
.ed-trio { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: stretch; }
.ed-trio .ed-trio-col { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 48px); }
.ed-trio .ed-trio-col .ed-fig { flex: 1; }
.ed-trio .ed-trio-col .ed-fig .em-wrap { flex: 1; }
.ed-trio .ed-trio-col image-slot { height: 100%; aspect-ratio: auto; }
.ed-trio.flip .ed-fig.big { order: 2; }
@media (max-width: 760px) {
  .ed-trio, .ed-trio.flip { grid-template-columns: 1fr; }
  .ed-trio .ed-fig.big { order: 0; }
  .ed-trio .ed-trio-col { flex-direction: row; }
  .ed-trio .ed-trio-col image-slot { aspect-ratio: 1 / 1; }
}

/* 场景：拉页引言 */
.ed-quote { text-align: center; max-width: 880px; margin: clamp(8px, 2vh, 24px) auto; }
.ed-quote blockquote {
  font-size: clamp(22px, 3.2vw, 36px); font-weight: 500; line-height: 1.7;
  letter-spacing: .06em; color: var(--ink); text-wrap: pretty;
}
.ed-quote blockquote em { font-style: normal; color: var(--accent-deep); }
.ed-quote .eq-mark { font-family: var(--latin); font-size: clamp(56px, 7vw, 96px); line-height: .5; color: color-mix(in srgb, var(--accent) 38%, transparent); display: block; margin-bottom: 18px; }

/* 拍摄信息 */
.shoot-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 48px); max-width: 1080px; margin: 0 auto; }
.shoot-info .si {
  display: flex; flex-direction: column; gap: 12px; text-align: center;
  padding: clamp(28px, 3vw, 40px) 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--ivory) 60%, transparent);
}
.shoot-info .si-label { font-family: var(--latin); font-style: italic; letter-spacing: .26em; font-size: 12px; color: var(--gold); text-transform: uppercase; }
.shoot-info .si-val { font-size: clamp(18px, 2vw, 23px); font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.shoot-info .si-val small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-soft); letter-spacing: .1em; margin-top: 6px; line-height: 1.7; }
@media (max-width: 760px) { .shoot-info { grid-template-columns: repeat(2, 1fr); } }

/* 其他系列 */
.others-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 32px); max-width: 1180px; margin: 0 auto; }
.others-grid.few { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
.other-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 14px; }
.other-card .oc-media { overflow: hidden; background: var(--ivory); box-shadow: 0 24px 54px -34px color-mix(in srgb, var(--ink) 38%, transparent); }
.other-card image-slot { width: 100%; height: auto; aspect-ratio: 3 / 4; display: block; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.other-card:hover image-slot { transform: scale(1.06); }
.other-card .oc-name { text-align: center; font-size: 16px; font-weight: 600; letter-spacing: .12em; transition: color .3s ease; }
.other-card .oc-name i { display: block; font-family: var(--latin); font-style: italic; font-size: 11.5px; letter-spacing: .2em; color: var(--gold); margin-top: 5px; text-transform: uppercase; }
.other-card:hover .oc-name { color: var(--accent-deep); }
@media (max-width: 760px) { .others-grid { grid-template-columns: repeat(2, 1fr); } }

/* ════════ 灯箱 ════════ */
#lightbox {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ink) 78%, #000);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
#lightbox.open { opacity: 1; pointer-events: auto; }
#lightbox .lb-img {
  max-width: min(92vw, 1400px); max-height: 86vh; object-fit: contain;
  box-shadow: 0 60px 130px -40px rgba(0,0,0,.7);
  transform: scale(.96); opacity: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
#lightbox.open .lb-img { transform: none; opacity: 1; }
#lightbox .lb-cap {
  position: absolute; bottom: clamp(20px, 4vh, 40px); left: 0; right: 0; text-align: center;
  color: color-mix(in srgb, var(--cream) 90%, transparent); font-size: 13.5px; letter-spacing: .2em;
}
#lightbox .lb-cap b { font-family: var(--latin); font-style: italic; color: color-mix(in srgb, var(--gold) 88%, #fff); margin-right: 12px; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px;
  border-radius: 50%; border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  background: color-mix(in srgb, #fff 8%, transparent); color: var(--cream); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .3s ease, border-color .3s ease;
}
.lb-nav:hover { background: color-mix(in srgb, #fff 18%, transparent); border-color: color-mix(in srgb, #fff 60%, transparent); }
.lb-nav svg { width: 22px; height: 22px; }
.lb-prev { left: clamp(14px, 3vw, 40px); }
.lb-next { right: clamp(14px, 3vw, 40px); }
.lb-close { position: absolute; top: clamp(18px, 3vh, 34px); right: clamp(18px, 3vw, 38px); width: 46px; height: 46px; }
.lb-count { position: absolute; top: clamp(22px, 3.4vh, 38px); left: 0; right: 0; text-align: center; color: color-mix(in srgb, var(--cream) 70%, transparent); font-family: var(--latin); font-style: italic; letter-spacing: .2em; font-size: 15px; }
@media (max-width: 640px) { .lb-nav { width: 44px; height: 44px; } }

/* 浮入：场景渐显（与 .reveal 配合，series.js 触发） */
.ed-section .reveal { transition-delay: var(--rd, 0s); }