/* ══════════════════════════════════════════════
   CASE.CSS
   Case Header / Section Header / Before-After / Case Overview /
   Process / Process Clips / Restoration Record /
   Video / Case Page 專屬 responsive 規則
   ══════════════════════════════════════════════ */

/* ── CASE HEADER ── */
.case-header{
  padding:2.5rem var(--page-pad) 4rem;
}
.case-header .inner{
  display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:end;
}
.case-header-index{
  font-family:var(--sans);font-size:12px;letter-spacing:0.32em;
  color:var(--text-secondary);writing-mode:vertical-rl;align-self:start;padding-top:0.4rem;
  opacity:0.65;
}
.case-header-content{}
.case-header-eyebrow{
  font-family:var(--sans);font-size:12px;letter-spacing:0.36em;
  color:var(--accent-celadon);display:block;margin-bottom:1rem;
}
.case-header h1{
  font-family:var(--serif);font-size:clamp(1.7rem,3.5vw,2.6rem);
  font-weight:300;color:var(--text-primary);letter-spacing:0.1em;line-height:1.45;margin-bottom:1.4rem;
}
.case-header-badges{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:2rem}
.case-header-accent{
  display:block;width:48px;height:1px;
  background:linear-gradient(to right,var(--accent-celadon),transparent);
}

/* ── CASE HEADER BADGES ──
   覆蓋 components.css 的 .badge / .badge-collection / .badge-content（該檔不動）。
   只調整字級與 color / background / border-color；padding、尺寸、圓角結構沿用原規則。
   Collection：安靜、中性的資料屬性。Content：克制、帶青釉識別。 */
.badge{
  font-size:13px;
}
.badge-collection{
  color:var(--text-body);
  background:var(--surface-raised);
  border-color:var(--divider-default);
}
.badge-content{
  color:var(--accent-celadon);
  background:transparent;
  border-color:var(--accent-celadon-border);
}

/* Content Badge 為頁內 Anchor（<a class="badge badge-content">）。
   外觀沿用上方 .badge-content，不重新設計為 Button；Collection Badge 仍為 <span>，不受影響。
   這裡只補：去除預設 underline，以及克制的 hover / focus-visible / active 回饋。
   不新增色彩、不加陰影／浮起／scale，字級、padding、基本 border 一律沿用。
   狀態規則明確重申 color，避免被全站 a:hover 類規則蓋掉。 */
a.badge-content{
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color 0.3s ease,opacity 0.3s ease;
}
/* hover：邊線由 accent-celadon-border 加深為 accent-celadon（僅限支援 hover 的裝置，避免觸控後殘留） */
@media (hover:hover){
  a.badge-content:hover{
    color:var(--accent-celadon);
    border-color:var(--accent-celadon);
    text-decoration:none;
  }
}
/* focus-visible：鍵盤聚焦時邊線加深＋ 1px 細外框；滑鼠點擊不會觸發 */
a.badge-content:focus-visible{
  color:var(--accent-celadon);
  border-color:var(--accent-celadon);
  outline:1px solid var(--accent-celadon);
  outline-offset:2px;
  text-decoration:none;
}
/* tap / active：按下時淡出（與 .contact-cta-channel 的 opacity 回饋一致） */
a.badge-content:active{
  color:var(--accent-celadon);
  border-color:var(--accent-celadon);
  opacity:0.65;
}

/* ── SECTION HEADER（Case 內文區塊標題）— Variant 3 ──
   覆蓋 components.css 的 .block-header 排列（該檔不動）：
   單行「中文標題　英文 eyebrow　rule」。HTML 順序為 eyebrow → title → rule，故以 order 重排。
   title / eyebrow 不換行、不縮小；rule 沿用 components.css 的 flex:1 吸收剩餘寬度。
   typography、顏色、rule 線條樣式與 margin-bottom 皆沿用 components.css，不在此改動。
   Contact CTA 不使用 .block-header，不受影響。 */
.block-header{
  gap:1rem;
}
.block-title{
  order:1;
  white-space:nowrap;
  flex-shrink:0;
}
.block-eyebrow{
  order:2;
  flex-shrink:0;
}
.block-rule{
  order:3;
}
/* 極窄螢幕（≤340px）：僅縮小 gap，避免中文 / 英文溢出；rule 隨之縮短。360–414px 不受影響。 */
@media (max-width:340px){
  .block-header{
    gap:0.5rem;
  }
}

