/* ===== 在线药师页面（列表版，参照产品中心）===== */
/* 消除页面横向溢出产生的绿色滚动条(背景图100vw突破等造成的横向滚动) */
html, body { overflow-x: hidden; }

/* Banner轮播 */
.pharmacist-banner-swiper {
    width: 100%;
    height: 500px;
}
.pharmacist-banner-img {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.pharmacist-banner-swiper .swiper-pagination-bullet {
    background: rgba(255,255,255,0.5);
}
.pharmacist-banner-swiper .swiper-pagination-bullet-active {
    background: #fff;
}
.pharmacist-banner-swiper .swiper-button-prev,
.pharmacist-banner-swiper .swiper-button-next {
    color: #fff;
}

/* 页面容器（与首页新闻中心标准容器一致，max-width:1500） */
.pharmacist-page-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 快捷导航（参照产品中心）：背景渐变趋于 药师信息板块背景图(赵德凤背景图 #e4e3e4) 的颜色，且颜色稍弱于背景图 */
.pharmacist-快捷-nav {
    margin: 0;
    padding: 0;              /* 无上下padding：区域内图片贴顶、姓名贴底 */
    background: linear-gradient(180deg,
        rgba(228,227,228,0.55) 0%,   /* 顶部略带背景图色(稍弱) */
        rgba(236,235,236,0.35) 50%,
        rgba(250,250,250,0.2) 100%); /* 向下渐弱 */
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
}
.pharmacist-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 295px;              /* 图片保持190px不变 */
    height: 300px;           /* 区域固定高度：图片放大不撑高(图片fill上部) */
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;   /* 不居中，首图对齐药师信息图片左缘 */
    align-items: stretch;
    margin-left: 164px;      /* 对齐药师信息图片左缘：药师信息区左侧有 左箭头(44px)+gap(120px)，故首图左移164px 与药师竖图对齐 */
}
.pharmacist-nav-list::-webkit-scrollbar {
    height: 6px;
}
.pharmacist-nav-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.pharmacist-nav-list::-webkit-scrollbar-track {
    background: #f0f0f0;
}
.pharmacist-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;     /* 图片水平居中(去人名后) */
    height: 100%;            /* 撑满定高区域 */
    justify-content: center; /* 图片垂直居中：上下距离相等 */
    text-decoration: none;
    padding: 0;
    border-radius: 8px;
    transition: all 0.3s;
    width: 190px;            /* 图片大小保持改前不变 */
    flex-shrink: 0;
}
.pharmacist-nav-img {
    flex: none;              /* 不填满，按自身尺寸 */
    width: 100%;             /* 图片宽=card宽 */
    height: calc(100% - 48px); /* 上下各留24px(一行文字)，居中使上下距离相等 */
    display: block;
    background-size: cover;  /* 等比缩放填满(保持宽高比不变形、不拉伸、不留白)，原始上传比例不变 */
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f0f0f0;
}
.pharmacist-nav-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    text-align: center;
}
/* 药师信息 左右切换滑块：内容正常流撑开(不挡页脚)，左右箭头绝对定位固定(不随内容高度变) */
.pharmacist-slider {
    position: relative;
    display: block;
}
.ph-nav-arrow {
    position: absolute;
    top: 50%;                  /* 实际 top 由 lockArrowPos JS 首次测算并固定 */
    transform: translateY(-50%);
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(0,0,0,0.25);   /* 半透明黑圆底(与首页首屏轮播箭头一致) */
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: #fff;
    font-size: 40px;
    font-weight: 100;
    line-height: 1;
    padding: 0 0 4px 0;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    user-select: none;
    z-index: 5;
    display: none;             /* ← 暂时屏蔽左右箭头(需放开时改回 display:flex) */
}
.ph-nav-arrow.ph-nav-prev { left: 0; }
.ph-nav-arrow.ph-nav-next { right: 0; }
.pharmacist-list {
    list-style: none;
    padding: 0 64px;           /* 左右留箭头空间，内容不被箭头遮挡 */
    margin-top: 0;
}
.pharmacist-item-li {
    padding: 0;
    margin: 0;
    list-style: none;
}
.ph-nav-arrow:hover {
    background: rgba(0,0,0,0.4);
    border-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.pharmacist-item-li {
    padding: 0;
    margin: 0;
    list-style: none;
}
/* 第一部分(药师简介 + tab卡片)容器：容器宽(与 li 及下方内容面板左右对齐)。药师背景图通过
   绝对定位突破到全屏视口铺满此整块；info 简介与 tab 卡片在容器内正常位置与 body 对齐 */
.pharmacist-item-top {
    position: relative;
    box-sizing: border-box;
    padding: 0;
    /* 容器宽(width:100%)跟随 li，保证 info 简介与 tab 卡片和下方内容面板(body)左右两端对齐。
       勿用 width:100vw —— vw 是物理视口像素，在本站 body{zoom:innerWidth/1920} 等比缩放下
       会被缩放为物理值/1920 的 100vw，导致低分辨率(zoom<1)时整块变窄、背景图横向不再铺满屏幕 */
    width: 100%;
    /* 高度用设计基准固定 px(1920 基线时原 vw 值=1920/2.342≈820)而非 vw：body zoom 已统一等比缩放，
       任意分辨率下都等于基线的等比缩放，背景图与内容高度一致铺满 */
    height: 820px;
    display: flex;
    flex-direction: column;
    /* 不设 overflow:hidden：背景图需向左右突破铺满全屏视口 */
}
/* 每屏药师背景图 = 该药师自己的列表图(sysImage) 完整显示在固定区域内(横向全屏)，
   cover 保证整张图等比缩放完整展示、不拉伸变形；仅覆盖第一部分，不覆盖下方独立内容面板 */
.pharmacist-item-bg {
    position: absolute;
    top: 0;
    /* 突破到全屏视口：用设计基准 1920px 宽 + 相对父容器(在 1920 设计基准下居中)水平置中，
       body zoom 会把这 1920px 等比缩放到物理屏任意分辨率 → 低分辨率也横向铺满。
       勿用 width:100vw —— vw 是物理视口像素，被 body zoom 双重缩放，低分辨率下会变窄不再铺满 */
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 100%;
    background-size: cover;      /* 铺满容器，任何分辨率下无白边；边缘允许轻微裁切，主体居中不受影响 */
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
}
/* 药师简介信息：浮在背景图上，靠右(参照站 jtld leader-info)，自然撑高 */
.pharmacist-item {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    /* 在 flex 容器内自适应：占据剩余空间，允许收缩，超出内容自动截断 */
    flex: 1;
    min-height: 0;                /* 关键：覆盖浏览器默认 min-height:auto，防止文字强行撑开父容器 */
    overflow: hidden;             /* 简介内容超出自动截断隐藏，不会顶到 tab 卡片 */
    padding: 0;
    /* 限制内容区域宽度和原来一致（基于 1500px 标准容器），防止因父容器变宽而布局走样 */
    width: 100%;
    max-width: 1332px;            /* 1500 - 20*2(.pharmacist-page-inner padding) - 64*2(.pharmacist-list padding) */
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;    /* 保持文字区域靠右，和原来 margin-left:auto 效果一致 */
}
/* 信息区文字：浮在药师背景图上靠右(参照站 jtld leader-info 深色文字)。不加独立背景，药师图即背景 */
.pharmacist-item-info {
    position: relative;
    z-index: 2;
    margin-left: auto;
    width: 55%;
    padding: 70px 5% 40px 3%;     /* 恢复原来的底部留白 */
    box-sizing: border-box;
    text-align: left;
    background: none;             /* 无额外背景色：药师图为背景，不单独给文字区加背景 */
    height: 100%;                 /* 撑满父容器可用高度 */
    max-height: 100%;
    overflow: hidden;               /* 超出部分隐藏，确保文字不会叠到 tab 上 */
}
.pharmacist-item-name {
    font-size: 40px;
    color: #e23c32;              /* 参照站 h1 红 */
    font-weight: bold;
    margin-bottom: 18px;
    line-height: 1.2;
    text-shadow: none;
}
.pharmacist-item-title {
    height: auto;
    font-size: 20px;
    color: #333;                 /* 参照站 h4 深灰 */
    font-weight: normal;
    line-height: 1.5;
    margin-bottom: 10px;
    padding: 0 0 0 14px;
    border-left: 4px solid #e23c32;
    background: none;
}
/* 摘要每行白色渐变背景：用 box-decoration-break:clone 让内联文本断行的每一行都渲染同一渐变背景。
   渐变改为淡白色半透明(左略白→右趋透明)，柔和融入药师背景图，不突兀 */
.pharmacist-item-brief {
    font-size: 17px;             /* 摘要字号加大一个单位 */
    color: #333;                 /* 参照站 p 深灰 */
    font-weight: bold;           /* 摘要加黑 */
    line-height: 40px;           /* 每行渐变背景的可读高度 */
    text-align: justify;
    margin-top: 18px;
    white-space: pre-wrap;
    text-shadow: none;
}
.pharm-brief-lines {
    display: inline;             /* 内联 → 断行时每行独立渲染渐变 */
    background: linear-gradient(to right, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.6) 45%, rgba(255,255,255,0.2) 100%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;   /* 断行每行都渲染同一渐变背景 */
    padding: 3px 12px 3px 6px;     /* 每行渐变上下留白，形成明显底色条 */
}
.pharmacist-item-text {
    font-size: 16px;
    color: #333;
    line-height: 36px;
    margin-top: 16px;
    text-shadow: none;
}
.pharmacist-item-text p {
    margin: 0 0 10px;
}
.pharmacist-item-rest {
    padding: 10px 0 20px 0;
    font-size: 14px;
    color: #555;
    line-height: 2;
}
.pharmacist-item-rest-inner {
    max-width: 100%;
}

/* 分页（沿用已有样式） */
.pharmacist-pages {
    text-align: center;
    margin-top: 30px;
}
.pharmacist-pages .pages {
    display: inline-flex;
    gap: 6px;
}
.pharmacist-pages .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s;
}
.pharmacist-pages .page-btn:hover {
    border-color: #2e7d32;
    color: #2e7d32;
}
.pharmacist-pages .page-btn.current {
    background: #2e7d32;
    color: #fff;
    border-color: #2e7d32;
}
.pharmacist-pages .page-btn.prev,
.pharmacist-pages .page-btn.next {
    width: auto;
    padding: 0 12px;
}
.pharmacist-pages .page-btn.disabled {
    color: #ccc;
    border-color: #eee;
    cursor: default;
    pointer-events: none;
}

