/* 案例研究 — 列表頁與明細頁
 *
 * 沿用 Brand 1.0 的藏藍／香檳金／米白與既有 serif / sans，不新增品牌色。
 * 與週報刻意分開的地方：
 *   週報是「章節 + 資料表」的研究報告；案例是「一個問題 → 一路推到建議」的敘事。
 *   因此案例用編號段落串成單一縱向動線，不用表格，重量放在最上面的「核心問題」。
 */

/* ---- 列表頁頁首 ---- */
.cs-head-wrap{padding:clamp(70px,9vw,110px) 0 0}
.cs-page-h{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2rem);font-weight:600;
  letter-spacing:.06em;margin:24px 0 0;color:var(--text)}
.cs-page-claim{font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3rem);font-weight:600;
  line-height:1.3;letter-spacing:.02em;margin:14px 0 0;color:var(--text);text-wrap:balance}
/* 品牌句：功能句（cs-page-claim / sec-head h2）讓位為主角後，這句降級為輔助句，
   不用大字級，只用斜體 serif 做出「補一句話」的語氣，不跟功能句搶注意力 */
.cs-brand-line{margin:.6em 0 0;font-family:var(--serif);font-style:italic;
  font-size:1rem;letter-spacing:.01em;color:var(--text-mute)}
.cs-page-lede{margin:22px 0 0;max-width:48ch;font-size:1rem;line-height:1.95;
  color:var(--text-soft);text-wrap:pretty}
.cs-count{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;
  color:var(--text-mute);margin-top:20px}

.cs-wrap{padding:clamp(38px,5vw,54px) 0 clamp(70px,9vw,110px)}

/* ---- 0 筆時的正式狀態 ---- */
/* 不是錯誤畫面：給說明、給下一步，不留空白也不放示意卡片 */
.cs-empty{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:2px;
  padding:clamp(38px,6vw,58px) clamp(26px,4vw,44px);
  background:color-mix(in srgb,var(--accent) 5%,transparent);max-width:62ch}
.cs-empty-h{font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:600;
  color:var(--text);margin:0 0 14px}
.cs-empty p{margin:0;color:var(--text-soft);font-size:.98rem;line-height:1.95;text-wrap:pretty}
.cs-empty .btn{margin-top:26px}

/* ---- 列表卡片 ---- */
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(18px,2.4vw,26px)}
.cs-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:2px;
  padding:clamp(22px,2.6vw,28px);background:var(--panel);
  transition:border-color .25s ease}
.cs-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.cs-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cs-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cs-card-q{font-family:var(--serif);font-size:1.16rem;font-weight:600;line-height:1.55;
  margin:14px 0 0;color:var(--text);text-wrap:balance}
/* estate 降為卡片上的次要 metadata：問題先讀到，建案名只做定位用 */
.cs-card-meta{font-family:var(--sans);font-size:.78rem;letter-spacing:.05em;
  color:var(--text-mute);margin-top:10px}
.cs-card-meta i{font-style:normal;color:var(--line);margin:0 .5em}
.cs-card-sum{color:var(--text-soft);font-size:.92rem;line-height:1.85;margin:12px 0 0}
.cs-card-dims{font-family:var(--sans);font-size:.78rem;letter-spacing:.04em;
  color:var(--text-mute);margin-top:14px}
.cs-go{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;
  color:var(--accent-strong);margin-top:auto;padding-top:20px}

/* ---- 型別與狀態標記 ---- */
.cs-badge{display:inline-flex;align-items:baseline;gap:8px;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;font-weight:600;
  color:var(--accent-strong);background:rgba(198,160,82,.10);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:2px;padding:5px 10px}
.cs-badge i{font-style:normal;font-size:.72rem;letter-spacing:.08em;font-weight:500;
  color:var(--text-soft)}
.cs-status{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;color:var(--text-mute)}
/* 進行中要一眼看得出來，避免被誤讀成已成交 */
.cs-status--ongoing{color:var(--accent-strong)}
.cs-status--ongoing::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:7px;vertical-align:middle}