/* ── BEFORE / AFTER ── */
.ba-section{padding:4.5rem var(--page-pad) 5rem;background:var(--surface-raised)}
.ba-wrap{
  position:relative;aspect-ratio:4/3;overflow:hidden;max-width:900px;margin:0 auto;
  cursor:ew-resize;user-select:none;-webkit-user-select:none;
}
.ba-after{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.ba-after img{width:100%;height:100%;object-fit:cover;display:block}
.ba-before{position:absolute;inset:0;height:100%;overflow:hidden;width:50%}
.ba-before img{width:900px;max-width:900px;height:100%;object-fit:cover;display:block}
.ba-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-raised);
}
.ba-placeholder svg{width:30%;max-width:180px;height:auto;opacity:0.3}

/* Divider line */
.ba-divider{
  position:absolute;top:0;bottom:0;left:50%;
  width:1px;background:var(--divider-ba);
  transform:translateX(-50%);
  pointer-events:none;z-index:10;
}

/* Handle */
.ba-handle{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:32px;height:32px;
  pointer-events:none;z-index:12;
  display:flex;align-items:center;justify-content:center;
}
.ba-handle-logo{
  width:32px;height:32px;
  object-fit:contain;
  display:block;
  opacity:0.82;
  filter:drop-shadow(0 0 3px var(--interact-overlay-soft));
  transition:opacity 0.7s ease;
}
.ba-wrap.ba-interacted .ba-handle-logo{
  opacity:0.38;
}

/* Label anchor */
.ba-label-wrap{
  position:absolute;top:50%;left:50%;
  transform:translateY(-50%);
  pointer-events:none;z-index:13;
}
.ba-label{
  position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:0.68rem;letter-spacing:0.25em;
  pointer-events:none;white-space:nowrap;
  transition:opacity 0.7s ease;
  opacity:1;
  text-shadow:
    0 1px 4px var(--interact-overlay-mid),
    0 0 12px var(--interact-overlay-faint);
  color:var(--text-on-image);
}
.ba-label-before{
  right:0;
  padding-right:2.4rem;
}
.ba-label-after{
  left:0;
  padding-left:2.4rem;
}
.ba-wrap.ba-interacted .ba-label{opacity:0.34;}

.ba-hint{display:none}

@media(max-width:560px){
  .ba-label{font-size:0.62rem;letter-spacing:0.22em;}
}

/* ── DAMAGE ILLUSTRATION（保密案例專用；Before/After 替代方案）──
   用於「委託保密」案例：不顯示 BA，改以損傷示意圖＋圖例＋保密說明呈現。
   沿用既有變數／字體／spacing，僅新增本 Component 專屬 class，
   不修改既有 H1、共用 CSS 或其他 Component。 */
