/* 作品合集 / 案例合集：沉浸式画廊（11-02） */
.gal-hero .wrap{padding-bottom:clamp(56px,10vh,110px)}
.gal-hero h1{font-size:clamp(52px,8vw,120px)!important}
.gal-hero .team-line{margin-top:-8px;font-size:14px;letter-spacing:.12em;color:rgba(255,255,255,.75)}
.gal-hero .team-line b{color:#fff;font-weight:600}

/* 筛选条：吸顶玻璃条 */
.gbar{position:sticky;top:64px;z-index:15;padding:14px 0;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid color-mix(in srgb,var(--biz) 14%,transparent)}
.gbar .wrap{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);flex-wrap:wrap}
.gseg{display:flex;align-items:center;gap:10px}
.gseg>span{font-size:12px;letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.gseg .pills{display:flex;gap:3px;padding:4px;border-radius:999px;background:#fff;box-shadow:0 6px 22px -14px rgba(40,20,70,.4);border:1px solid color-mix(in srgb,var(--biz) 14%,transparent)}
.gseg button{all:unset;cursor:pointer;padding:8px 15px;border-radius:999px;font-size:14px;color:var(--muted);white-space:nowrap;transition:background .3s,color .3s}
.gseg button:hover{color:var(--text)}
.gseg button[aria-pressed=true]{background:var(--biz);color:#fff;font-weight:600}
.gcount{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.gcount b{font-family:var(--serif);font-size:20px;color:var(--text);margin-right:2px}
.ghint{display:none;margin-top:12px;font-size:14px;color:var(--text)}
.ghint.on{display:block}
.ghint i{font-style:normal;color:var(--biz);margin-right:6px}

/* 画廊网格：错落尺寸 */
.gal{background:var(--paper);color:var(--text);padding:clamp(36px,6vh,64px) 0 clamp(80px,12vh,140px)}
.ggrid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(150px,13vw,210px);grid-auto-flow:dense;gap:16px}
.gi{all:unset;box-sizing:border-box;position:relative;grid-column:span 3;grid-row:span 2;border-radius:10px;overflow:hidden;isolation:isolate;cursor:pointer;color:#fff;background:#2a1747;
  box-shadow:0 22px 46px -30px rgba(40,20,70,.6);transform:translateY(0);transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s,opacity .5s}
.gi.sz-xl{grid-column:span 6;grid-row:span 3}
.gi.sz-w{grid-column:span 6;grid-row:span 2}
.gi.sz-t{grid-column:span 3;grid-row:span 3}
.gi.sz-s{grid-column:span 3;grid-row:span 2}
.gi[hidden]{display:none}
.gi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.gi::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(24,12,44,.88) 0%,rgba(24,12,44,.35) 42%,rgba(24,12,44,0) 70%);transition:opacity .5s}
.gi:hover{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(40,20,70,.7)}
.gi:hover img{transform:scale(1.06)}
.gi:focus-visible{outline:3px solid var(--biz);outline-offset:3px}
.gi .k{position:absolute;top:14px;left:14px;display:flex;gap:6px;align-items:center;font-size:12px;padding:6px 11px;border-radius:99px;background:rgba(20,10,36,.45);backdrop-filter:blur(8px)}
.gi .k .pl{width:0;height:0;border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.gi .a{position:absolute;top:14px;right:14px;font-size:11.5px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.gi .a.mem{background:color-mix(in srgb,var(--biz) 70%,transparent)}
.gi .t{position:absolute;left:20px;right:20px;bottom:18px}
.gi .t b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(18px,1.45vw,22px);line-height:1.35}
.gi.sz-xl .t b{font-size:clamp(24px,2.3vw,34px)}
.gi.sz-w .t b{font-size:clamp(20px,1.8vw,27px)}
.gi .t small{display:block;margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.75);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .5s}
.gi:hover .t small,.gi.sz-xl .t small,.gi.sz-w .t small{max-height:60px;opacity:1}
.gi .t em{display:block;font-style:normal;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.25);font-size:14px;line-height:1.55;color:rgba(255,255,255,.9)}
.gempty{display:none;grid-column:1/-1;padding:80px 0;text-align:center;color:var(--muted);font-size:16px}
.gempty.on{display:block}
.gfoot{margin-top:40px;font-size:12.5px;line-height:1.9;color:var(--muted);max-width:820px}

/* 案例卡：大数字 */
.gi.case .t b{font-size:clamp(24px,2vw,32px);line-height:1.15}
.gi.case.sz-xl .t b{font-size:clamp(34px,3.4vw,52px)}
.gi.case .t .nm{display:block;margin-top:8px;font-size:13px;color:rgba(255,255,255,.78)}

