/* 實績照片（2026-10-04 老闆選定乙版）：左側設備目錄、右側展示台與縮圖、全螢幕看大圖 */
.gl-filter{display:flex;flex-wrap:wrap;gap:12px}
.gl-filter .btn{height:52px;padding:2px 20px 0;border:1px solid #d3e0eb;border-bottom:4px solid #b9cde0;border-radius:14px;background:linear-gradient(180deg,#fff,#eaf2f9);color:#173a5e;font-size:17px;font-weight:800;box-shadow:0 1px 0 #fff inset,0 6px 12px -6px #0f274766,0 2px 3px #0f27471a;gap:10px;box-sizing:border-box}
.gl-filter .btn:hover{color:var(--brand);border-bottom-color:var(--sky)}
.gl-filter .btn[aria-pressed="true"]{transform:translateY(3px);background:linear-gradient(180deg,#0a5fa6,#1b7fd4 55%,#2a95ec);color:#fff;border-color:#0a5fa6;border-bottom-width:1px;border-bottom-color:#014e8e;box-shadow:inset 0 4px 8px #00000059,inset 0 -1px 0 #ffffff40,0 1px 0 #ffffffb3}
.gl-filter .btn small{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 8px;border-radius:13px;background:#e3eef8;color:var(--brand-d);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.gl-filter .btn[aria-pressed="true"] small{background:#ffffff2e;color:#fff}

.gl-item{position:relative;display:block;min-width:0;color:inherit;text-decoration:none;cursor:pointer}
.gl-item[hidden],[data-gl-group][hidden]{display:none!important}
.gl-item img{display:block;width:100%;height:auto;background:var(--tint)}
.gl-item:focus-visible{outline:3px solid var(--sky);outline-offset:4px;border-radius:var(--r-md)}

/* 版面：左側設備目錄＋右側展示台與縮圖 */
.gl-layout{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:clamp(20px,1.8vw,40px);align-items:start}
.gl-side{position:sticky;top:var(--gl-top,92px);display:grid;gap:14px;padding:22px;border:1px solid #cdddea;border-radius:var(--r-lg);background:linear-gradient(150deg,#fff 45%,#f2f8fd);box-shadow:0 1px 0 #fff inset,0 18px 34px -20px #0f274755}
.gl-side__title{margin:0;font-size:20px}
.gl-side .gl-filter{display:grid;gap:10px}
.gl-side .gl-filter .btn{justify-content:flex-start;height:64px;padding:0 14px 0 8px}
.gl-side .gl-filter .btn img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.gl-side .gl-filter .btn small{margin-left:auto}
.gl-main{display:grid;gap:clamp(16px,1.2vw,24px);min-width:0}

/* 展示台：大圖在上（兩側以同張照片模糊墊底，不留黑邊）＋說明列在下 */
.gl-stage{container-type:inline-size;display:grid;gap:clamp(14px,1.1vw,20px);padding:clamp(12px,1vw,20px);border:1px solid #cdddea;border-radius:var(--r-lg);background:linear-gradient(150deg,#fff 45%,#f2f8fd);box-shadow:0 1px 0 #fff inset,0 18px 34px -20px #0f274755}
.gl-stage__media{position:relative;height:clamp(300px,40vw,min(56vh,720px));margin:0;overflow:hidden;border-radius:16px;background:#0b223d}
.gl-stage__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(22px) brightness(.82) saturate(1.2);transform:scale(1.15)}
.gl-stage__img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .25s}
#gallery .gl-stage__media img{max-width:none}   /* 全站內容圖最寬 1536px 的限制（subpage.css）不套在展示台，否則 2560 寬右側露底、照片不置中 */
.gl-stage__img.is-in{opacity:1}
.gl-stage__media.is-err::after,.gl-viewer__fig.is-err::after{content:"照片暫時無法載入";position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:#cfe0f0;font-size:17px;font-weight:700}
.gl-stage__full{position:absolute;right:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid #ffffff40;border-bottom:3px solid #00000066;border-radius:12px;background:#0b223dcc;color:#fff;font:inherit;font-size:15px;font-weight:800;cursor:pointer;backdrop-filter:blur(6px);transition:transform .15s}
.gl-stage__full:hover{transform:translateY(-2px)}
.gl-stage__full:active{transform:translateY(1px)}
.gl-stage__full:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.gl-stage svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gl-stage__info{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr) auto;align-items:center;gap:clamp(14px,1.4vw,28px);padding:0 4px}
.gl-stage__count{display:flex;align-items:baseline;gap:6px;margin:0;color:var(--ink-3);font-variant-numeric:tabular-nums}
.gl-stage__num{color:var(--ink);font-size:clamp(38px,2.8vw,56px);line-height:1}
.gl-stage__total{font-size:18px;font-weight:700}
.gl-stage__text{min-width:0}
.gl-stage__title{margin:0 0 2px;font-size:clamp(20px,1.3vw,26px)}
.gl-stage__scene{margin:0;color:var(--ink-2);font-size:17px}
.gl-stage__about{display:flex;align-items:center;gap:14px;min-width:0;padding:12px 14px;border-radius:14px;background:#eef6fd}
.gl-stage__about p{flex:1;min-width:0;margin:0;color:var(--ink-2);font-size:15px;line-height:1.6}
.gl-stage__about b{margin-right:8px;color:var(--ink)}
.gl-stage__about .btn{flex:none;height:44px;padding-inline:14px;font-size:15px}
.gl-stage__nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:clamp(220px,16vw,280px)}
.gl-stage__nav .btn{height:52px;font-size:17px}
@container (max-width:1060px){
  .gl-stage__info{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"count text nav" "about about about"}
  .gl-stage__count{grid-area:count}
  .gl-stage__text{grid-area:text}
  .gl-stage__nav{grid-area:nav}
  .gl-stage__about{grid-area:about}
}
@container (max-width:560px){
  .gl-stage__info{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "about" "nav";gap:12px;padding:0}
  .gl-stage__count{display:none}
  .gl-stage__nav{width:auto}
  .gl-stage__about{flex-wrap:wrap}
  .gl-stage__about .btn{width:100%}
}

/* 縮圖（欄數由 gallery.js 依張數挑，讓最後一列盡量排滿） */
.gl-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(120px,8vw,170px)),1fr));gap:10px}
.gl-thumbs .gl-item{overflow:hidden;border:2px solid #fff;border-radius:12px;box-shadow:0 8px 16px -10px #0f274780;transition:transform .2s,box-shadow .2s}
.gl-thumbs .gl-item img{aspect-ratio:4/3;object-fit:cover}
.gl-thumbs .gl-item:hover{transform:translateY(-3px)}
.gl-thumbs .gl-item[aria-current="true"]{border-color:var(--brand-2);box-shadow:0 0 0 3px #4fc0f066,0 10px 18px -10px #0267b9}
@media(min-width:1101px) and (max-height:860px){   /* 矮螢幕筆電：目錄縮小，固定在畫面上時最後一顆不被切掉 */
  .gl-side{gap:10px;padding:16px}
  .gl-side .gl-filter{gap:8px}
  .gl-side .gl-filter .btn{height:52px}
  .gl-side .gl-filter .btn img{width:38px;height:38px}
}
@media(max-width:1100px){
  .gl-layout{grid-template-columns:minmax(0,1fr)}
  .gl-side{position:static}
  .gl-side .gl-filter{display:flex;flex-wrap:wrap}
  .gl-side .gl-filter .btn{flex:1 1 200px}
  .gl-stage__media{height:clamp(300px,52vw,min(62vh,620px))}
}
@media(max-width:640px){
  .gl-filter .btn{height:44px;padding:2px 10px 0;font-size:15px;gap:6px}
  .gl-filter .btn small{min-width:24px;height:22px;padding:0 6px;font-size:13px}
  .gl-side{gap:10px;padding:14px}
  .gl-side__title{font-size:18px}
  .gl-side .gl-filter{display:flex;flex-wrap:wrap;gap:8px}
  .gl-side .gl-filter .btn{flex:1 1 98px;height:44px;padding:2px 8px 0;justify-content:center;gap:6px}
  .gl-side .gl-filter .btn img{display:none}
  .gl-side .gl-filter .btn small{margin-left:0}
  .gl-stage{padding:10px}
  .gl-stage__media{height:auto;aspect-ratio:4/3}
  .gl-stage__title{font-size:20px}
  .gl-thumbs{gap:8px}
}

/* 看大圖 */
.gl-lock,.gl-lock body{overflow:hidden}
.gl-viewer{position:fixed;inset:0;z-index:2000;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px;padding:16px clamp(16px,2vw,40px) 18px;background:radial-gradient(120% 90% at 50% 10%,#0d2c4f,#050f1e);color:#fff;opacity:0;transition:opacity .2s;outline:none}
.gl-viewer.is-open{opacity:1}
.gl-viewer[hidden]{display:none}
.gl-viewer p{margin:0}
.gl-viewer__top{display:flex;align-items:center;gap:16px}
.gl-viewer__meta{display:flex;align-items:center;gap:12px;margin-right:auto!important}
.gl-viewer__cat{padding:5px 13px;border-radius:14px;background:#4fc0f033;color:#cdeefc;font-size:15px;font-weight:800}
.gl-viewer__count{color:#fff;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.gl-viewer__hint{color:#9fb6cc;font-size:15px}
.gl-viewer button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #ffffff38;border-bottom:3px solid #00000059;background:linear-gradient(180deg,#ffffff30,#ffffff12);color:#fff;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 1px 0 #ffffff40 inset,0 8px 18px -10px #000;transition:transform .15s,background .15s}
.gl-viewer button:hover{background:linear-gradient(180deg,#ffffff45,#ffffff1f);transform:translateY(-2px)}
.gl-viewer button:active{transform:translateY(1px)}
.gl-viewer button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.gl-viewer svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gl-viewer__close{height:46px;padding:0 16px 0 12px;border-radius:12px;font-size:16px}
.gl-viewer__stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(10px,1.5vw,28px);min-height:0;touch-action:pan-y pinch-zoom}
.gl-viewer__nav{width:60px;height:60px;border-radius:50%}
.gl-viewer__nav--next{background:linear-gradient(180deg,#2a95ec,#0267b9)!important;border-color:#1e88e5}
.gl-viewer__fig{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:14px;height:100%;min-height:0;margin:0}
.gl-viewer__img{align-self:center;max-width:100%;max-height:100%;min-height:0;object-fit:contain;border-radius:12px;box-shadow:0 30px 70px -30px #000;opacity:0;transform:scale(.985);transition:opacity .25s,transform .25s}
.gl-viewer__img.is-in{opacity:1;transform:none}
.gl-viewer__cap{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:960px;text-align:center}
.gl-viewer__title{color:#fff;font-size:clamp(19px,1.15vw,26px)}
.gl-viewer__scene{color:#c9d7e6;font-size:clamp(16px,.9vw,19px)}
.gl-viewer__pager{display:none}
.gl-viewer__strip{display:flex;justify-content:safe center;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}
.gl-viewer__strip button{flex:0 0 auto;width:96px;height:68px;padding:0;overflow:hidden;border-radius:10px;border-bottom-width:1px;opacity:.55}
.gl-viewer__strip button[aria-current="true"]{opacity:1;border:2px solid var(--sky)}
.gl-viewer__strip img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){
  .gl-viewer{padding:12px 12px 14px;gap:10px}
  .gl-viewer__hint{display:none}
  .gl-viewer__stage{grid-template-columns:minmax(0,1fr)}
  .gl-viewer .gl-viewer__nav{display:none}
  .gl-viewer__pager{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .gl-viewer__pager button{height:48px;border-radius:12px;font-size:16px}
  .gl-viewer__pager button+button{background:linear-gradient(180deg,#2a95ec,#0267b9);border-color:#1e88e5}
  .gl-viewer__strip button{width:64px;height:48px}
}
@media(max-height:500px) and (orientation:landscape){   /* 手機橫放：照片優先，收起縮圖列與下方按鍵，左右鍵疊在照片兩側 */
  .gl-viewer{grid-template-rows:auto minmax(0,1fr);gap:6px;padding:8px 12px}
  .gl-viewer__hint,.gl-viewer__strip,.gl-viewer__pager{display:none}
  .gl-viewer__close{height:38px}
  .gl-viewer__stage{grid-template-columns:minmax(0,1fr)}
  .gl-viewer .gl-viewer__nav{display:inline-flex;position:absolute;top:calc(50% - 22px);z-index:2;width:44px;height:44px}
  .gl-viewer__nav--prev{left:4px}
  .gl-viewer__nav--next{right:4px}
  .gl-viewer__fig{gap:6px}
  .gl-viewer__cap{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 10px}
  .gl-viewer__title{font-size:16px}
  .gl-viewer__scene{font-size:14px}
}