/* ══════════════════════════════════════════════
   ARCHIVE.CSS
   修復檔案館（archive.html）頁面專屬樣式。
   Nav／Contact CTA／Footer 皆沿用 layout.css／case.css 既有
   shared components，本檔僅處理 Archive 專屬區塊：
   Archive Header／Filter／56-Case Grid。

   權限依據：
   - Header／Grid／Card 視覺：archive-desktop-composition-v5.html
   - Filter UI／state 資訊架構：archive-mobile-filter-a-summary.html
   - Mobile Grid（2 欄 independent column）：
     archive-mobile-grid-regular-vs-masonry-v3.html
   顏色／字型一律沿用 base.css 既有 design token，
   未直接複製 prototype 內未收斂進 token 系統的一次性色值。
   ══════════════════════════════════════════════ */

/* ── ARCHIVE HEADER ── */
.arc-header{
  padding:3rem var(--page-pad) 2.25rem;
  border-bottom:1px solid var(--divider-subtle);
}
.arc-header .inner{ max-width:var(--page-max); margin:0 auto; }
.arc-header-eyebrow{
  font-family:var(--sans); font-size:0.625rem; font-weight:400;
  letter-spacing:0.22em; color:var(--accent-celadon);
  margin:0 0 0.6rem;
}
.arc-header h1{
  font-family:var(--serif); font-weight:400; font-size:1.9rem;
  letter-spacing:0.08em; line-height:1.35; color:var(--text-primary);
  margin:0 0 0.9rem;
}
.arc-header-desc{
  font-family:var(--serif); font-weight:300; font-size:0.85rem;
  line-height:1.9; letter-spacing:0.035em; color:var(--text-secondary);
  margin:0; max-width:52ch;
}

/* ── FILTER ──
   資訊架構（主層／獨立 selection summary／branch／clear）
   完整沿用 archive-mobile-filter-a-summary.html，desktop 與
   mobile 共用同一份 HTML 結構，僅字級／間距依斷點微調。
   本輪僅建立 FINAL UI/state 所需結構，不掛載篩選、grid filter
   動畫與 0-result 邏輯（下一輪處理）。 */
.arc-filter{
  padding:1.375rem var(--page-pad) 1.5rem;
  border-bottom:1px solid var(--divider-subtle);
}
.arc-filter .inner{ max-width:var(--page-max); margin:0 auto; }

.arc-filter-primary{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:1.375rem;
}
.arc-filter-primary button{
  border:0; background:none; padding:0; margin:0; cursor:pointer;
  font-family:var(--sans); position:relative;
  display:inline-flex; align-items:baseline;
  font-size:0.875rem; line-height:1.5; color:var(--text-primary);
}
.arc-filter-primary button.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-0.375rem;
  height:1px; background:var(--accent-celadon);
}

/* 目前條件值：與舊版 desktop prototype 不同，不塞在主按鈕旁；
   保留節點供下一輪 JS 使用，但視覺上永遠隱藏，選中狀態改由
   獨立的 .arc-selection-summary 呈現。 */
.arc-current-value{ display:none; }

.arc-selection-summary{
  display:none; margin-top:0.8125rem;
  font-family:var(--sans); font-size:0.75rem; line-height:1.65;
  color:var(--accent-celadon); letter-spacing:0.01em;
}
.arc-selection-summary.show{ display:block; }
.arc-selection-summary .label{ color:var(--text-secondary); margin-right:0.4375rem; }
.arc-selection-summary .divider{ color:rgba(149,142,131,0.52); margin:0 0.4375rem; }

