/* ============================================================
   依緹美學 — team 頁面樣式（由原網站 team.html 內嵌樣式抽出，內容未變更）
   ============================================================ */
/* ============================================================
   醫師團隊 — 頁面專屬樣式
   ============================================================ */

/* ---------- 內頁 HERO ---------- */
.phero{position:relative;height:62vh;min-height:440px;overflow:hidden;color:#fff;
  display:flex;align-items:flex-end;}
.phero__bg{position:absolute;inset:-4%;}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;
  filter:sepia(.14) saturate(1.05) contrast(1.02);}
.phero__veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(24,11,7,.72),rgba(24,11,7,.34) 52%,rgba(24,11,7,.08)),
             linear-gradient(0deg,rgba(24,11,7,.56),transparent 46%);}
.phero__in{position:relative;z-index:3;width:100%;padding:0 var(--pad) clamp(48px,7vw,92px);}
.phero__en{font-family:var(--ff-en);font-weight:300;text-transform:uppercase;
  font-size:clamp(34px,6.4vw,88px);line-height:1.1;letter-spacing:.09em;margin:0 0 14px;
  text-shadow:0 8px 40px rgba(0,0,0,.4);}
.phero__en .ln{display:block;overflow:hidden;}
.phero__en.split .ch{display:inline-block;transform:translateY(115%);opacity:0;}
.phero__en.split.play .ch{animation:chUp .95s var(--ease) both;}
.phero__tc{font-size:clamp(15px,1.8vw,21px);letter-spacing:.3em;margin:0;
  opacity:0;transform:translateY(14px);animation:fadeUp 1s .9s var(--ease) forwards;}

/* ---------- 麵包屑 ---------- */
.crumb{padding:22px var(--pad);font-family:var(--ff-sans);font-size:var(--fs-xs);
  letter-spacing:.18em;color:var(--ink-3);border-bottom:1px solid var(--line);}
.crumb a{display:inline-flex;align-items:center;min-height:44px;transition:color .4s var(--ease);}
.crumb a:hover{color:var(--brand);}
.crumb i{font-style:normal;margin:0 10px;color:var(--line);}

/* ---------- 開場 ---------- */
.tintro{position:relative;padding:var(--sec-y) var(--pad) var(--sp-7);
  text-align:center;overflow:hidden;}
.tintro__ghost{top:16%;left:50%;transform:translateX(-50%);
  font-size:clamp(70px,14vw,200px);color:rgba(157,117,83,.05);}
.tintro__in{position:relative;z-index:2;max-width:780px;margin:0 auto;}
.tintro h2{font-size:clamp(20px,2.5vw,31px);font-weight:400;letter-spacing:.16em;
  line-height:var(--lh-loose);margin:26px 0 26px;}
.tintro p{font-size:var(--fs-md);line-height:2.4;color:var(--ink-2);letter-spacing:.08em;margin:0;}