/* ---- 明細頁 ---- */
.cs{padding:clamp(58px,7vw,88px) 0 clamp(60px,8vw,96px)}
.cs-col{max-width:720px;margin-inline:auto}
.cs-back{font-family:var(--sans);font-size:.76rem;letter-spacing:.12em;color:var(--text-mute);
  text-decoration:none;display:inline-block;margin-bottom:32px}
.cs-back:hover{color:var(--accent-strong)}

/* 標頭：把「核心問題」放到最大，案例是從問題出發，不是從建案出發 */
.cs-head{padding-bottom:clamp(26px,3vw,34px);border-bottom:1px solid var(--line)}
.cs-kicker{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* 案例的主角是問題，不是建案。地區／產品／客戶類型在前，建案名退為次要標示 */
.cs-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:20px 0 0;
  font-family:var(--sans);font-size:.8rem;letter-spacing:.08em;color:var(--text-mute)}
.cs-meta i{font-style:normal;color:var(--line);font-size:.72rem}
.cs-estate{margin:7px 0 0;font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;
  color:var(--text-soft);opacity:.85}
.cs-estate::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--accent);vertical-align:middle;margin-right:9px;opacity:.7}
.cs-q{font-family:var(--serif);font-size:clamp(1.66rem,4vw,2.4rem);font-weight:600;
  line-height:1.4;margin:18px 0 0;color:var(--text);text-wrap:balance}
.cs-summary{margin:20px 0 0;font-family:var(--serif);font-size:clamp(1.04rem,1.9vw,1.16rem);
  line-height:1.9;color:var(--text-soft);text-wrap:pretty}
.cs-date{font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;
  color:var(--text-mute);margin-top:22px}

/* 敘事段落：金色編號 + 藏藍標題，串成一條縱向動線 */
.cs-body{margin-top:clamp(30px,4vw,42px)}
/* padding 要寫完整簡寫：site.css 有全域的 section{padding:clamp(64px,9vw,110px) 0} */
.cs-sec{margin:clamp(34px,4.2vw,46px) 0 0;padding:0}
.cs-sec:first-child{margin-top:0}
.cs-sec h2{display:flex;align-items:baseline;gap:14px;
  font-family:var(--serif);font-size:1.24rem;font-weight:600;line-height:1.4;
  margin:0 0 14px;padding:0 0 12px;color:var(--text);
  border-bottom:1px solid var(--line)}
.cs-sec-n{font-family:var(--serif);font-size:.92rem;font-weight:600;letter-spacing:.06em;
  color:var(--accent);font-variant-numeric:tabular-nums}
.cs-sec p{margin:0 0 16px;font-size:1.02rem;line-height:1.98;color:var(--text-soft);
  letter-spacing:.01em;text-wrap:pretty}
.cs-sec p:last-child{margin-bottom:0}

/* 資料來源 */
.cs-sources{margin:clamp(38px,4.6vw,50px) 0 0;padding:22px 24px;border-radius:2px;
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:rgba(27,42,74,.035)}
.cs-sources h2{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;font-weight:500;
  color:var(--accent-strong);margin:0 0 14px}
.cs-sources dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:0}
.cs-sources dl>div{display:contents}
.cs-sources dt{font-family:var(--sans);font-size:.84rem;font-weight:600;
  color:var(--text);white-space:nowrap}
.cs-sources dd{margin:0;font-family:var(--sans);font-size:.84rem;color:var(--text-soft)}

/* 公開聲明：每則案例必備，維持安靜但不可略過 */
.cs-disclosure{margin-top:clamp(34px,4vw,44px);padding:20px 22px;border-radius:2px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 55%,transparent)}
.cs-disclosure h2{font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;font-weight:500;
  color:var(--text-mute);margin:0 0 10px}
.cs-disclosure p{margin:0 0 10px;font-family:var(--sans);font-size:.84rem;line-height:1.9;
  color:var(--text-mute)}
.cs-disclosure p:last-child{margin-bottom:0}

.cs-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(40px,5vw,56px);
  padding-top:clamp(26px,3vw,34px);border-top:1px solid var(--line)}

@media(max-width:600px){
  .cs-grid{grid-template-columns:1fr}
  .cs-empty{padding:30px 20px}
  .cs-sec h2{font-size:1.16rem;gap:11px}
  .cs-sec p{font-size:1rem;line-height:1.9}
  .cs-sources{padding:18px 16px}
  .cs-sources dl{grid-template-columns:1fr;gap:2px 0}
  .cs-sources dl>div{display:block;margin-bottom:10px}
  .cs-foot .btn{width:100%;text-align:center}
}

