/* ============================================================
   建築案例內頁樣式 v2
   直接依照 rshp.com / snohetta.com / herzogdemeuron.com
   三個參考網站的實際 DOM 與版面比例還原：
   - 標題先以純文字呈現在白底上，圖片在標題「之後」，不是疊字在圖上
   - 12 欄編輯式網格，非對稱圖文分割（8/4、7/5、6/6 交錯）
   - 內文以 ch 為單位控制在約 60 字寬
   - 次要照片（工地/草圖/圖面）用緊密的多欄拼貼，滑過才顯示說明
   - 地圖用真實可辨識的地形輪廓 + 定位點，不是抽象線條
   ============================================================ */

:root{
  --ink:#f2f2f2;
  --ink-soft:#8c8c8c;
  --paper:#0a0a0a;
  --paper-deep:#1c1c1c;
  --gutter:32px;
  --side:6vw;
  --measure:62ch;
}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  /* 依「CSS 視窗寬度」微幅放大字級：高解析度筆電螢幕在系統縮放
     100% 時，CSS 寬度會回報成物理像素寬（例如 3840px），導致所有
     rem 字級實際顯示得比一般螢幕小很多。這裡加一點 vw 補償，讓
     字級不完全依賴使用者的系統縮放設定。一般 1400~1920px 螢幕維持
     接近原本的 16px，超寬/超高解析度螢幕會自動放大到最多 22px。 */
  font-size:clamp(16px, 0.32vw + 11.5px, 22px);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Serif TC",Georgia,"PingFang TC",serif;
  font-weight:400;
  line-height:1.7;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
}
/* Google 網頁翻譯小工具：隱藏它自己會加的頂端提示列跟醒目標記，
   翻譯後的頁面看起來要跟原本一樣，只有文字被換掉。iframe.skiptranslate
   是 Google 這個小工具所有 UI 元件共用的 class（另外那個內部的
   VIpgJd-... 之類的 class 名稱是它自動產生、隨版本變動的，不可靠） */
iframe.skiptranslate,
#goog-gt-tt,
.goog-tooltip:hover{ display:none !important; visibility:hidden !important; }
body{ top:0 !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }

a{color:inherit;text-decoration:none;}
p{margin:0 0 1.3em;}
p:last-child{margin-bottom:0;}
img,video{display:block;max-width:100%;}
button{font-family:inherit;}