/* 作品：原地展开（11-02 不要弹窗） */
.gi.wopen{grid-column:span 9!important;grid-row:span 4!important;cursor:default;transform:none!important}
.gi.wopen>img,.gi.wopen::after,.gi.wopen>.k,.gi.wopen>.a,.gi.wopen>.t{display:none}
.gi .wx{position:absolute;inset:0;display:grid;grid-template-columns:1.55fr 1fr;background:#140a22;z-index:2;animation:wxin .45s ease both}
@keyframes wxin{from{opacity:0}}
.wx .wm{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}
.wx .wm video,.wx .wm img.big{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.wx .wm .nav{all:unset;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;font-size:20px}
.wx .wm .nav.p{left:12px}.wx .wm .nav.n{right:12px}
.wx .wm .idx{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:12px;color:rgba(255,255,255,.85);padding:4px 10px;border-radius:99px;background:rgba(0,0,0,.35)}
.wx .doc{background:#fbf8f3;color:#2f2738;padding:clamp(24px,3vw,44px);overflow:auto;height:100%;width:100%;box-sizing:border-box;font-size:15px;line-height:1.95}
.wx .doc h4{font-family:var(--serif);font-size:19px;margin:22px 0 8px;color:#2f2738}
.wx .doc p{margin:0 0 12px;color:#2f2738}
.wx .wi{background:var(--paper);color:var(--text);padding:clamp(24px,2.6vw,38px);overflow:auto}
.wx .wi small{font-size:12.5px;letter-spacing:.12em;color:var(--biz)}
.wx .wi h3{font-family:var(--serif);font-weight:600;font-size:clamp(20px,1.7vw,26px);line-height:1.4;margin:10px 0 12px;color:var(--text)}
.wx .wi .hl{font-size:16px;line-height:1.7;margin:0 0 20px;color:var(--text);font-weight:600}
.wx .wi dl{margin:0;display:grid;grid-template-columns:68px 1fr;gap:10px 12px;font-size:14px;line-height:1.8;color:var(--text)}
.wx .wi dt{color:var(--muted);font-size:12.5px;padding-top:2px}
.wx .wi dd{margin:0}
.wx .wi .how{display:inline-block;padding:3px 11px;border-radius:99px;background:color-mix(in srgb,var(--biz) 12%,#fff);font-size:13px}
.wx .wi .note{margin-top:18px;font-size:12px;color:var(--muted)}
.wx .x{all:unset;cursor:pointer;position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:50%;background:rgba(42,28,56,.1);color:var(--text);display:grid;place-items:center;font-size:18px}
.wx .x:hover{background:var(--biz);color:#fff}

/* 案例：沿用全站原地展开，这里只管在 12 栏网格里的占位（打开后占 9 栏，旁边一张还露着） */
.ggrid.grid-cases .gi.case.open{grid-column:span 9!important;grid-row:span 3!important;height:auto!important;transform:none!important;cursor:default}
.ggrid.grid-cases .gi.case.open .t{right:calc(50% + 20px)}
.ggrid.grid-cases .gi.case.open .t em{display:block}

@media (max-width:1000px){
 .ggrid{grid-template-columns:repeat(6,1fr);grid-auto-rows:150px}
 .gi.wopen{grid-column:1/-1!important;grid-row:span 5!important}
 .gi .wx{grid-template-columns:1fr;grid-template-rows:46% 54%}
 .ggrid.grid-cases .gi.case.open{grid-column:1/-1!important;grid-row:span 6!important}
 .gi,.gi.sz-s{grid-column:span 3;grid-row:span 2}
 .gi.sz-xl,.gi.sz-w{grid-column:span 6;grid-row:span 2}
 .gi.sz-t{grid-column:span 3;grid-row:span 3}
}
@media (max-width:640px){
 .gbar{top:56px;padding:10px 0}
 .gbar .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .gbar .wrap::-webkit-scrollbar{display:none}
 .gcount{display:none}
 .ggrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;gap:10px}
 .gi,.gi.sz-s,.gi.sz-t{grid-column:span 1;grid-row:span 2}
 .gi.sz-xl,.gi.sz-w{grid-column:span 2;grid-row:span 2}
 .gi .t{left:12px;right:12px;bottom:12px}
 .gi .t b{font-size:15px}
 .gi.case .t b{font-size:20px}
 .gi .t em{display:none}
 .gi.wopen{grid-row:span 7!important}
 .ggrid.grid-cases .gi.case.open{grid-row:span 8!important}
}

/* 手机：网格改为自然高度，展开的卡片按内容撑开（不留空白） */
@media (max-width:640px){
 .ggrid{grid-auto-rows:auto}
 .gi,.gi.sz-s,.gi.sz-t{grid-row:auto!important;aspect-ratio:3/4}
 .gi.sz-xl,.gi.sz-w{grid-row:auto!important;aspect-ratio:16/11}
 .ggrid.grid-cases .gi.case.open{grid-column:1/-1!important;grid-row:auto!important;aspect-ratio:auto;height:auto!important;display:flex;flex-direction:column;background:var(--paper)}
 .ggrid.grid-cases .gi.case.open>img{position:relative!important;width:100%!important;height:220px!important;flex:none}
 .ggrid.grid-cases .gi.case.open .cx{position:relative;inset:auto;width:auto;opacity:1;transform:none}
 .gi.wopen{grid-column:1/-1!important;grid-row:auto!important;aspect-ratio:auto;height:auto}
 .gi.wopen .wx{position:relative;inset:auto;grid-template-rows:auto auto;grid-template-columns:1fr}
 .gi.wopen .wx .wm{height:auto;max-height:70vh;min-height:220px}
 .gi.wopen .wx .wm video,.gi.wopen .wx .wm img.big{height:auto;max-height:70vh}
 .gi.wopen .wx .doc{max-height:60vh}
}
@media (max-width:640px){
 .ggrid.grid-cases .gi.case.open>.t,.ggrid.grid-cases .gi.case.open>.k,.ggrid.grid-cases .gi.case.open>.a,.ggrid.grid-cases .gi.case.open::after{display:none}
}