/* ---- 首頁精選案例（在 .cases 的藏藍反白帶內）----
   刻意不用大數字、不用成果標記：這裡要看起來像研究索引，不是賀成交牆。
   重量放在「問題」，成果數字在這一區完全不出現。 */
.cs-hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
.cs-hcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid rgba(214,199,160,.18);border-top:2px solid var(--gold);border-radius:2px;
  padding:clamp(22px,2.6vw,28px);background:rgba(0,0,0,.14);
  transition:border-color .25s ease,background-color .25s ease}
.cs-hcard:hover{border-color:rgba(198,160,82,.55);background:rgba(0,0,0,.2)}
.cs-hcard:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cs-hcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cs-hbadge{display:inline-flex;align-items:baseline;gap:8px;
  font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;font-weight:600;
  color:var(--gold-lt);background:rgba(198,160,82,.14);
  border:1px solid rgba(198,160,82,.42);border-radius:2px;padding:5px 9px}
.cs-hbadge i{font-style:normal;font-size:.7rem;letter-spacing:.08em;font-weight:500;color:#CBD2E0}
.cs-hstatus{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;color:var(--on-invert-mute)}
.cs-hstatus--ongoing{color:var(--gold-lt)}
.cs-hstatus--ongoing::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--gold);margin-right:6px;vertical-align:middle}
.cs-hcard-q{font-family:var(--serif);font-size:1.1rem;font-weight:600;line-height:1.6;
  margin:14px 0 0;color:var(--on-invert);text-wrap:pretty}
/* estate 降為卡片上的次要 metadata：問題先讀到，建案名只做定位用 */
.cs-hcard-meta{font-family:var(--sans);font-size:.74rem;letter-spacing:.05em;
  color:var(--on-invert-mute);margin-top:10px}
.cs-hcard-meta i{font-style:normal;color:rgba(214,199,160,.3);margin:0 .5em}
.cs-hcard-dims{font-family:var(--sans);font-size:.76rem;line-height:1.8;letter-spacing:.04em;
  color:var(--on-invert-mute);margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(214,199,160,.14)}
.cs-hgo{font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;
  color:var(--gold-lt);margin-top:auto;padding-top:20px}
.cs-home-foot{margin-top:clamp(26px,3.2vw,36px)}

@media(max-width:820px){
  .cs-hgrid{grid-template-columns:1fr}
}

/* ---- 建議書節錄（evidence）----
   文件是證據，判讀才是主體。UI 刻意退後：只用細線、薄霧與留白，
   不做大面積金色底，也不加動畫，讓文件本身的資訊量成為視覺重心。 */

/* 第一份文件前的編輯註記。不是警告框 */
.cs-ev-note{margin:clamp(34px,4vw,44px) 0 0;padding:0 0 0 13px;
  border-left:2px solid var(--accent);
  font-family:var(--sans);font-size:.8rem;line-height:1.9;color:var(--text-mute);
  letter-spacing:.02em;max-width:52ch}

.cs-ev{display:grid;gap:clamp(18px,2.2vw,26px);align-items:start;
  margin:clamp(30px,3.8vw,42px) 0 0;padding:clamp(26px,3.2vw,34px) 0 0;
  border-top:1px solid var(--line)}
/* 奇偶交錯：第一組文件在左，第二組在右 */
.cs-ev--docleft{grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
.cs-ev--docright{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}
.cs-ev--docright .cs-ev-doc{order:2}
.cs-ev--docright .cs-ev-read{order:1}

/* 文件本身：保留「這是實際交付的紙本」的感覺 */
.cs-ev-doc{margin:0}
.cs-ev-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:3px;overflow:hidden;line-height:0;
  box-shadow:0 2px 10px -4px rgba(27,42,74,.28);
  transition:box-shadow .25s ease}