.damage-illustration-section{padding:4.5rem var(--page-pad) 5rem;background:var(--surface-raised)}
.damage-illustration-wrap{
  display:flex;
  gap:3rem;
  align-items:flex-start;
}
.damage-illustration-image{
  flex:0 0 640px;
  max-width:640px;
}
.damage-illustration-image img{
  width:100%;
  height:auto;
  display:block;
}
.damage-illustration-info{
  flex:1;
  min-width:0;
  padding-top:0.5rem;
}
.damage-illustration-legend-title{
  font-family:var(--sans);font-size:0.64rem;letter-spacing:0.3em;
  color:var(--accent-celadon);display:block;margin-bottom:1.2rem;
}
.damage-illustration-legend-item{
  display:flex;align-items:center;gap:0.7rem;
  margin-bottom:0.7rem;
  font-family:var(--sans);font-size:0.72rem;letter-spacing:0.08em;
  color:var(--text-body);
}
.damage-illustration-legend-item:last-child{margin-bottom:0}
.damage-illustration-swatch{
  width:20px;height:20px;flex-shrink:0;display:inline-block;
  border:1px solid var(--text-secondary);
  background:transparent;
}
.damage-illustration-swatch--damage{
  border-color:#C0392B;
  background:repeating-linear-gradient(135deg,#C0392B,#C0392B 2px,transparent 2px,transparent 5px);
  opacity:0.85;
}
.damage-illustration-confidential{
  margin-top:2.2rem;
  padding-top:2.2rem;
  border-top:1px solid var(--divider-default);
}
.damage-illustration-confidential-title{
  font-family:var(--serif);font-size:0.95rem;font-weight:400;
  color:var(--text-primary);letter-spacing:0.12em;
  display:block;margin-bottom:0.8rem;
}
.damage-illustration-confidential p{
  font-family:var(--sans);font-size:0.72rem;letter-spacing:0.06em;
  color:var(--text-secondary);line-height:2.0;
  max-width:40ch;
}
@media(max-width:900px){
  .damage-illustration-wrap{flex-direction:column;gap:1.25rem}
  .damage-illustration-image{flex-basis:auto;max-width:100%}
  .damage-illustration-info{padding-top:0}
  .damage-illustration-legend-title{margin-bottom:0.7rem}
  .damage-illustration-legend-item{margin-bottom:0.45rem}
  .damage-illustration-confidential{margin-top:1.3rem;padding-top:1.1rem}
  .damage-illustration-confidential-title{margin-bottom:0.5rem}
}
@media(max-width:560px){
  .damage-illustration-section{padding:3rem var(--page-pad) 4rem}
}

/* ── CASE OVERVIEW ── */
.overview-section{padding:5rem var(--page-pad)}
.overview-summary{
  font-family:var(--sans);font-size:1.0rem;font-weight:300;
  color:var(--text-body);line-height:2;letter-spacing:0.05em;
  max-width:68ch;margin:0;
}
.overview-sup{
  margin-top:2rem;
}
.overview-sup-item{
  display:flex;align-items:baseline;
  margin-bottom:0.55rem;line-height:1.8;
}
.overview-sup-item:last-child{margin-bottom:0}
.overview-sup-label{
  font-family:var(--sans);font-size:14px;letter-spacing:0.18em;
  color:var(--text-body);white-space:nowrap;flex-shrink:0;
  width:5em;
}
.overview-sup-sep{
  font-size:0.64rem;color:var(--text-body);
  margin:0 0.5rem;flex-shrink:0;
}
.overview-sup-val{
  font-family:var(--sans);font-size:14px;letter-spacing:0.1em;
  color:var(--text-body);line-height:1.8;
}

/* ── PROCESS ── */
.process-section{padding:5rem var(--page-pad);background:var(--surface-raised)}
.process-photos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem 2.8rem;
}
.process-photos.count-2,
.process-photos.count-1{
  grid-template-columns:repeat(3,1fr);
}
.process-photo-item{
  display:flex;flex-direction:column;
}
.process-photo-frame{
  aspect-ratio:4/3;background:var(--ash);overflow:hidden;
  margin-bottom:1.2rem;flex-shrink:0;
}
.process-photo-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.process-photo-item:hover .process-photo-frame img{transform:scale(1.03)}
.process-photo-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-base);
}
.process-photo-placeholder svg{width:30%;height:auto;opacity:0.2}
.process-photo-title{
  font-family:var(--sans);font-size:16px;font-weight:400;
  color:var(--text-body);letter-spacing:0.1em;line-height:1.7;
  margin-bottom:0;
}
.process-photo-desc{
  font-family:var(--sans);font-size:14px;letter-spacing:0.1em;
  color:var(--text-body);line-height:1.7;
}

