/* =============================================================
   case-beauty.css —— 美业品牌案例详情专属样式
   骨架：左文右沙龙图首屏 → chips 条 → 窄栏背景
        → 价格服务卡 → 横向四步预约流程 → 三档会员等级
        → 深色要点条 → 效果数据 → 评价 → 互链 → CTA
   ============================================================= */

main{padding-top:calc(var(--header-h) + var(--topbar-h))}

/* 深色区块上的 section-tag 配色（替代内联样式） */
.section-tag--light{color:var(--earth-light)}
.section-tag--light::before{background:var(--earth-light)}

/* ---------- 1. 首屏 ---------- */
.bt-hero{padding:56px 0 72px;background:
  radial-gradient(900px 480px at 90% 0%, rgba(179,154,124,.16), transparent 60%),
  var(--paper)}
.bt-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.bt-hero-kicker{font-size:12.5px;letter-spacing:.3em;color:var(--earth-deep);margin:20px 0 14px}
.bt-hero-title{font-size:clamp(32px,4.6vw,50px);line-height:1.24;margin-bottom:18px}
.bt-hero-sub{font-size:15.5px;color:var(--ink-soft);line-height:1.95;max-width:540px;margin-bottom:28px}
.bt-hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.bt-hero-photo{position:relative}
.bt-hero-photo img{width:100%;box-shadow:var(--shadow);border:1px solid var(--line)}
.bt-hero-phototag{
  position:absolute;left:-18px;bottom:-16px;background:var(--brown);color:#FBF7EF;
  font-size:12.5px;padding:12px 18px;max-width:72%;
}

/* ---------- 2. chips 条 ---------- */
.bt-chips{background:var(--paper-deep);padding:18px 0;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- 3. 背景窄栏 ---------- */
.container--narrow{max-width:820px}
.container--narrow p{color:var(--ink-soft);line-height:2}

/* ---------- 4. 服务价格卡 ---------- */
.bt-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:10px}
.bt-service{background:var(--paper);border:1px solid var(--line);padding:28px 22px}
.bt-service-price{display:block;font-family:var(--font-serif);font-size:26px;color:var(--earth-deep);margin-bottom:12px}
.bt-service-price small{display:block;font-family:var(--font-sans);font-size:12px;color:var(--ink-faint);margin-top:4px}
.bt-service h3{font-size:17px;margin-bottom:10px}
.bt-service p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

/* ---------- 5. 横向预约流程 ---------- */
.bt-bookflow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:10px;position:relative}
.bt-book{padding:26px 24px;border:1px solid var(--line);border-right:none;background:var(--paper)}
.bt-book:last-child{border-right:1px solid var(--line)}
.bt-book-no{
  display:block;font-size:11.5px;letter-spacing:.25em;color:var(--brown);margin-bottom:12px;
}
.bt-book h3{font-size:17px;margin-bottom:8px}
.bt-book p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

/* ---------- 6. 会员等级 ---------- */
.bt-tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px;align-items:stretch}
.bt-tier{background:var(--paper);border:1px solid var(--line);padding:30px 28px;position:relative}
.bt-tier--hot{border-top:3px solid var(--earth);box-shadow:var(--shadow-soft)}
.bt-tier-flag{
  position:absolute;top:-13px;right:18px;background:var(--earth);color:#FBF7EF;
  font-size:11.5px;letter-spacing:.1em;padding:4px 12px;
}
.bt-tier h3{font-size:18px;margin-bottom:16px}
.bt-tier ul{display:grid;gap:10px}
.bt-tier li{position:relative;padding-left:20px;font-size:13.5px;color:var(--ink-soft);line-height:1.7}
.bt-tier li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--earth)}

/* ---------- 7. 深色要点 ---------- */
.bt-tip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(201,193,178,.15);border:1px solid rgba(201,193,178,.15)}
.bt-tip{background:var(--dark);padding:26px 20px}
.bt-tip b{display:block;font-size:14px;letter-spacing:.1em;color:var(--earth-light);margin-bottom:10px}
.bt-tip p{font-size:13.5px;color:#C9C1B2;line-height:1.85}

/* ---------- 8. 效果 ---------- */
.bt-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:10px}
.bt-result{border:1px solid var(--line);background:var(--paper);padding:28px 22px;text-align:center}
.bt-result p:last-child{font-size:13px;color:var(--ink-soft);margin-top:12px;line-height:1.8}
.bt-result-note{margin-top:22px;text-align:center;font-size:12.5px;color:var(--ink-faint)}

/* ---------- 9. 评价 ---------- */
.bt-quote-sign{margin-top:16px;font-size:13.5px;color:var(--ink-faint)}

/* ---------- 10. 互链 ---------- */
.bt-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bt-related{background:var(--paper);border:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column;gap:8px}
.bt-related h3{font-size:16.5px}
.bt-related p{font-size:13.5px;color:var(--ink-soft);line-height:1.8;flex:1}

/* ---------- 11. CTA ---------- */
.bt-cta-band{background:
  radial-gradient(760px 340px at 85% 15%, rgba(179,154,124,.18), transparent 60%),
  var(--paper-deep)}
.bt-cta-wrap{display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:center}
.bt-cta-title{font-size:clamp(24px,3vw,34px);margin:10px 0 10px}
.bt-cta-sub{color:var(--ink-soft);margin-bottom:24px}
.bt-cta-contacts{display:flex;gap:14px;flex-wrap:wrap}
.bt-cta-contact{
  display:inline-flex;align-items:center;gap:10px;background:var(--paper);
  border:1px solid var(--line);padding:12px 18px;
}
.bt-cta-contact svg{width:17px;height:17px;fill:var(--earth-deep)}
.bt-cta-contact span{display:flex;flex-direction:column;line-height:1.3;font-size:14.5px;font-weight:600}
.bt-cta-contact small{font-size:11px;color:var(--ink-faint);font-weight:400;letter-spacing:.1em}

/* ---------- 响应式 ---------- */
@media (max-width:991px){
  .bt-hero-grid{grid-template-columns:1fr;gap:36px}
  .bt-hero-phototag{position:static;max-width:none;margin-top:10px}
  .bt-service-grid{grid-template-columns:1fr 1fr}
  .bt-bookflow{grid-template-columns:1fr 1fr}
  .bt-book{border-right:1px solid var(--line);border-bottom:none}
  .bt-tier-grid{grid-template-columns:1fr}
  .bt-tip-grid{grid-template-columns:1fr 1fr}
  .bt-result-grid,.bt-related-grid{grid-template-columns:1fr 1fr}
  .bt-cta-wrap{grid-template-columns:1fr}
}
@media (max-width:560px){
  .bt-service-grid,.bt-bookflow,.bt-result-grid,.bt-related-grid,.bt-tip-grid{grid-template-columns:1fr}
}