/* =====================================================================
   堇心獸醫病理專科診所 — 網站樣式
   index.html 依螢幕寬度顯示三套版面：
     .bp-d 桌面版  1100px 以上
     .bp-t 平板版  720–1099px
     .bp-m 手機版  719px 以下
   版面樣式多數寫在 index.html 各元素上（與設計稿一致），這裡放字型、全站設定、
   斷點切換與滑鼠效果。下面三段分別只作用在各自的版面。

   色彩規範
   品牌紫   #514A70  Logo、主要按鈕、連結、圖示線條、區塊標題、小點綴
   文字     #1F2630 / #262B33 標題與強調 / #555E6B 內文 / #6A7280 次要 / #8A919C 最淡
   底色     #FFFFFF 白 / #F4F5F7 冷灰 / #E6EBF0 淺石板（聯絡、徽章、數字卡）
   頁尾     #22262E 深石板，文字 #B0B8C4
   ===================================================================== */
@font-face{font-family:'JinXin Sans';src:url('../assets/fonts/jinxin-sans-regular.woff') format('woff');font-weight:100 449;font-style:normal;font-display:swap;ascent-override:88%;descent-override:12%;line-gap-override:0%}
@font-face{font-family:'JinXin Sans';src:url('../assets/fonts/jinxin-sans-medium.woff') format('woff');font-weight:450 549;font-style:normal;font-display:swap;ascent-override:88%;descent-override:12%;line-gap-override:0%}
@font-face{font-family:'JinXin Sans';src:url('../assets/fonts/jinxin-sans-bold.woff') format('woff');font-weight:550 900;font-style:normal;font-display:swap;ascent-override:88%;descent-override:12%;line-gap-override:0%}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFFFF;line-height:1.45}
img{max-width:100%}
a{color:#514A70;text-decoration:none;transition:color .15s ease}a:hover{color:#3E3858}
a:focus-visible,button:focus-visible{outline:2px solid #514A70;outline-offset:3px}
[hidden]{display:none !important}
.jx-sec{scroll-margin-top:72px}
@media (max-width: 719px){.jx-sec{scroll-margin-top:56px}}

@media not all and (min-width: 1100px){.bp-d{display:none !important}}
@media not all and (min-width: 720px) and (max-width: 1099px){.bp-t{display:none !important}}
@media not all and (max-width: 719px){.bp-m{display:none !important}}

/* ---------- 桌面版 ---------- */
.bp-d .svc-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.bp-d .svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(34,33,42,.08);border-color:#D6D4DE !important}
.bp-d .svc-card::before{content:"";position:absolute;z-index:1;top:0;left:0;right:0;height:1px;background:#514A70;opacity:0;transition:opacity .15s ease}
.bp-d .svc-card:hover::before{opacity:1}
.bp-d a{color:#514A70;text-decoration:none;transition:color .15s ease}
.bp-d a:hover{color:#3E3858}
.bp-d .hero-nav-link{position:relative;transition:color .15s ease,opacity .15s ease}
.bp-d .hero-nav-link:hover{color:#514A70 !important;opacity:.72}
.bp-d .btn-primary{transition:background-color .15s ease,box-shadow .15s ease}
.bp-d .btn-primary:hover{background:#3E3858 !important;color:#FFFFFF !important;box-shadow:0 6px 16px rgba(62,56,88,.22)}
.bp-d .btn-outline{transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.bp-d .btn-outline:hover{border-color:#262B33 !important;color:#262B33 !important;background:#DCE2E9 !important}
.bp-d .logo-link{transition:opacity .15s ease}
.bp-d .logo-link:hover{opacity:.8}
/* Windows grid-fits CJK glyphs ~1px higher than macOS/iOS/Android; nudge the pill text down there only */
html.is-win .bp-d .tag-pill{padding-top:11px !important;padding-bottom:8px !important}
.bp-d .map-link{color:#B0B8C4 !important;transition:color .15s ease}
.bp-d .map-link:hover{color:#FFFFFF !important;text-decoration:underline;text-underline-offset:3px}
.bp-d .guide-link{color:#514A70;transition:color .15s ease}
.bp-d .guide-link:hover{color:#2F2A45;text-decoration:underline;text-underline-offset:3px}
.bp-d .art-card img{transition:transform .5s ease}
.bp-d .art-card:hover img{transform:scale(1.04)}
.bp-d .ct-row{flex:1 1 auto;transition:border-color .15s ease,box-shadow .15s ease}
.bp-d .ct-row:hover{border-color:#B9B4CC;box-shadow:0 6px 20px rgba(34,33,42,.06)}
.bp-d .soc{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:#B0B8C4;transition:color .15s ease;overflow:visible}
.bp-d .soc:hover{color:#FFFFFF}
.bp-d .soc svg{display:block;flex:none}

/* ---------- 平板版 ---------- */
.bp-t .svc-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.bp-t .svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(34,33,42,.08);border-color:#D6D4DE !important}
.bp-t .svc-card::before{content:"";position:absolute;z-index:1;top:0;left:0;right:0;height:1px;background:#514A70;opacity:0;transition:opacity .15s ease}
.bp-t .svc-card:hover::before{opacity:1}
.bp-t a{color:#514A70;text-decoration:none;transition:color .15s ease}
.bp-t a:hover{color:#3E3858}
.bp-t .hero-nav-link{position:relative;transition:color .15s ease,opacity .15s ease}
.bp-t .hero-nav-link:hover{color:#514A70 !important;opacity:.72}
.bp-t .btn-primary{transition:background-color .15s ease,box-shadow .15s ease}
.bp-t .btn-primary:hover{background:#3E3858 !important;color:#FFFFFF !important;box-shadow:0 6px 16px rgba(62,56,88,.22)}
.bp-t .btn-outline{transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.bp-t .btn-outline:hover{border-color:#262B33 !important;color:#262B33 !important;background:#DCE2E9 !important}
.bp-t .logo-link{transition:opacity .15s ease}
.bp-t .logo-link:hover{opacity:.8}
/* Windows grid-fits CJK glyphs ~1px higher than macOS/iOS/Android; nudge the pill text down there only */
html.is-win .bp-t .tag-pill{padding-top:11px !important;padding-bottom:8px !important}
.bp-t .menu-btn{transition:background-color .15s ease}
.bp-t .menu-btn:hover,.bp-t .menu-btn:active{background:rgba(38,43,51,.06) !important}
.bp-t .drawer-link{transition:color .15s ease,background-color .15s ease}
.bp-t .drawer-link:hover,.bp-t .drawer-link:active{color:#514A70 !important}
.bp-t .map-link{display:inline-flex;align-items:center;min-height:30px;color:#B0B8C4 !important;transition:color .15s ease}
.bp-t .map-link:hover{color:#FFFFFF !important;text-decoration:underline;text-underline-offset:3px}
.bp-t .guide-link{color:#514A70;transition:color .15s ease}
.bp-t .guide-link:hover{color:#2F2A45;text-decoration:underline;text-underline-offset:3px}
.bp-t section[id]{scroll-margin-top:52px}
.bp-t .art-card img{transition:transform .5s ease}
.bp-t .art-card:hover img{transform:scale(1.04)}
.bp-t .ct-row{flex:1 1 auto;transition:border-color .15s ease,box-shadow .15s ease}
.bp-t .ct-row:hover{border-color:#B9B4CC;box-shadow:0 6px 20px rgba(34,33,42,.06)}
.bp-t .soc{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#B0B8C4;transition:color .15s ease;overflow:visible}
.bp-t .soc:hover{color:#FFFFFF}
.bp-t .soc svg{display:block;flex:none}

/* ---------- 手機版 ---------- */
.bp-m .svc-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.bp-m .svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(34,33,42,.08);border-color:#D6D4DE !important}
.bp-m .svc-card::before{content:"";position:absolute;z-index:1;top:0;left:0;right:0;height:1px;background:#514A70;opacity:0;transition:opacity .15s ease}
.bp-m .svc-card:hover::before{opacity:1}
.bp-m a{color:#514A70;text-decoration:none;transition:color .15s ease}
.bp-m a:hover{color:#3E3858}
.bp-m .hero-nav-link{position:relative;transition:color .15s ease,opacity .15s ease}
.bp-m .hero-nav-link:hover{color:#514A70 !important;opacity:.72}
.bp-m .btn-primary{transition:background-color .15s ease,box-shadow .15s ease}
.bp-m .btn-primary:hover{background:#3E3858 !important;color:#FFFFFF !important;box-shadow:0 6px 16px rgba(62,56,88,.22)}
.bp-m .btn-outline{transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.bp-m .btn-outline:hover{border-color:#262B33 !important;color:#262B33 !important;background:#DCE2E9 !important}
.bp-m .logo-link{transition:opacity .15s ease}
.bp-m .logo-link:hover{opacity:.8}
/* Windows grid-fits CJK glyphs ~1px higher than macOS/iOS/Android; nudge the pill text down there only */
html.is-win .bp-m .tag-pill{padding-top:11px !important;padding-bottom:8px !important}
.bp-m .menu-btn{transition:background-color .15s ease}
.bp-m .menu-btn:hover,.bp-m .menu-btn:active{background:rgba(38,43,51,.06) !important}
.bp-m .drawer-link{transition:color .15s ease,background-color .15s ease}
.bp-m .drawer-link:hover,.bp-m .drawer-link:active{color:#514A70 !important}
.bp-m .map-link{display:inline-flex;align-items:center;min-height:38px;color:#B0B8C4 !important;transition:color .15s ease}
.bp-m .map-link:hover{color:#FFFFFF !important;text-decoration:underline;text-underline-offset:3px}
.bp-m .guide-link{color:#514A70;transition:color .15s ease}
.bp-m .guide-link:hover{color:#2F2A45;text-decoration:underline;text-underline-offset:3px}
.bp-m section[id]{scroll-margin-top:52px}
.bp-m .art-card img{transition:transform .5s ease}
.bp-m .art-card:hover img{transform:scale(1.04)}
.bp-m .ct-row{flex:1 1 auto;transition:border-color .15s ease,box-shadow .15s ease}
.bp-m .ct-row:hover{border-color:#B9B4CC;box-shadow:0 6px 20px rgba(34,33,42,.06)}
.bp-m .soc{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#B0B8C4;transition:color .15s ease;overflow:visible}
.bp-m .soc:hover{color:#FFFFFF}
.bp-m .soc svg{display:block;flex:none}

/* 聯絡區（桌面）：電話或 LINE 其中一個隱藏時，另一個佔滿整列 */
.ct-grid > a[data-cfg-show="phone"][hidden] + a[data-cfg-show="line_id"],
.ct-grid > a[data-cfg-show="phone"]:has(+ a[data-cfg-show="line_id"][hidden]){grid-column:1 / -1}