/* ── PROCESS CLIPS ── */
.process-clips{margin-top:4rem}
.process-clips-label{
  font-family:var(--sans);font-size:0.64rem;letter-spacing:0.3em;
  color:var(--accent-celadon);margin-bottom:1.4rem;display:block;
}
.clip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.clip-item{position:relative;cursor:pointer}
.clip-thumb{
  aspect-ratio:16/9;background:var(--surface-dark);overflow:hidden;position:relative;
}
.clip-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0.75;transition:opacity 0.35s}
.clip-item:hover .clip-thumb img{opacity:0.9}
.clip-thumb-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-ink-deep);
}
.clip-thumb-placeholder svg{width:28%;height:auto;opacity:0.2}
.clip-play-btn{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:5;
}
.clip-play-circle{
  width:52px;height:52px;border-radius:50%;
  background:var(--interact-play-btn);
  backdrop-filter:blur(6px);
  border:1px solid var(--interact-play-btn-border);
  display:flex;align-items:center;justify-content:center;
  transition:background 0.3s,transform 0.3s;
}
.clip-item:hover .clip-play-circle{background:var(--accent-celadon-border);transform:scale(1.06)}
.clip-play-circle svg{width:18px;height:18px;fill:var(--surface-base);margin-left:3px}
.clip-source-tag{
  position:absolute;bottom:0.6rem;right:0.6rem;z-index:6;
  font-family:var(--sans);font-size:0.56rem;letter-spacing:0.14em;
  color:var(--text-on-image-muted);
  background:var(--interact-overlay-mid);
  padding:0.2rem 0.55rem;backdrop-filter:blur(4px);
}
.clip-caption{
  font-family:var(--sans);font-size:14px;letter-spacing:0.14em;
  color:var(--text-body);margin-top:0.7rem;line-height:1.8;
}
.clip-video-layer{
  display:none;position:absolute;inset:0;z-index:10;background:var(--surface-dark);
}
.clip-video-layer.active{display:block}
.clip-video-layer video{width:100%;height:100%;object-fit:contain;background:var(--surface-dark)}
.clip-close-btn{
  position:absolute;top:0.5rem;right:0.6rem;z-index:11;
  background:var(--interact-overlay-dark);
  border:none;cursor:pointer;
  font-family:var(--sans);font-size:0.64rem;letter-spacing:0.14em;
  color:var(--text-on-image-muted);
  padding:0.3rem 0.6rem;
  transition:color 0.3s;
}
.clip-close-btn:hover{color:var(--text-on-dark)}

/* ── RESTORATION RECORD ── */
.narrative-section{padding:5rem var(--page-pad)}
.narrative-text{
  font-family:var(--sans);font-size:0.98rem;color:var(--text-body);
  line-height:2;letter-spacing:0.05em;
  max-width:68ch;
}
.narrative-text p{margin-bottom:1.9em}
.narrative-text p:last-child{margin-bottom:0}
.narrative-text::before{
  content:'';display:block;width:32px;height:1px;
  background:linear-gradient(to right,var(--accent-celadon),transparent);
  margin-bottom:2rem;
}

/* ── VIDEO ── */
.video-section{padding:5rem var(--page-pad);background:var(--surface-raised)}
.video-section .clip-grid{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.clip-grid.count-1{
  grid-template-columns:1fr;
}
.video-container{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  max-width:900px;margin:0 auto;background:var(--surface-dark);
}
.video-container iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;
  border:none;
}

/* ── VIDEO COMPONENT（video-stack）──
   統一管理 Video Section 內 MP4／YouTube 的寬度與垂直間距。
   .video-stack   → 元件容器，統一最大寬度 900px 並置中
   .video-item    → 單一影片單位（含 MP4 說明文字／YouTube），
                    間距一律從 .video-item 完整底部計算，
                    不從影片畫面本身計算
   .video-item--clip     → 內含 MP4（.clip-grid / .clip-item）
   .video-item--youtube  → 內含 YouTube（.video-container）

   註：.clip-grid、.clip-item、.video-container 為既有共用 class，
       仍供 Process Clips 等其他區塊使用，此處僅新增更具體的
       選擇器覆寫，不改動原本的通用規則。
*/
.video-stack{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.video-stack .video-item + .video-item{
  margin-top:4rem;
}

/* MP4 item：統一單支影片寬度為 900px（16:9），不受 Grid 欄數規則縮窄 */
.video-item--clip .clip-grid{
  grid-template-columns:1fr;
  max-width:none;
  margin:0;
}

/* YouTube item：寬度已由 .video-container 統一為 900px，此處僅重置間距 */
.video-item--youtube .video-container{
  margin:0;
}

/* ── ANCHOR NAVIGATION（Content Badge 頁內跳轉）──
   Header 的 Content Badge（修復過程／修復札記／延伸觀看）以 href="#process" /
   "#restoration-record" / "#video" 跳到對應 Section。純 CSS，無 JS。

   Smooth scroll：只在使用者未要求減少動態時啟用。

   scroll-margin-top：Site Nav v2 為 position:sticky（見下方 NAVIGATION v2 註解），
   高度約 68px（desktop）／55px（≤980px mobile）。offset 取這個 unscrolled 高度：
   Nav 捲動後會縮小（.nav-scrolled），所以這個值是上限，Section 頂緣一定停在 Nav 之下。
   Section 本身有 5rem 的 padding-top，Section Header 因此再往下留有完整的呼吸空間，
   不需額外加大 offset。 */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
#process,
#restoration-record,
#video{
  scroll-margin-top:68px;
}
@media (max-width:980px){
  #process,
  #restoration-record,
  #video{
    scroll-margin-top:55px;
  }
}