/* ---------- 醫師切換列 ---------- */
.tnav{
  position:sticky;top:74px;z-index:80;
  display:flex;justify-content:center;gap:0;flex-wrap:wrap;
  background:rgba(244,243,241,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:0 var(--pad);
}
.tnav button{
  position:relative;background:none;border:0;cursor:pointer;
  padding:20px clamp(16px,2.6vw,36px);
  font-family:inherit;font-size:var(--fs-md);letter-spacing:.16em;color:var(--ink-3);
  transition:color .45s var(--ease);
}
.tnav button::after{
  content:"";position:absolute;left:50%;bottom:-1px;width:0;height:2px;
  background:var(--brand-deep);transform:translateX(-50%);
  transition:width .5s var(--ease);
}
.tnav button:hover{color:var(--ink);}
.tnav button.on{color:var(--brand-deep);}
.tnav button.on::after{width:calc(100% - clamp(24px,4vw,48px));}

/* ---------- 醫師區塊 ---------- */
.doc-sec{
  position:relative;padding:var(--sec-y) var(--pad);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.doc-sec:nth-child(even){background:#FBF6EC;}
.doc-sec__grid{
  max-width:var(--w-page);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,5vw,84px);align-items:start;
}
/* 照片：拱形框＋副圖 */
.doc-photo{position:relative;}
.doc-photo__main{
  position:relative;overflow:hidden;border-radius:999px 999px 8px 8px;
  box-shadow:0 40px 90px -55px rgba(60,30,20,.6);
  background:#F3EADF;
}
.doc-photo__main img{
  width:100%;aspect-ratio:.74/1;object-fit:cover;display:block;
  filter:sepia(.08) saturate(.96) contrast(1.03);
  transition:transform 1.6s var(--ease),filter .8s var(--ease);
}
.doc-photo:hover .doc-photo__main img{transform:scale(1.04);filter:sepia(0) saturate(1.02);}
/* 形象照進場：底色簾幕向右退開，露出照片。
   不用縮放，避免與 hover 的 scale 打架；簾幕不接受點擊。 */
.doc-photo__main::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--bg);transform:translateX(0);
  transition:transform 1.05s var(--ease);
}
.doc-photo.in .doc-photo__main::after{transform:translateX(101%);}
/* 學經歷清單逐條浮現，位移比預設的 34px 小，避免小字跳動過大 */
.cred ul.stg > li{transform:translateY(12px);}
.doc-spec.stg > span{transform:translateY(10px);}
.doc-photo__thumbs{display:flex;gap:10px;margin-top:14px;}
.doc-photo__thumbs button{
  flex:1;padding:0;border:0;background:none;cursor:pointer;overflow:hidden;
  border-radius:4px;opacity:.5;transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.doc-photo__thumbs button img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.doc-photo__thumbs button:hover{opacity:.85;transform:translateY(-3px);}
.doc-photo__thumbs button.on{opacity:1;box-shadow:0 0 0 1px var(--gold);}

/* 文字 */
.doc-name{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 8px;}
.doc-name b{font-size:clamp(26px,3.2vw,40px);font-weight:400;letter-spacing:.12em;}
.doc-name i{font-style:normal;font-size:var(--fs-md);letter-spacing:.2em;color:var(--ink-3);}
.doc-en{font-family:var(--ff-en);font-size:var(--fs-base);letter-spacing:.34em;color:var(--gold);
  text-transform:uppercase;margin:0 0 26px;}
.doc-spec{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;}
.doc-spec span{
  padding:9px 20px;border-radius:999px;border:1px solid var(--gold);
  font-size:var(--fs-sm);letter-spacing:.1em;color:var(--brand);background:rgba(255,255,255,.6);
}
.cred{margin-bottom:30px;}
.cred h4{
  display:flex;align-items:center;gap:12px;margin:0 0 16px;
  font-size:var(--fs-base);font-weight:500;letter-spacing:.26em;color:var(--brand);
}
.cred h4::before{content:"";width:20px;height:1px;background:var(--gold);flex:none;}
.cred ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 30px;}
.cred li{
  position:relative;padding-left:18px;margin-bottom:9px;
  font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-2);letter-spacing:.04em;
}
.cred li::before{
  content:"";position:absolute;left:2px;top:.9em;width:4px;height:4px;
  border-radius:50%;background:var(--beige);
}
.doc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}

/* ---------- 結語 ---------- */
.closing{position:relative;padding:var(--sec-y) var(--pad);text-align:center;overflow:hidden;}
.closing__in{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.closing h2{font-size:clamp(20px,2.4vw,30px);font-weight:400;letter-spacing:.16em;
  line-height:var(--lh-loose);margin:24px 0 32px;}
.closing__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

@media(max-width:1180px){
  .cred ul{grid-template-columns:1fr;}
}
@media(max-width:900px){
  .phero{height:52vh;}
  /* 醫師切換列：置頂導覽不適合藏內容。
     原本用固定寬度＋橫向捲動，320px 時「李蕎如 醫師」有 24% 被切掉且無提示。
     改為三等分平均分配，三個分頁一定同時可見（醫師固定 3 位）。
     仍保留 overflow-x:auto 作為保險，但正常情況不會出現捲動。 */
  .tnav{
    top:70px;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:0 var(--sp-2);
  }
  .tnav::-webkit-scrollbar{display:none;}
  .tnav button{
    flex:1 1 0;min-width:0;padding:16px 2px;
    font-size:var(--fs-sm);letter-spacing:.02em;white-space:nowrap;
  }
  .tnav button.on::after{width:calc(100% - 12px);}
  .doc-sec__grid{grid-template-columns:1fr;}
  .doc-photo__main{max-width:360px;}
}