/* ============================================================
   工程案例 · v2 視覺 — 僅適用 projects.html / en/projects.html
   風格：Journal 全幅深色 hero + 石林 masonry + 工程紀實統計
   ============================================================ */

body.v2-projects { background:#F6F3EE; }
.v2-wrap  { width:min(1180px, 92%); margin-inline:auto; }
.v2-kicker{ font-family:'Inter','Noto Sans TC',sans-serif; letter-spacing:.32em;
  text-transform:uppercase; font-size:12px; color:#C2A25E; }

/* ============================================================
   HERO — 全幅深色 + 背景圖遮罩
   ============================================================ */
.v2-hero-full{ position:relative; min-height:620px; display:flex; align-items:flex-end;
  overflow:hidden; color:#F4F1EA; }
.v2-hero-full .v2-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.v2-hero-full .v2-hero-shade{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(14,13,9,.82) 0%, rgba(14,13,9,.42) 55%, rgba(14,13,9,.12) 100%); }
.v2-hero-full .v2-hero-content{ position:relative; z-index:2; padding:clamp(64px,8vw,120px) 0 clamp(52px,6vw,84px); }
.v2-hero-full h1{ font-family:'Playfair Display','Noto Serif TC',serif; font-weight:500;
  font-size:clamp(36px,4.6vw,62px); line-height:1.14; color:#F4F1EA; margin:16px 0 18px; }
.v2-hero-full h1 em{ font-style:normal; color:#C2A25E; }
.v2-hero-full p{ color:rgba(244,241,234,.82); font-size:15.5px; line-height:1.85; max-width:48ch; }

/* ============================================================
   GALLERY — 標題 + 篩選 chips + 石林
   ============================================================ */
.v2-gallery{ background:#F6F3EE; padding:clamp(56px,7vw,92px) 0 clamp(20px,3vw,40px); }
.v2-g-head{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap; margin-bottom:30px; }
.v2-g-head h2{ font-family:'Playfair Display','Noto Serif TC',serif; font-weight:500;
  font-size:clamp(28px,3.4vw,44px); color:#14130F; margin:12px 0 0; }
.v2-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.v2-chip{ border:1px solid #DCD5CB; background:transparent; color:#5C574F;
  font-family:'Noto Sans TC',sans-serif; font-size:13px; letter-spacing:.04em;
  padding:9px 16px; border-radius:2px; cursor:pointer; transition:all .25s; }
.v2-chip:hover{ border-color:#C2A25E; color:#14130F; }
.v2-chip.active{ background:#14130F; border-color:#14130F; color:#F4F1EA; }

/* 石林 masonry：CSS columns 錯落 */
.v2-masonry{ column-count:2; column-gap:24px; }
.v2-card{ display:block; margin:0 0 24px; break-inside:avoid; background:#EDE6DC;
  text-decoration:none; overflow:hidden; }
.v2-card .v2-card-img{ position:relative; overflow:hidden; }
.v2-card .v2-card-img img{ width:100%; display:block; object-fit:cover; transition:transform .6s ease; }
.v2-card:hover .v2-card-img img{ transform:scale(1.04); }
.v2-card .v2-card-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(14,13,9,.38)); opacity:0; transition:opacity .4s; }
.v2-card:hover .v2-card-img::after{ opacity:1; }
.v2-card .v2-card-meta{ padding:16px 18px 18px; display:flex; justify-content:space-between;
  align-items:flex-end; gap:14px; }
.v2-card .cm-l b{ display:block; font-family:'Noto Serif TC',serif; font-weight:600;
  font-size:17px; color:#14130F; letter-spacing:.03em; }
.v2-card .cm-l span{ display:block; font-size:12.5px; color:#8A8176; margin-top:5px; letter-spacing:.05em; }
.v2-card .cm-r{ font-family:'Inter','Noto Sans TC',sans-serif; font-size:11px; letter-spacing:.16em;
  color:#C2A25E; text-transform:uppercase; white-space:nowrap; }

.v2-loadmore{ text-align:center; margin:10px 0 0; padding:10px 0 0; }
.v2-loadmore a{ display:inline-block; border:1px solid #14130F; color:#14130F;
  padding:13px 34px; font-size:14px; letter-spacing:.14em; text-decoration:none;
  border-radius:2px; transition:all .3s; }
.v2-loadmore a:hover{ background:#14130F; color:#F4F1EA; }

/* ============================================================
   TRACK RECORD 工程紀實深色帶
   ============================================================ */
.v2-record{ background:#16150F; color:#F4F1EA; margin-top:clamp(30px,4vw,56px);
  padding:clamp(52px,6vw,84px) 0; }
.v2-record .v2-r-top{ display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:clamp(28px,3.6vw,48px); }
.v2-record h2{ font-family:'Playfair Display','Noto Serif TC',serif; font-weight:500;
  font-size:clamp(26px,3.2vw,42px); color:#F4F1EA; margin:0; }
.v2-record .v2-more{ color:#C2A25E; text-decoration:none; font-size:13px; letter-spacing:.12em; }
.v2-r-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.12); }
.v2-r-grid .rg{ padding-top:26px; }
.v2-r-grid .rg b{ font-family:'Playfair Display','Noto Serif TC',serif; font-weight:600;
  font-size:clamp(30px,3.6vw,46px); color:#C2A25E; display:block; line-height:1; }
.v2-r-grid .rg span{ display:block; font-size:13.5px; color:#A7A091; margin-top:12px; letter-spacing:.06em; }

/* ============================================================
   響應式
   ============================================================ */
@media (max-width:900px){
  .v2-hero-full{ min-height:520px; }
  .v2-g-head{ flex-direction:column; align-items:flex-start; }
  .v2-masonry{ column-count:1; }
  .v2-r-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .v2-r-grid{ grid-template-columns:1fr; }
}