/* ── CASE PAGE RESPONSIVE ── */
@media(max-width:900px){
  .case-header .inner{grid-template-columns:1fr;gap:1.5rem}
  .case-header-index{writing-mode:horizontal-tb}
  .ba-section{padding:3rem var(--page-pad) 4rem}
  .process-photos{grid-template-columns:repeat(2,1fr)}
  .clip-grid{grid-template-columns:1fr}
  .meta-chip{padding:0.6rem 1.6rem 0.6rem 0;margin-right:1.6rem}
  .video-stack .video-item + .video-item{margin-top:3rem}
}
/* Mobile ≤768px：Case Header 垂直收緊 + Process 圖文間距。
   Desktop Case Header 的 padding / gap / margin 不受影響。 */
@media(max-width:768px){
  .case-header{
    padding-top:1.5rem;
    padding-bottom:2.25rem;
  }
  .case-header .inner{gap:0.5rem}
  .case-header-index{padding-top:0}
  .case-header-eyebrow{margin-bottom:0.5rem}
  .case-header h1{margin-bottom:0.75rem}
  .case-header-badges{margin-bottom:1rem}
  .process-photo-frame{margin-bottom:0.5rem}
}
@media(max-width:560px){
  .process-photos,
  .process-photos.count-1,
  .process-photos.count-2{grid-template-columns:1fr}
  .process-photos.count-2{max-width:100%}
  .ba-wrap{aspect-ratio:1/1}
  .ba-before img{width:100vw;max-width:100vw}
}

/* ══════════════════════════════════════════════
   CONTINUE EXPLORING
   Case Page 專屬區塊，置於 .related-section > .inner 內，
   沿用 .related-section 既有的區塊 padding（見 components.css）。

   資料來源：documentation/Continue Exploring/continue-exploring.json
   （唯一資料來源，見 Continue Exploring Data Standard v1.0）。
   本區塊 HTML 為 Build / Migration-time Rendering 的輸出結果，
   不是推薦關係的資料來源。

   image_type="object"：統一使用已整理完成的橫式 4:3 JPG，以
   Stage 為完整照片視窗，width/height:100% + object-fit:cover +
   object-position:center，保留照片中的器物、手、自然陰影與攝影
   背景。Stage 尺寸與背景維持不變。

   image_type="before" / "detail"：與 object 相同，統一使用
   width/height:100% + object-fit:cover + object-position:center。
   image_type 僅保留策展語義，不控制 fitting。
   大量碎片 Before 可保留既有淡暖灰背景；使用 cover 時允許少量
   非關鍵邊緣碎片被裁切，前提是主要器物資訊與策展意圖完整。

   display_size（"L" | "M" | "S"）仍保留在 continue-exploring.json
   做為中央 metadata，但目前不參與 JPG Object 的 CSS 呈現（不做
   任何尺寸縮放）；如未來要重新啟用，需另行制定規則。

   Stage 比例：統一 4:3（aspect-ratio），desktop／mobile 一致，
   不再使用固定 px 高度。Public（case-card）與 Confidential
   （damage-illustration）共用同一套 Stage／fitting 規則。

   Hover：僅圖片本身輕微放大（scale(1.03)，0.4s ease），Stage
   overflow:hidden 避免放大溢出；卡片本身（.ce-item）不 scale、
   不加陰影或位移，文字／箭頭 hover（.ce-link 變色）維持不變。
   ══════════════════════════════════════════════ */
