/* ============================================
   services.css — 共用樣式(人像寫真 / 樂團演出紀錄 / 寵物到府攝影)
   與 index.html 使用相同的配色變數與字體,維持全站一致的編輯感
   ============================================ */

:root{
  --paper:#e9e5dd;
  --paper-deep:#ddd7cb;
  --ink:#211f1b;
  --ink-soft:#544e43;
  --line: rgba(33,31,27,0.22);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Noto Sans TC', sans-serif; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{ font-family:'Noto Serif TC', serif; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.label{ font-size:11.5px; letter-spacing:0.22em; color:var(--ink-soft); text-transform:uppercase; }

/* ---------- 頂部簡易導覽 ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 8vw; border-bottom:1px solid var(--line);
}
.topbar .wordmark{ font-family:'Noto Serif TC', serif; font-size:15px; letter-spacing:0.14em; }
.topbar .back-link{ font-size:12px; letter-spacing:0.1em; color:var(--ink-soft); }
.topbar .back-link:hover{ color:var(--ink); }

/* ---------- HERO ---------- */
.service-hero{ padding:72px 8vw 40px; max-width:760px; margin:0 auto; }
.service-hero h1{
  font-size:clamp(28px,5.4vw,46px); font-weight:500; line-height:1.5; margin:14px 0 22px;
}
.service-hero .lede{ font-size:15px; line-height:2; color:var(--ink-soft); font-weight:300; max-width:600px; }

/* ---------- 內文區塊 ---------- */
.service-body{ padding:0 8vw 20px; max-width:660px; margin:0 auto; }
.service-body p{ font-size:15px; line-height:2.05; color:var(--ink); font-weight:300; margin:0 0 28px; }

/* ---------- 圖片區(之後放實際作品照片) ---------- */
.service-gallery{
  padding:20px 8vw 60px; max-width:900px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
.service-gallery img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.service-gallery .gallery-placeholder{
  aspect-ratio:4/5; border:1px dashed var(--line); display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:0.08em; color:var(--ink-soft); text-align:center; padding:16px;
}
@media (max-width:640px){
  .service-gallery{ grid-template-columns:repeat(2, 1fr); gap:8px; }
}

/* ---------- CTA ---------- */
.service-cta{ padding:20px 8vw 64px; max-width:660px; margin:0 auto; }
.btn{
  display:inline-block; padding:14px 28px; border:1px solid var(--ink);
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  transition:background .3s ease, color .3s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper); }

/* ---------- 延伸閱讀(連到其他兩個服務) ---------- */
.service-related{ padding:40px 8vw 64px; border-top:1px solid var(--line); max-width:900px; margin:0 auto; }
.service-related .label{ margin-bottom:18px; display:block; }
.related-links{ display:flex; flex-wrap:wrap; gap:14px; }
.related-links a{
  border:1px solid var(--line); padding:12px 20px; font-size:13px; letter-spacing:0.04em;
}
.related-links a:hover{ border-color:var(--ink); }

/* ---------- FOOTER(簡化版,呼應首頁footer) ---------- */
footer.service-footer{
  padding:48px 8vw 40px; text-align:center; border-top:1px solid var(--line);
}
footer.service-footer .serif{ font-size:18px; letter-spacing:0.1em; }
footer.service-footer .foot-meta{ margin-top:14px; font-size:12px; color:var(--ink-soft); }