/* ==========================================================================
   Lazy Dept. 作品集頁專屬樣式（works.css）
   來源：design/works/index.html（列表頁）＋ design/works/detail.html（內頁）
   <style> 區段，扣掉已搬進 site.css 的共用段落（tokens／header／nav／
   btn-main／wave／section 標題／footer／float-line／基礎 reset）。
   兩頁專屬樣式合併在同一檔：內頁沒有 .work 卡片，跟列表頁的 .work 樣式
   不會互相覆蓋，selector 命名互不衝突。
   ========================================================================== */

/* ── 列表頁：頁首 ── */
.page-hero{background:linear-gradient(180deg,var(--sky) 0%,var(--day) 100%);padding:64px 0 8px;text-align:center}
.page-hero .mini{display:inline-block;font-family:var(--round);font-size:14px;color:var(--tangerine);background:#FDE6DA;border-radius:999px;padding:4px 16px;margin-bottom:14px}
.page-hero h1{font-size:clamp(32px,4.6vw,48px);margin-bottom:10px}
.page-hero p{color:var(--navy-soft);font-size:17px;max-width:34em;margin:0 auto 36px}

/* ── 列表頁：篩選 pills ── */
.filters{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:28px 0 8px}
.pill{
  font-family:var(--round);font-size:15px;color:var(--navy);
  background:var(--cloud);border-radius:999px;padding:8px 22px;
  box-shadow:0 2px 8px rgba(40,64,90,.06);
}
.pill:hover{background:var(--cream)}
.pill.on{background:var(--navy);color:#fff}

/* ── 列表頁：案例卡 ── */
.works{padding:40px 0 72px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.work{
  border-radius:22px;overflow:hidden;background:var(--cloud);
  box-shadow:0 4px 14px rgba(40,64,90,.07);
  transition:transform .15s ease;display:flex;flex-direction:column;
}
.work:hover{transform:translateY(-6px)}
.work .shot{height:190px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--round);font-size:16px;letter-spacing:2px;position:relative}
/* 真圖與佔位色塊同尺寸：img.shot 需額外補 object-fit（設計稿只有 div 佔位，沒有 img） */
img.shot{object-fit:cover;width:100%}
.work:nth-child(1) .shot{background:#6FA8C9}
.work:nth-child(2) .shot{background:#E8A87C}
.work:nth-child(3) .shot{background:#8FBC94}
.work:nth-child(4) .shot{background:#A08BBF}
.work:nth-child(5) .shot{background:#D98BA3}
.work:nth-child(6) .shot{background:#7FB8B0}
.work .meta{padding:20px 24px 24px;flex:1;display:flex;flex-direction:column}
.work .type{font-size:12.5px;color:var(--tangerine);font-weight:700;letter-spacing:1px}
.work h2{font-size:20px;margin:6px 0 4px}
.work p{font-size:14px;color:var(--navy-soft);flex:1}
.work .result{
  margin-top:14px;font-size:13.5px;color:var(--navy);
  background:var(--day);border-radius:12px;padding:8px 14px;
}
.work .result b{font-family:var(--round);color:var(--tangerine);font-weight:400;font-size:16px}

/* ── 列表頁：頁尾 CTA 條 ── */
.cta-strip{background:var(--cloud);padding:64px 0;text-align:center;position:relative;overflow:hidden}
.cta-strip h2{font-size:30px;margin-bottom:8px}
.cta-strip p{color:var(--navy-soft);margin-bottom:28px}
/* 攤攤趴在 CTA 角落 */
.cta-cat{position:absolute;right:6%;bottom:-6px;width:150px;opacity:.95}

/* ── 內頁：麵包屑＋案例頭 ── */
.case-hero{background:linear-gradient(180deg,var(--sky) 0%,var(--day) 100%);padding:44px 0 0}
.crumb{font-size:13.5px;color:var(--navy-soft);margin-bottom:26px}
.crumb a:hover{color:var(--navy)}
.case-hero .type{
  display:inline-block;font-family:var(--round);font-size:14px;color:var(--tangerine);
  background:#FDE6DA;border-radius:999px;padding:4px 16px;margin-bottom:14px;
}
.case-hero h1{font-size:clamp(32px,4.6vw,50px);margin-bottom:12px}
.case-hero .lead{color:var(--navy-soft);font-size:18px;max-width:36em;margin-bottom:40px}
.hero-shot{
  height:380px;border-radius:26px 26px 0 0;background:#6FA8C9;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--round);font-size:20px;letter-spacing:3px;
}
/* cover 有圖時 hero-shot 改用 img 標籤，補 object-fit 讓構圖跟佔位 div 一致 */
img.hero-shot{object-fit:cover;width:100%;display:block}

/* ── 內頁：主體內文 ── */
.case-body{padding:64px 0 72px}
.cols{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
article h2{font-size:26px;margin:44px 0 14px;display:flex;align-items:center;gap:12px}
article h2:first-child{margin-top:0}
article h2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tangerine);flex:none}
article p{font-size:16px;color:#3D5470;margin-bottom:14px}
article ul{margin:0 0 14px 22px;font-size:16px;color:#3D5470}
article li{margin-bottom:6px}

/* 老闆說：手寫感引言卡 */
.quote{
  background:var(--cloud);border-radius:22px;padding:28px 30px;margin:34px 0;
  box-shadow:0 4px 14px rgba(40,64,90,.07);position:relative;
}
.quote p{font-family:var(--round);font-size:19px;color:var(--navy);margin-bottom:8px}
.quote cite{font-style:normal;font-size:13.5px;color:var(--navy-soft)}
.quote::before{content:"“";font-family:var(--round);font-size:60px;color:var(--cream);position:absolute;top:-6px;left:18px}

/* ── 內頁：側欄 ── */
aside{position:sticky;top:92px}
.facts{background:var(--cloud);border-radius:22px;padding:28px;box-shadow:0 4px 14px rgba(40,64,90,.07)}
.facts h3{font-size:18px;margin-bottom:16px}
.facts dl{font-size:14.5px}
.facts dt{color:var(--navy-soft);font-size:12.5px;letter-spacing:1px;margin-top:14px}
.facts dd{margin:2px 0 0}
.aside-cta{
  display:block;text-align:center;margin-top:18px;
  font-family:var(--round);font-size:16px;color:#fff;background:var(--tangerine);
  border-radius:999px;padding:12px 0;box-shadow:0 5px 0 var(--tangerine-deep);
  transition:transform .12s ease, box-shadow .12s ease;
}
.aside-cta:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--tangerine-deep)}

@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .cta-cat{display:none}
  .cols{grid-template-columns:1fr}
  aside{position:static}
  .hero-shot{height:220px}
}