:root{
  --ce-stage-bg: #F1ECE3;
  --ce-gap: 40px;
  --ce-stage-ratio: 4/3;
}

/* 容器沿用 .related-section > .inner 的頁面寬度／page-pad，不另設 max-width */
.continue-exploring{ width:100%; }

.ce-track{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--ce-gap);
}

.ce-item{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* ---------- image stage ---------- */
.ce-stage{
  width:100%;
  aspect-ratio:var(--ce-stage-ratio);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ce-stage-bg);
  overflow:hidden;
}

/* ---------- fitting（case-card / damage-illustration 統一）----------
   正式規範：Continue Exploring 的 image_type（case-card /
   damage-illustration）一律使用 cover + center，以 Stage 作為完整
   照片視窗；不做去背圖尺寸分級、不做置中位移、不用 mask。
   display_size 目前不影響此規則。data-image-type 僅保留作策展語義
   標記，不控制 fitting，因此不依 data-image-type 分流 cover / contain。

   Hover 放大：僅 .ce-img transform scale(1.03)，0.4s ease；Stage
   overflow:hidden 裁切溢出範圍。 */
.ce-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform 0.4s ease;
}

.ce-item:hover .ce-img{
  transform:scale(1.03);
}

/* ---------- text block: reason -> name -> link ---------- */
.ce-info{ margin-top:20px; }

.ce-reason{
  margin:0 0 6px;
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
  color:var(--text-body);
  font-weight:300;
  letter-spacing:0.05em;
}

.ce-name{
  margin:0 0 10px;
  font-family:var(--serif);
  font-size:19px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:0.07em;
  color:var(--text-primary);
}

.ce-link{
  display:inline-block;
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:0.1em;
  color:var(--accent-celadon);
  border-bottom:1px solid var(--divider-default);
  padding-bottom:2px;
  transition:color 0.3s;
}
.ce-item:hover .ce-link{ color:var(--accent-celadon); }

/* Mobile ≤768px：圖片 ↔ reason 間距（須在 .ce-info 基本規則之後）。 */
@media (max-width:768px){
  .ce-info{ margin-top:10px; }
}

/* =========================================================
   Mobile — horizontal scroll, one item primary, next item
   peeks, scroll-snap, no controls.

   左側不 bleed：.continue-exploring 保留原本在 .inner 內的
   位置（不加 margin-left、.ce-track 不加左側 padding），因此
   第一張卡片左緣自然與 .related-section 既有的 page padding／
   .inner 內容邊界對齊，不會被裁切、也不會突出到 viewport 左側。

   只在右側 bleed：margin-right 抵銷 .related-section 右側的
   page-pad，讓 .ce-track 可以延伸到 viewport 右緣，同時
   scroll-snap + flex-basis 82% 讓下一張卡片在右緣自然「peek」。
   ========================================================= */
@media (max-width:640px){

  .continue-exploring{
    margin-right:calc(var(--page-pad) * -1);
  }

  .ce-track{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-right:var(--page-pad);
    scrollbar-width:none;
  }
  .ce-track::-webkit-scrollbar{ display:none; }

  .ce-item{
    flex:0 0 82%;
    scroll-snap-align:start;
  }
}

/* ══════════════════════════════════════════════
   CONTACT CTA — Tail Prototype (Final)
   Case Page 專屬區塊，取代舊 .cta-band（layout.css 中舊規則
   維持不動，供尚未 migrate 的 29 個案例使用）。
   ══════════════════════════════════════════════ */

.contact-cta{
  background:var(--surface-raised); /* parchment #EDE9E1 */
  padding:4rem var(--page-pad);
}

.contact-cta .inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:3rem;
}

/* ---------- left: text ---------- */

.contact-cta-text{ max-width:640px; }

.contact-cta-eyebrow{
  font-family:var(--sans);
  font-size:0.61rem;
  letter-spacing:0.34em;
  color:var(--accent-celadon);
  display:block;
  margin-bottom:1rem;
}

.contact-cta-text h2{
  font-family:var(--serif);
  font-size:clamp(1.25rem,2.4vw,1.85rem);
  font-weight:300;
  color:var(--text-primary);
  letter-spacing:0.09em;
  line-height:1.75;
  margin-bottom:0.9rem;
}