/* ===== 药师信息 多板块（标题tab + 内容切换，参照参考站「集团领导」：tab独立块、内容独立面板且与tab分离） ===== */
/* 第一部分内的 tab 卡片区：浮在药师背景图上(z-index 2) */
.pharmacist-blocks {
    position: relative;
    z-index: 2;
    margin-top: 30px;             /* 与简介信息的间距 */
    padding: 0 0 10px 0;
    flex-shrink: 0;               /* 不被压缩，始终固定在板块底部 */
    /* 同步限制宽度，与 .pharmacist-item 左右对齐 */
    width: 100%;
    max-width: 1332px;
    margin-left: auto;
    margin-right: auto;
}
/* 无【】板块时的整段正文显示样式 */
.pharmacist-blocks.plain {
    border: none;
    border-radius: 0;
    padding: 10px 0 20px 0;
    margin-top: 0;
    background: transparent;
}
.pharmacist-blocks.plain p {
    margin: 0 0 10px;
}
.pharmacist-blocks.plain img {
    max-width: 100%;
    height: auto;
}
/* tab 区：参照参考站 speech-type — 等高白色圆角阴影卡片，一行最多3个，多出横向滚动+自动轮播(JS)，hover 暂停 */
.pharmacist-blocks-nav {
    display: flex;
    flex-wrap: nowrap;             /* 不换行，一行显示 */
    overflow-x: auto;              /* 超出横向滚动(轮播由JS控制scrollLeft) */
    gap: 2%;
    margin-top: 0;
    padding-bottom: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    justify-content: space-between; /* 卡片与内容面板左右两端对齐(动态分布，右端贴齐) */
    /* 注意：不设置 scroll-behavior:smooth —— 会与 JS 轮播 scrollLeft 逐像素滚动叠加而抖动 */
}
.pharmacist-blocks-nav::-webkit-scrollbar { height: 6px; }
.pharmacist-blocks-nav::-webkit-scrollbar-thumb { background: #c5c5c5; border-radius: 3px; }
.pharmacist-blocks-nav::-webkit-scrollbar-track { background: transparent; }
/* 每个tab是独立块：参照参考站 speech-type li (宽度调小1/3 → ×2/3) */
/* 2026-08-14 调整：固定只显示前3个板块，3个卡片 flex:1 等分铺满，
   与下方 .pharmacist-blocks-body 内容面板左右两端精确对齐(gap 2% 均匀分隔) */
.pharmacist-block-tab {
    flex: 1;                      /* 3个卡片等分铺满面板宽，左右贴齐 */
    width: auto;
    max-width: none;              /* 不限制最大宽，3卡片均分整行 */
    min-height: 120px;            /* 等比放大回参考站原高：卡片宽回到~445px(参考站30.9%),高对应120px */
    height: 120px;
    box-sizing: border-box;
    border-radius: 20px;          /* 圆圈角，四角始终圆 */
    background: #f5f5f5;          /* 卡片底色(用户指定 #f5f5f5 浅灰白)，与浅灰背景图区分 */
    border: none;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;             /* 背景图案由卡片圆角裁剪，四角圆 */
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 28px;              /* 参照参考站 type-body padding 0 28px */
    color: #333;
    font-size: 20px;              /* 原 18px 调大2个单位 → 20px */
    font-weight: bold;            /* 加粗 */
    white-space: normal;
    user-select: none;
    flex-shrink: 0;
}
/* hover/选中：背景图案从卡片下方滑入盖住卡片，图案浮在 #f5f5f5 底色之上，不改文字颜色 */
.pharmacist-block-tab::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -120px;               /* 默认藏在卡片下方(卡片显示 #f5f5f5) */
    width: 100%; height: 100%;
    background:
        url('../images/jtld_tab_bg.png') center center / cover no-repeat,
        linear-gradient(-54deg, rgba(235,93,79,0.85) 0%, rgba(243,161,153,0.85) 100%);
    transition: all 0.5s;
    border-radius: inherit;       /* 随卡片圆角 */
    z-index: 1;
}
.pharmacist-block-tab:hover::before,
.pharmacist-block-tab.active::before {
    bottom: 0;                    /* 图案滑上浮现在 #f5f5f5 底色之上，且不被灰底覆盖(它在上层) */
}
.pharmacist-block-tab:hover,
.pharmacist-block-tab.active {
    border: none;
    color: #333;                  /* 文字颜色与未选中一致(不改字色) */
}
/* tab 标题文字浮在装饰片之上(z-index 提升，解决文字被红渐变片遮挡) */
.pharmacist-block-tab-label {
    position: relative;
    z-index: 2;
    color: inherit;
}
/* 参照参考站 iconfont：右侧红色渐变大图标装饰（用 CSS 箭头模拟） */
.pharmacist-block-tab::after {
    content: "❯";
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    font-weight: normal;
    line-height: 1;
    background: linear-gradient(-54deg, #eb5d4f 0%, #f3a199 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    z-index: 2;
    transition: all 0.5s;
}
.pharmacist-block-tab:hover::after,
.pharmacist-block-tab.active::after {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: #fff;
}
/* 内容区：参照参考站 speech-box — 深红底 #e23c32 + 白色内面板 */
.pharmacist-blocks-body {
    margin-top: 30px;              /* 参照参考站 speech-box margin-top */
    background: #e23c32;           /* 深红底（参照参考站） */
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(220, 221, 225, 0.74);
    padding-bottom: 8px;
    min-height: 100px;
}
.pharmacist-block-pane {
    display: none;
    margin: 8px;
    padding: 40px 58px;            /* 参照参考站 speech-text.show padding 48px 58px */
    font-size: 16px;
    color: #333;
    line-height: 36px;             /* 参照参考站 p line-height */
    background: #fff url('../images/jtld_plate_bg.png') no-repeat calc(100% + 360px) -290px;  /* 参照参考站 speech-text: 白底+右侧角落背景图 */
    border-radius: 8px;
}
.pharmacist-block-pane.active {
    display: block;
}
.pharmacist-block-pane p {
    margin: 0 0 10px;
}
.pharmacist-block-pane img {
    max-width: 100%;
    height: auto;
}
/* ===== 药师图片板块(荣誉/资质): 6宫格 + 分页 + 自动循环轮播 ===== */
.ph-img-wrap {
    position: relative;
}
.ph-img-page {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.ph-img-page.active { display: grid; }
.ph-img-cell {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;              /* 卡片白底 */
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;        /* 上图下文卡片 */
}
.ph-img-box {
    position: relative;
    margin: 8px 8px 0 8px;         /* 四周白边 */
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
    cursor: zoom-in;
    flex: none;
}
.ph-img-box img {
    width: 100%;
    height: 220px;
    object-fit: contain;           /* 完整清晰显示整张图，不变形不裁剪 */
    display: block;
    transition: transform 0.3s;
}
.ph-img-box:hover img { transform: scale(1.03); }
.ph-img-hover {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.ph-img-box:hover .ph-img-hover { opacity: 1; }
.ph-img-name {
    display: block;
    padding: 10px 12px;
    font-size: 14px;
    color: #333;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ph-img-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.ph-img-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: all 0.3s;
}
.ph-img-dot.active { background: #2e7d32; width: 18px; border-radius: 5px; }
.ph-img-nodata { text-align: center; color: #999; padding: 20px 0; }

/* ===== 图片灯箱预览(滚轮缩放，不单独开窗口) ===== */
.ph-img-lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.82);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.ph-img-lightbox-img {
    max-width: 90%;
    max-height: 88%;
    object-fit: contain;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.1s;
    border-radius: 4px;
    background: #fff;
    cursor: grab;
}
.ph-img-lightbox-close {
    position: absolute;
    top: 20px; right: 28px;
    width: 44px; height: 44px;
    line-height: 40px;
    text-align: center;
    font-size: 34px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}
.ph-img-lightbox-close:hover { background: rgba(226,60,50,0.9); }
.ph-img-lightbox-tip {
    position: absolute;
    bottom: 24px; left: 0; right: 0;
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}

/* 响应式 */
@media (max-width: 1024px) {
    .pharmacist-item-img-wrap { flex: 0 0 55%; width: 55%; }   /* 中屏保持 55%/45% */
    .pharmacist-slider { gap: 16px; }
    .ph-nav-arrow { width: 44px; height: 44px; font-size: 28px; }
}
@media (max-width: 768px) {
    .pharmacist-item { flex-direction: column; align-items: center; text-align: center; }
    .pharmacist-item-img-wrap { width: 140px; }
    .pharmacist-nav-list { height: 220px; }
    .pharmacist-nav-link { width: 130px; }
    .pharmacist-slider { flex-direction: column; align-items: center; gap: 14px; }
    .pharmacist-list { width: 100%; }
}