.cs-ev-zoom:hover{box-shadow:0 8px 26px -10px rgba(27,42,74,.4)}
.cs-ev-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cs-ev-zoom img{display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:3px;background:#fff}
.cs-ev-doc figcaption{margin-top:11px;font-family:var(--sans);font-size:.76rem;
  line-height:1.75;color:var(--text-mute);letter-spacing:.02em}
.cs-ev-doc figcaption b{display:block;font-size:.82rem;font-weight:600;
  color:var(--text-soft);letter-spacing:.06em;margin-bottom:2px}

/* 判讀：案例研究真正的主體，字級與行距都比一般正文更放鬆 */
.cs-ev-read{position:relative;padding-top:2px}
/* 字距比其他 eyebrow 收窄：ALVIN READS 是一組 editorial label，
   用 .24em 會被拆成一個一個字母，讀起來不成詞 */
.cs-ev-eyebrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.13em;font-weight:600;
  color:var(--accent-strong);padding-bottom:11px;margin-bottom:15px;
  border-bottom:1px solid rgba(198,160,82,.35)}
.cs-ev-eyebrow i{font-style:normal;font-size:.72rem;letter-spacing:.1em;
  font-weight:500;color:var(--text-mute)}
/* 判讀的第一段是「這張文件證明什麼」。用細金線與較大 serif 讓閱讀自然停一下，
   但字級刻意低於 H1（.cs-q 最大 2.4rem），不與案例主標爭主角 */
.cs-ev-key{margin:0 0 15px;padding:0 0 0 14px;border-left:2px solid var(--accent);
  font-family:var(--serif);font-size:clamp(1.14rem,2.1vw,1.3rem);font-weight:600;
  line-height:1.72;color:var(--text);letter-spacing:.015em;text-wrap:balance}
.cs-ev-insight{margin:0 0 14px;font-family:var(--serif);
  font-size:clamp(1.02rem,1.8vw,1.12rem);line-height:1.95;
  color:var(--text);letter-spacing:.01em;text-wrap:pretty}
.cs-ev-insight:last-child{margin-bottom:0}

/* 放大檢視 */
.cs-lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,4vw,48px);
  background:rgba(13,20,38,.9);backdrop-filter:blur(3px)}
.cs-lightbox[hidden]{display:none}
.cs-lightbox img{max-width:100%;max-height:calc(100vh - 130px);width:auto;height:auto;
  border-radius:3px;background:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.cs-lightbox figcaption{margin-top:16px;text-align:center;
  font-family:var(--sans);font-size:.8rem;letter-spacing:.06em;color:#CBD2E0}
.cs-lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center}
.cs-lb-close{position:absolute;top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);
  width:42px;height:42px;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(214,199,160,.34);
  color:#EFEADD;font-size:1.2rem;line-height:1}
.cs-lb-close:hover{background:rgba(255,255,255,.16)}
.cs-lb-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* 列表頁的低調文件預覽。沒有 evidence 就完全不出現，不留空框 */
.cs-card-doc{margin-top:16px;border-radius:2px;overflow:hidden;
  border:1px solid var(--line);background:#fff;line-height:0;
  max-height:118px;position:relative}
.cs-card-doc img{display:block;width:100%;height:auto;opacity:.86}
.cs-card-doc::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,var(--panel) 100%)}
.cs-card-docn{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;
  color:var(--text-mute);margin-top:9px}

@media(max-width:820px){
  /* 行動版一律回到「文件在上、判讀在下」的單欄順序。
     只收空間不縮字：段落上下距與 caption 間距收斂，文件維持滿版 */
  .cs-ev{grid-template-columns:1fr;gap:14px;margin-top:26px;padding-top:22px}
  .cs-ev-note{margin-top:28px}
  .cs-ev-doc figcaption{margin-top:9px;line-height:1.6}
  .cs-ev-doc figcaption b{margin-bottom:1px}
  .cs-ev-eyebrow{padding-bottom:9px;margin-bottom:12px}
  .cs-ev-key{margin-bottom:12px;padding-left:12px;font-size:1.12rem;line-height:1.68}
  .cs-ev-insight{margin-bottom:11px}
  .cs-meta{margin-top:16px}
  .cs-ev--docright .cs-ev-doc,
  .cs-ev--docright .cs-ev-read{order:0}
  .cs-ev-note{font-size:.78rem}
  .cs-lightbox img{max-height:calc(100vh - 150px)}
}