.contact-cta-text p{
  font-family:var(--sans);
  font-size:0.92rem;
  color:var(--text-body);
  line-height:2.3;
  max-width:44ch;
  letter-spacing:0.05em;
}

/* ---------- right: LINE / WeChat / Email entries ---------- */
/* 直接的 icon + 內建 wordmark 圖片，無 border、無背景色塊、
   無按鈕／卡片外觀。 */

.contact-cta-channels{
  display:flex;
  align-items:center;
  gap:2.6rem;
  flex-shrink:0;
}

.contact-cta-channel{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  transition:opacity 0.3s;
}
/* LINE / WeChat 為 <button class="qr-trigger">（觸發 QR Modal），
   重置預設 button 樣式，使其與 Email 的 <a> 外觀一致。 */
button.contact-cta-channel{
  background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;
}
.contact-cta-channel:hover,
.contact-cta-channel:focus-visible{ opacity:0.65; }

.contact-cta-channel img{
  width:auto;
  display:block;
}

/* Optical normalization — 非統一高度。三個來源圖檔長寬比不同
   （LINE ≈2.29:1，WeChat ≈3.21:1，Email ≈3.11:1）；若統一取
   26px 高，LINE 約 60px 寬，WeChat／Email 約 81–84px 寬，視覺
   上會明顯偏輕。以下高度依各 icon 微調（LINE 略高、WeChat／
   Email 略矮），使實際呈現寬度收斂到接近的中間值
   （約 67 / 77 / 78px），而非強制統一任一維度。 */
.contact-cta-channel .icon-line   { height:29px; }
.contact-cta-channel .icon-wechat { height:24px; }
.contact-cta-channel .icon-email  { height:25px; }

/* ── 中等寬度：在左側文字與右側 icon 列開始擠壓前，提早切換
     為上下排列，而非壓縮字級或強制擠壓同一列。 ── */
@media (max-width:1080px){
  .contact-cta{ padding:3rem var(--page-pad); }

  .contact-cta .inner{
    flex-direction:column;
    align-items:flex-start;
    gap:2.2rem;
  }

  .contact-cta-text{ max-width:none; }
  .contact-cta-text p{ max-width:60ch; }
}

/* ── Mobile ≤768px：eyebrow 字級（須在 .contact-cta-eyebrow 基本規則之後）。 ── */
@media (max-width:768px){
  .contact-cta-eyebrow{ font-size:12px; }
}

/* ── 手機：icon 列本身改為垂直排列。 ── */
@media (max-width:560px){
  .contact-cta-channels{
    flex-direction:column;
    align-items:flex-start;
    gap:1.2rem;
  }
  .contact-cta-text p{ max-width:none; }
}

/* ══════════════════════════════════════════════
   NAVIGATION v2 — Case-only correction
   Navigation v2 itself (sticky Nav, logo/wordmark, desktop
   links, Mobile MENU/CLOSE + dropdown, ≤980px breakpoint) is
   now the shared implementation in layout.css, used by both
   Homepage and Case Pages via the .site-nav--v2 modifier.
   The rule below stays here because it is Case-Page-only.
   ══════════════════════════════════════════════ */

/* .breadcrumb's padding-top in layout.css (5.5rem / 5rem@900px) exists
   only to clear the legacy position:fixed nav overlay. site-nav--v2 is
   position:sticky (in-flow, like homepage.css's .hp-hero which needs no
   top offset at all) — without this correction the nav's own ~68px/
   ~55px flow height would stack on top of that clearance and double
   the visual gap. Single non-breakpoint value keeps the effective
   nav-to-breadcrumb gap close to the original at both tiers. */
.site-nav--v2 ~ .breadcrumb{padding-top:1.2rem}

/* Breadcrumb 可讀性（Case Page 專屬）：覆蓋 layout.css 的 .breadcrumb 字級與文字色（該檔不動）。
   當前頁比連結再深一階。 */
.breadcrumb a,
.breadcrumb span{
  font-size:13px;
  color:var(--text-body);
}
.breadcrumb .breadcrumb-current{
  color:var(--text-primary);
}