/* 漢一「實績案例」頁 — 只放這一頁專用的規則；顏色、字級、間距都用 style.css／about.css／faq.css 現有的變數與 class（四個都不改）。
   頁首與收尾沿用常見問題頁的元件（body 同時帶 page-about page-faq）；案例格與評價卡寫在這裡。
   斷點：≥1000 三欄／561–999 兩欄／≤560 一欄（案例格與評價卡同一組）。 */

/* ---------- ① 頁首：兩顆按鈕接在說明下面 ---------- */
.page-cases .ab-intro{margin-bottom:28px}

/* ---------- ② 案例區 ---------- */
.cs{padding:0 0 100px}
/* 讓 h1 → h2 → h3 不跳級：區塊標題只給螢幕閱讀器與搜尋引擎 */
.cs-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 屋型篩選：換行排列（不做橫向捲動），按鈕本身 ≥40px 高好點 */
.cs-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.cs-chip{padding:11px 20px;border:1px solid var(--field);border-radius:100px;font-size:14px;font-weight:600;line-height:1.2;color:var(--navy);transition:background .2s,color .2s,border-color .2s}
@media (hover: hover) and (pointer: fine){.cs-chip:hover{background:var(--card)}}
.cs-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--bg)}
.cs-chip:focus-visible,.cs-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* 規律格線：每張卡同一個圖片比例（4:3），沒有寬卡，篩選或「看更多」之後版面不會留洞 */
.cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 20px;align-items:start}
.cs-grid [hidden],.cs-rvs [hidden],.cs-more [hidden]{display:none}
.cs-ph{aspect-ratio:4/3;margin-bottom:14px;background:var(--slot-bg);overflow:hidden}
.cs-ph img{width:100%;height:100%;object-fit:cover}
.cs-card h3{font-size:15px;line-height:1.5;font-weight:600;color:var(--navy);overflow-wrap:anywhere}
.cs-card.is-slot h3{font-size:14px;font-weight:500;color:var(--ink-2)}
.cs-meta{margin-top:2px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.cs-sub{margin-top:2px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.cs-card h3:focus{outline:none}
.cs-card h3:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

.cs-more{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:60px}
.cs-more:empty{display:none}
.cs-count{font-size:14px;color:var(--ink-2)}

/* ---------- ③ 屋主評價 ---------- */
.cs-rvsec{padding:90px 0 110px}
/* 同一排的卡片拉成一樣高（網格預設），署名固定貼在卡底；署名區留兩行高（名字＋屋型年份），沒填屋型年份的卡分隔線也對得齊；字多的那張撐高整排，不會出現參差的卡片 */
.cs-rvs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cs-rv{display:flex;flex-direction:column;gap:24px;background:var(--card);padding:28px}
.cs-rv blockquote p{font-size:16px;line-height:1.85;color:var(--navy);overflow-wrap:anywhere}
.cs-rv figcaption{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--ink-2)}
.cs-rv figcaption.has-sub{min-height:61px}
.cs-rv figcaption b{display:block;font-size:14px;font-weight:600;color:var(--navy)}
.cs-rv-who{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cs-rv-who b{min-width:0;overflow-wrap:anywhere}
.cs-rv-stars{flex:none;font-size:15px;line-height:1;letter-spacing:2px;color:var(--brick-2)}
/* 評語：換行照原文保留。折疊只在 cases.js 跑起來之後才有（.is-fold）：桌機／平板先顯示 6 行、手機 8 行；沒有 JS 時不折疊，全文照常可讀 */
.cs-rv blockquote p{white-space:pre-line}
.cs-rv blockquote p.is-fold{--rv-lines:6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rv-lines);line-clamp:var(--rv-lines);overflow:hidden}
.cs-rv-src{margin-top:14px;font-size:14px;line-height:1.7;color:var(--ink-2)}
/* 「看全文」：真按鈕，點擊區高 ≥44px，貼在評語下方、署名線上方 */
.cs-rv-tog{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin:-12px 0 -12px;padding:0 2px;font-size:14px;font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:var(--brick);text-decoration-thickness:2px;text-underline-offset:4px}
@media (hover: hover) and (pointer: fine){.cs-rv-tog:hover{text-decoration-color:var(--navy)}}
.cs-rv-tog:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.cs-rv-tog[hidden]{display:none}
.cs-rv.is-slot{padding:0;background:none}
.cs-rv-slot{min-height:200px;height:100%}

/* Google 評論來源：沿用本站金色、灰字與膠囊按鈕，不載入素材的備用 style */
.h1r-summary{margin-top:12px}
.h1r-score{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;color:var(--ink-2);font-size:14px;line-height:1.7;text-decoration:none}
.h1r-score strong{color:var(--navy);font-weight:600}
.h1r-stars{color:var(--brick-2);letter-spacing:2px}
.h1r-meta{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.h1r-source{font-size:12px;line-height:1.5;color:var(--slot-ink);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}
.h1r-actions{gap:10px}
.h1r-btn{box-sizing:border-box;max-width:100%;white-space:normal;text-align:center;justify-content:center}
@media (hover:hover) and (pointer:fine){.h1r-score:hover strong,.h1r-source:hover{color:var(--brick-2)}}
.h1r-score:focus-visible,.h1r-source:focus-visible{outline:2px solid var(--brick);outline-offset:3px}

/* ---------- 平板／手機 ---------- */
@media (max-width:999px){
  .cs-grid,.cs-rvs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .cs{padding-bottom:70px}
  .cs-filter{margin-bottom:32px}
  .cs-grid{gap:40px 20px}
  .cs-more{margin-top:40px}
  .cs-rvsec{padding:60px 0 80px}
}
@media (max-width:560px){
  .cs-grid,.cs-rvs{grid-template-columns:minmax(0,1fr)}
  .cs-chip{padding:11px 16px}
  .cs-rv{padding:24px}
  .cs-rv blockquote p.is-fold{--rv-lines:8}
}


.cs-link{display:block;color:inherit;text-decoration:none}
.cs-link:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

.cs-link h3 .roll-in > span[aria-hidden]{display:none}
@media (min-width:821px){
  .cs-link h3 .roll{display:block;height:1.7em;overflow:hidden}
  .cs-link h3 .roll-in{display:block;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
  .cs-link h3 .roll-in > span,.cs-link h3 .roll-in > span[aria-hidden]{display:block;height:1.7em;line-height:1.7em}
  .cs-link h3 .roll-in > span[aria-hidden]{color:var(--brick)}
  .cs-link:focus-visible h3 .roll-in{transform:translateY(-50%)}
}
@media (min-width:821px) and (hover: hover) and (pointer: fine){.cs-link:hover h3 .roll-in{transform:translateY(-50%)}}
@media (min-width:821px) and (prefers-reduced-motion:reduce){.cs-link h3 .roll-in{transition:none}.cs-link:hover h3 .roll-in,.cs-link:focus-visible h3 .roll-in{transform:none}.cs-link:hover h3{color:var(--brick)}}