/* ---------- 12-column grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);
  max-width:1680px;
  margin:0 auto;
  padding:0 var(--side);
}
.c-12{grid-column-end:span 12;min-width:0;}
.c-10{grid-column-end:span 10;min-width:0;}
.c-9{grid-column-end:span 9;min-width:0;}
.c-8{grid-column-end:span 8;min-width:0;}
.c-7{grid-column-end:span 7;min-width:0;}
.c-6{grid-column-end:span 6;min-width:0;}
.c-5{grid-column-end:span 5;min-width:0;}
.c-4{grid-column-end:span 4;min-width:0;}
.c-3{grid-column-end:span 3;min-width:0;}
.s-2{grid-column-start:2;}
.s-3{grid-column-start:3;}
.s-4{grid-column-start:4;}
.s-5{grid-column-start:5;}
.s-6{grid-column-start:6;}
.s-7{grid-column-start:7;}
.s-9{grid-column-start:9;}

/* ---------- placeholder image blocks ---------- */
.ph{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  /* .ph 本來是給沒有照片的佔位色塊用的，但 hero 大圖無論有沒有真的照片
     都共用這個 class；沒有 object-fit 的話，真的照片會被 width:100%/
     height:100% 逼著整張拉伸變形去塞滿 16:9 框，而不是等比例裁切
     （縮圖／版面其他地方的真實照片都是各自設定 aspect-ratio，不會共用
     到這個 class，只有 hero 這裡例外，所以只需要在這裡補上就好）。 */
  object-fit:cover;
}
.ph[data-ph="1"]{background:linear-gradient(155deg,#dcdcdc,#a8a8a8);}
.ph[data-ph="2"]{background:linear-gradient(155deg,#d4d4d4,#9c9c9c);}
.ph[data-ph="3"]{background:linear-gradient(155deg,#e0e0e0,#b0b0b0);}
.ph[data-ph="4"]{background:linear-gradient(155deg,#cfcfcf,#949494);}
.ph[data-ph="5"]{background:linear-gradient(155deg,#d8d8d8,#a4a4a4);}
.ph[data-ph="6"]{background:linear-gradient(155deg,#d2d2d2,#989898);}
.ph[data-ph="7"]{background:linear-gradient(155deg,#dedede,#acacac);}
.ph[data-ph="8"]{background:linear-gradient(155deg,#cacaca,#909090);}
.ph[data-ph="9"]{background:linear-gradient(155deg,#d6d6d6,#a0a0a0);}
.ph[data-ph="sketch"]{background:#f0f0f0;}
.ph[data-ph="drawing"]{background:#f7f7f7;}

/* ---------- 進站遮罩 ----------
   z-index 蓋過 sticky header（1000）跟選單/語言下拉（1001），確保頁面
   還沒準備好的時候擋住一切，包括頂部導覽列本身。跟主網站 IntroLoader.tsx
   同一支影片，外層背景也跟那邊一樣是黑色（影片畫面本身才是白底，外層
   背景只在影片還沒開始畫面的第一瞬間看得到）。 */
#page-loading-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .6s ease;
}
#page-loading-overlay.is-hidden{opacity:0;pointer-events:none;}
.page-loading-overlay__video{
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (prefers-reduced-motion:reduce){
  .page-loading-overlay__video{display:none;}
  #page-loading-overlay{background:#fff;}
}

/* ---------- header / footer ----------
   Kept in sync by hand with the main site's Header.tsx/Footer.tsx
   (as-studio001.github.io/asarch/) — same glass panels, hamburger menu
   content, logo, language switcher, and footer contact block. Colors are
   the same oklch values Header.tsx/Footer.tsx use inline.
   position:sticky (not fixed) so it stays in the flow at the top and never
   needs a compensating padding-top on <main> — it just pins once the page
   scrolls past it. z-index must be set explicitly here: .hero-photo's .ph
   is position:relative with no z-index of its own, so without an explicit
   z-index the header and the hero image both sit at the "auto" stacking
   level and DOM order (hero comes after the header) would let the hero
   photo paint over the pinned header — including the hamburger dropdown. */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 40px;
  position:sticky;
  top:0;
  z-index:1000;
}
/* 這個 pill 原本用 backdrop-filter:blur(12px) 做玻璃感，在標題文字沒有
   固定位置、很快就滾出畫面時沒問題；header 改成 position:sticky（一路
   固定在畫面上）之後，這片模糊會疊在整個捲動中的大圖／內文上方持續
   重新運算，這正是「進入案例內頁很卡」的原因——改用不透明的深色實色
   取代模糊，效果一樣看得清楚文字，但不用每一幀都重新計算模糊。 */
.site-header__left{
  display:flex;
  align-items:center;
  gap:20px;
  padding:16px 24px;
  border-radius:8px;
  background-color:oklch(0.15 0 0 / 0.82);
}
.site-header__right{
  display:flex;
  align-items:center;
  gap:32px;
  padding:16px 24px;
  border-radius:8px;
  background-color:oklch(0.15 0 0 / 0.15);
}
.site-menu{position:relative;}
.site-menu-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:36px;
  height:36px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.site-menu-btn span{display:block;width:22px;height:2px;background:#fff;}
.site-menu__dropdown,.site-lang__dropdown{
  position:absolute;
  top:100%;
  margin-top:8px;
  overflow:hidden;
  border-radius:8px;
  background-color:oklch(0.12 0 0);
  border:1px solid oklch(0.25 0 0);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  z-index:1001;
}
.site-menu__dropdown{left:0;width:300px;}
.site-lang__dropdown{right:0;min-width:140px;}
.site-menu__dropdown a{
  display:block;
  padding:12px 16px;
  font-size:14px;
  color:#fff;
  border-bottom:1px solid oklch(0.2 0 0);
  transition:background-color .2s;
  font-family:"Noto Sans TC",sans-serif;
}
.site-menu__dropdown a:last-child{border-bottom:none;}
.site-menu__dropdown a:hover{background-color:rgba(255,255,255,.1);}
.site-menu__dropdown .ch-prefix {
  font-size: 0.85em;
  color: #888;
  margin-right: 4px;
}
.site-menu__dropdown hr.menu-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0px 0px;
}
.site-logo{display:flex;align-items:center;gap:12px;}
.site-logo__img{width:36px;height:36px;display:block;}
.site-logo__text{
  font-size:16px;
  color:#fff;
  letter-spacing:.1em;
  font-family:"Noto Serif TC",serif;
}
.site-lang{position:relative;}
.site-lang-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  padding:0;
}
.site-lang__dropdown button{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 14px;
  font-size:13px;
  border:none;
  background:none;
  color:#fff;
  font-weight:400;
  cursor:pointer;
  font-family:"Noto Sans TC",sans-serif;
  transition:background-color .2s;
}
.site-lang__dropdown button.active{font-weight:700;}
.site-lang__dropdown button:hover{background-color:rgba(255,255,255,.1);}

.site-footer{
  padding:80px 40px;
  background-color:oklch(0.12 0 0);
  margin-top:5rem;
}
.site-footer__inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}
.site-footer__contact p,.site-footer__address p{
  margin:0 0 8px;
  font-size:14px;
  color:oklch(0.7 0 0);
}
.site-footer__contact p:last-child,.site-footer__address p:last-child{margin-bottom:0;}
.site-footer__contact a{color:oklch(0.7 0 0);transition:opacity .2s;}
.site-footer__contact a:hover{opacity:.7;}
.site-footer__social{display:flex;align-items:center;gap:16px;}
.site-footer__social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background-color:oklch(0.25 0 0);
  color:oklch(0.95 0 0);
  transition:opacity .2s;
}
.site-footer__social a:hover{opacity:.7;}
/* 齒輪（後台管理）跟社群圖示放在同一排，但顏色壓低一點，跟真正對外的
   社群連結有點區隔——這是給管理者用的入口，不是訪客會想點的東西 */
.site-footer__admin-link{background-color:transparent !important;color:oklch(0.4 0 0) !important;}
.site-footer__admin-link:hover{opacity:.7;color:oklch(0.7 0 0) !important;}

/* ---------- page head：純文字，不疊圖 ---------- */
.page-head{padding-top:2.5rem;padding-bottom:3rem;row-gap:1rem;}
.eyebrow{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}
.page-head h1{
  margin:0;
  font-size:clamp(2.4rem,5.2vw,4.6rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.01em;
  font-family:"Noto Serif TC",serif;
}
.page-head .lede-meta{
  margin:0;
  font-size:1.05rem;
  color:var(--ink-soft);
}

/* ---------- hero photo：全幅大圖，接在標題文字之後 ---------- */
.hero-photo{width:100%;}
.hero-photo .ph{aspect-ratio:16/9;}

/* ---------- 設計研究／施工過程／圖面收合區塊：預設收起，
   點「+ More in Detail」展開，三個子區塊排在同一個面板裡 ---------- */
.detail-section{padding:1.5rem 0 4rem;border-top:1px solid rgba(255,255,255,.15);}
.detail-toggle{
  display:flex;
  align-items:center;
  gap:1rem;
  background:var(--ink);
  border:none;
  border-radius:.6rem;
  padding:1rem 1.6rem;
  margin:0;
  color:var(--paper);
  cursor:pointer;
}
.detail-toggle__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  font-size:1.4rem;
  line-height:1;
  transition:transform .2s ease;
}
.detail-toggle[aria-expanded="true"] .detail-toggle__icon{transform:rotate(45deg);}
.detail-toggle__label{
  font-family:"Noto Sans TC",sans-serif;
  font-weight:700;
  font-size:clamp(.9rem,1.4vw,1.05rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--paper);
}
.detail-panel{margin-top:2rem;}
.detail-panel__group{padding-top:1.5rem;}
.detail-panel__group:first-child{padding-top:0;}
/* 照片區／圖面區可能其中一區是 hidden（例如常見的「只有圖面、沒有
   照片」）——用 :not([hidden]) 而不是單純的相鄰選擇器，這樣分隔線只會
   出現在兩區「真的都有內容顯示」的時候，不會因為前面那區隱藏了、還是
   在第二區上面憑空冒出一條線。 */
.detail-panel__group:not([hidden]) ~ .detail-panel__group:not([hidden]){border-top:1px solid rgba(255,255,255,.1);}

/* ---------- section label：靠左標題，緊接內容，不留側邊空欄 ---------- */
.section-label{
  font-size:.95rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 .6rem;
  font-family:"Noto Serif TC",serif;
  font-weight:700;
}

/* ---------- editorial content blocks ---------- */
/* 段落與照片自動交錯，由陣列長度算出結果，不需要手動指定版型：
   文字永遠固定在同一個欄位（c-6 s-7，跟引言同欄位，照 Snøhetta 實際頁面
   的做法），不論前後接哪種照片排列都不會跳動；照片跟文字位置脫鉤，
   統一頂到內縮後的邊緣（c-12），2～3 張一組時寬度不平均＋上下錯開
   製造錯落感，落單的 1 張獨立成一排 */
.content{padding-top:4rem;padding-bottom:3rem;row-gap:3rem;}
/* 只做透明度淡入，不做位移——位移淡入若剛好卡在動畫中途被截到畫面，
   會讓圖片跟文字的間距看起來忽大忽小（曾經真的發生過） */
.block{opacity:0;transition:opacity .7s ease;}
.block.in-view{opacity:1;}

.block--text p{font-size:.95rem;font-family:"Noto Sans TC",sans-serif;}

/* 細節資訊是單一文字區塊；white-space:pre-line 保留使用者輸入的換行，
   但不會把每一行變成獨立的段落。 */
.details-info{padding:0 0 3rem;}
.details-info__text{font-size:.95rem;font-family:"Noto Sans TC",sans-serif;white-space:pre-line;}

/* 已修正：同一排照片各自維持真實比例，高度天生不一定一樣（例如直幅照片
   配全景照，高度差很多）。原本 align-items:start 會讓矮的那張上緣對齊、
   下面留一大塊空白，跟下一排內容中間卡一段死白；改成 align-items:end
   讓這排統一「底部切齊」，矮的貼齊高的下緣，不會有懸空留白。 */
.block--photos{display:grid;gap:1.25rem;align-items:end;}
/* 已修正：連續兩排照片中間沒有文字隔開時，兩排都底部切齊的話，矮的那張
   會在「整排上方」留白，卡在前一排下緣跟這一排矮圖之間，看起來像莫名其妙
   的死白。js/render.js 的 applyRowAlignment() 會在這種情況幫第二排加這個
   class，改成頂部切齊——兩排矮的那張因此都貼向彼此中間的接縫，留白被推
   到最外側（原本就緊接段落文字的地方），不會卡在兩排照片正中間。 */
.block--photos--align-start{align-items:start;}
.block--photos .ph{height:auto;aspect-ratio:4/3;}
/* 連續直幅照片（2～3 張）：等寬等高並排，不做大小不一 */
.block--photos--portrait .ph{aspect-ratio:3/4;}
/* 混合方向（落單照片併組後的結果）：比例由 JS 依每張圖各自設定，這裡只需讓出 height */
.block--photos--mixed .ph{height:auto;}

.block--solo .ph{height:auto;aspect-ratio:16/9;}

/* ---------- 外部網站：網址+封面圖都有才顯示，16:9 封面（跟主視覺大圖
   同一種裁切比例／後台可拖曳調整），不顯示網址文字，右下角一個小箭頭
   圓鈕當作「這是外部連結」的提示就好 ---------- */
.external-link-section{
  width:100%;
  padding:3rem 0 4rem;
}
.external-link-section__label{
  margin:0 0 1.5rem;
  padding:0 var(--side);
  font-size:.95rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  font-family:"Noto Serif TC",serif;
  font-weight:700;
}
.external-link-section__canvas{
  display:block;
  position:relative;
  aspect-ratio:16/9;
  width:60%;
  margin:0 auto;
  overflow:hidden;
  background:#000;
}
.external-link-section__canvas .external-link-section__cover{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.external-link-section__canvas:hover .external-link-section__cover{transform:scale(1.03);}
.external-link-section__arrow{
  position:absolute;
  right:1.25rem;
  bottom:1.25rem;
  z-index:1;
  width:2.2rem;
  height:2.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:1.15rem;
  pointer-events:none;
  transition:transform .2s ease, background-color .2s ease;
}
.external-link-section__canvas:hover .external-link-section__arrow{transform:translate(2px,-2px);background:rgba(0,0,0,.75);}
/* ---------- 影音：選填，排在網站之後、位置之前，沒填就整個 hidden ---------- */
.video-section{
  width:100%;
  padding:3rem 0;
}
.video-section .section-label{padding:0 var(--side);}
.video-embed{
  position:relative;
  width:60%;
  margin:0 auto;
  aspect-ratio:16/9;
  background:#000;
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-embed__fullscreen{
  position:absolute;
  right:1.25rem;
  bottom:1.25rem;
  z-index:1;
  width:2.2rem;
  height:2.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;
  transition:background-color .2s ease;
}
.video-embed__fullscreen:hover{background:rgba(0,0,0,.8);}

/* ---------- map：標題在地圖之前、座標地址在地圖之下，都是正常文件流，
   不再疊在地圖圖片上 ---------- */
.map-full{
  width:100%;
  padding:3rem 0 4rem;
  background:var(--paper);
}
.map-full__label{
  margin:0 0 1.5rem;
  padding:0 var(--side);
  font-size:.95rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  font-family:"Noto Serif TC",serif;
  font-weight:700;
}
.map-full__canvas{
  position:relative;
  height:60vh;
  min-height:400px;
  margin:0 var(--side);
}
.map-full__info{
  margin-top:1.5rem;
  padding:0 var(--side);
}
.map-full__canvas .leaflet-tile{
  filter:saturate(.95) contrast(1.12) brightness(.8) hue-rotate(15deg);
}
.map-full__canvas::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:500;
  pointer-events:none;
  background:rgba(40,80,150,.18);
  mix-blend-mode:overlay;
}
.map-full__canvas .leaflet-control-attribution{
  font-size:.62rem;
  background:rgba(10,10,10,.55);
  color:#ccc;
}
.map-full__canvas .leaflet-control-attribution a{color:#fff;}

/* 定位圖標：照 RSHP 專案地圖的水滴形橘色 marker */
.site-pin{position:relative;width:34px;height:46px;}
.site-pin__drop{
  position:absolute;
  top:0;left:5px;
  width:24px;height:24px;
  background:#f2793d;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.site-pin__shadow{
  position:absolute;
  bottom:1px;left:11px;
  width:14px;height:5px;
  border-radius:50%;
  background:rgba(0,0,0,.3);
  filter:blur(1.5px);
}
.site-pin__ring{
  position:absolute;
  top:6px;left:6px;
  width:12px;height:12px;
  border-radius:50%;
  background:#fff;
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(242,121,61,.5);}
  100%{box-shadow:0 0 0 18px rgba(242,121,61,0);}
}
.map__address{margin:0 0 .3rem;font-size:1.02rem;font-family:"Noto Sans TC",sans-serif;}
.map__coords{margin:0;font-size:.82rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-family:"Noto Sans TC",sans-serif;}

/* ---------- More in Detail：「照片」是 Pinterest 風格純照片圖庫——保留
   每張照片原始比例（不裁切），欄數依畫面寬度決定（render.js 的
   detailGalleryColumns()），貪婪演算法把每張照片依序丟進目前最矮的一
   欄，欄與欄之間的柱狀交錯是 masonry 排列本來就有的樣子。「圖面」另外
   用固定網格（見下面 .detail-drawing-grid）——CAD／平面圖匯出的圖檔
   四周留白比例常常差很多，拿masonry去排反而七零八落。兩區都一樣：
   不顯示文字說明，只有滑鼠移到照片上才浮現圖說。 ---------- */
.detail-gallery__masonry{display:flex;gap:12px;align-items:flex-start;width:100%;}
.detail-gallery__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px;}
.detail-gallery__item{position:relative;cursor:pointer;overflow:hidden;margin:0;}
.detail-gallery__item img,
.detail-gallery__item video,
.detail-gallery__item .ph{display:block;width:100%;height:auto;}
.detail-gallery__item figcaption,
.detail-drawing-grid__item figcaption{
  position:absolute;inset:0;
  display:flex;
  align-items:flex-end;
  padding:1rem;
  background:linear-gradient(to top, rgba(0,0,0,.7), transparent 55%);
  color:#fff;
  font-size:.82rem;
  font-family:"Noto Sans TC",sans-serif;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.detail-gallery__item:hover figcaption,
.detail-drawing-grid__item:hover figcaption{opacity:1;}

/* 圖面：固定大小的網格，比例不合的圖用 object-fit:contain 整張縮小
   塞進格子（不裁切——裁掉一角平面圖／立面圖就看不出完整內容），格子
   給淺色背景#eeebe3(改成黑色背景)，扁的或窄的圖不會看起來像缺了一塊。格子最小寬度拉大到
   380px（原本 220px 太小，平面圖上的標註文字幾乎看不清楚）。 */
.detail-drawing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));
  gap:16px;
}
.detail-drawing-grid__item{
  position:relative;
  aspect-ratio:4/3;
  cursor:pointer;
  overflow:hidden;
  margin:0;
  background:#0a0a0a;
}
.detail-drawing-grid__item img,
.detail-drawing-grid__item video,
.detail-drawing-grid__item .ph{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;
  background:rgba(10,10,10,.95);
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  /* 要蓋過 sticky header（1000）跟它的選單/語言下拉（1001）——header
     加上 position:sticky 之後這裡沒跟著調高，導致燈箱開著時右上角的
     語言切換圖示會疊在燈箱自己的關閉按鈕上面，變成一個奇怪的複合圖示 */
  z-index:2100;
  padding:5vh 5vw;
}
.lightbox.open{display:flex;}
.lightbox__img{max-height:78vh;max-width:100%;object-fit:contain;background:#1c1c1c;}
.lightbox__caption{color:#eee;font-size:.85rem;margin-top:1.2rem;font-family:"Noto Sans TC",sans-serif;}
.lightbox__close{
  position:absolute;top:2rem;right:2.5rem;
  background:none;border:none;color:#fff;
  font-size:2rem;line-height:1;cursor:pointer;
}
.lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:#fff;
  font-size:3rem;
  line-height:1;
  padding:.5rem 1rem;
  cursor:pointer;
  opacity:.7;
  transition:opacity .2s ease;
}
.lightbox__nav:hover{opacity:1;}
.lightbox__nav--prev{left:1rem;}
.lightbox__nav--next{right:1rem;}
@media (max-width:900px){
  .lightbox__nav{font-size:2.2rem;padding:.4rem .6rem;}
  .lightbox__nav--prev{left:.25rem;}
  .lightbox__nav--next{right:.25rem;}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(4,1fr);}
  .c-3,.c-4,.c-5,.c-6,.c-7,.c-8,.c-9,.c-10,.c-12{grid-column-start:1;grid-column-end:span 4;}
  .s-2,.s-3,.s-4,.s-5,.s-6,.s-7,.s-9{grid-column-start:1;}
  .block--photos{grid-template-columns:1fr !important;}
  .map-full__canvas{height:60vh;min-height:360px;}
  .map-full__info{right:var(--side);}

  /* logo 中文字在窄螢幕上會被容器擠到換行（原型建/築），手機版直接
     不換行，寧可跟旁邊元件靠近一點，也不要案名還沒開始讀者就先看到
     一個字被腰斬的 logo */
  .site-header{padding:16px 20px;}
  .site-header__left,.site-header__right{padding:10px 14px;gap:12px;}
  .site-logo__text{white-space:nowrap;font-size:14px;}
}