.arc-branch-wrap{
  display:grid; grid-template-rows:0fr; opacity:0; transform:translateY(-5px);
  transition:grid-template-rows 0.4s cubic-bezier(0.22,1,0.36,1),
             opacity 0.28s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.arc-branch-wrap.open{ grid-template-rows:1fr; opacity:1; transform:translateY(0); }
.arc-branch-inner{ overflow:hidden; }

.arc-secondary{
  position:relative; display:none; flex-wrap:wrap; align-items:baseline;
  column-gap:0.5625rem; row-gap:0.4375rem;
  padding-left:1.125rem; margin-top:1rem;
}
.arc-secondary.is-active{ display:flex; }
.arc-secondary::before{
  content:'⎿'; position:absolute; left:0; top:1px;
  font-size:0.875rem; color:rgba(149,142,131,0.65); line-height:1.7;
}
.arc-secondary button{
  border:0; background:none; padding:0; margin:0; cursor:pointer;
  font-family:var(--sans); font-size:0.8125rem; line-height:1.7;
  color:var(--text-primary);
}
.arc-secondary button.option-selected{ color:var(--accent-celadon); }
.arc-secondary .sep{
  font-size:0.75rem; line-height:1.7; color:rgba(149,142,131,0.38);
}

.arc-utility{ margin-top:0.5rem; min-height:0.9375rem; }
.arc-clear{
  border:0; background:none; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:0.75rem; color:var(--text-secondary);
}
.arc-clear:hover{ color:var(--accent-celadon); }

@media (min-width:768px){
  .arc-filter-primary{ gap:1.875rem; }
}

/* ── 56-CASE GRID — Desktop / Tablet（5 欄 → 4 欄）──
   圓角、4:3、字級、間距、hover 依 archive-desktop-composition-v5
   為準。 */
.arc-grid{
  max-width:var(--page-max); margin:0 auto;
  padding:0.25rem var(--page-pad) 5.625rem;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:1.5rem; row-gap:3.625rem;
}
@media (max-width:1100px){
  .arc-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:768px){
  .arc-grid{ display:none; }
}

/* ── 56-CASE GRID — Mobile（2 個 independent vertical columns）──
   結構依 archive-mobile-grid-regular-vs-masonry-v3.html：
   奇數（1,3,5…）在左欄、偶數（2,4,6…）在右欄，兩欄各自獨立
   往下堆疊，不使用單一 CSS grid 導致的列對齊。因 56 筆內容於
   建置時已固定，直接於 HTML 分欄輸出，不需 JS 分欄。 */
.arc-grid-mobile{ display:none; }
@media (max-width:768px){
  .arc-grid-mobile{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:1rem; padding:0.25rem var(--page-pad) 3.375rem;
  }
}
.arc-grid-mobile-col{
  display:flex; flex-direction:column; gap:2.375rem; min-width:0;
}

/* ── CARD（Desktop 與 Mobile 共用）── */
.arc-card{
  position:relative; isolation:isolate; display:block; min-width:0;
  text-decoration:none; color:inherit;
  transition:opacity 0.38s cubic-bezier(0.22,1,0.36,1);
}
/* Filter 結果切換動畫（依 archive-filter-grid-motion-v2.html）：
   舊結果 fade out → invisible 時完成 display 切換／reflow →
   新結果 fade in。僅 opacity，不加入 scale／translate。 */
.arc-card.filter-hidden{ opacity:0; }
.arc-card::before{
  content:''; position:absolute; z-index:-1; inset:-0.5rem -0.5rem -0.625rem;
  border-radius:7px; transition:background 0.28s ease;
}
.arc-card:hover::before{ background:var(--accent-celadon-bg); }

.arc-card-stage{
  aspect-ratio:4/3; overflow:hidden; border-radius:4px;
  background:#e9e5dd;
}
.arc-card-stage img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.arc-card:hover .arc-card-stage img{ transform:scale(1.03); }

.arc-card-meta{ padding-top:0.5625rem; }
.arc-card-method{
  font-family:var(--sans); font-size:0.75rem; line-height:1.5;
  color:var(--text-secondary); margin:0 0 0.125rem;
  letter-spacing:0.02em;
}
.arc-card-name{
  font-family:var(--serif); font-weight:500; font-size:1.0625rem;
  line-height:1.48; color:var(--text-primary); margin:0;
  transition:color 0.25s ease;
}
.arc-card:hover .arc-card-name{ color:var(--accent-celadon); }

@media (max-width:768px){
  .arc-card-method{ line-height:1.45; margin-bottom:0.1875rem; }
  .arc-card-name{ font-size:1rem; line-height:1.52; }
}

/* ── 0-RESULT（不自動放寬條件，Desktop／Mobile 共用同一則訊息）── */
.arc-empty{
  max-width:var(--page-max); margin:0 auto;
  padding:3.5rem var(--page-pad) 5.625rem;
  text-align:center;
  font-family:var(--sans); font-size:0.875rem; line-height:1.9;
  color:var(--text-secondary);
}
.arc-empty[hidden]{ display:none; }
.arc-empty-clear{
  border:0; background:none; padding:0; margin-left:0.5rem; cursor:pointer;
  font-family:var(--sans); font-size:0.875rem; color:var(--accent-celadon);
  text-decoration:underline; text-underline-offset:2px;
}
.arc-empty-clear:hover{ opacity:0.75; }

@media (max-width:768px){
  .arc-header-desc{
    font-size:0.9rem;
    color:var(--text-body);
    line-height:1.85;
  }

  .arc-card-method{
    font-size:0.78rem;
    color:var(--text-body);
  }
}