/* ========================================
   壹博医生（新版）- 单轮播 3 张 slide
   设计稿 Pixso 5:216 为整帧 1920×1033：
   header（44 + 标题 ~123 = 167）+ 间距87 + slide(624, 渐变带) + 底部96 = 1033
   slide 按 1920:624 等比缩放（aspect-ratio），内容坐标按比例定位
   ======================================== */

.doctor-new {
  position: relative;
  background: linear-gradient(to top, #CED5D6, #FFFFFF);   /* 与 ebmedical 背景一致 */
  overflow: hidden;
  padding: 44px 0 77px;   /* 底部77 + 分页59+19 = 96 → 1920 时模块 1033 */
}

/* ---- Section Header (对齐 ebmedical-header：标题整图 + 两侧虚线垂直居中) ---- */
.doctor-new-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

/* Dashed line images (与 ebmedical-header-dash 一致) */
.doctor-new-dash {
  flex: 1;
  max-width: 830px;
  height: auto;
  min-width: 0;
  display: block;
  object-fit: contain;
}

/* Unified title image (与 ebmedical-header-title-img 一致: 9.5% ≈ 181px @1920) */
.doctor-new-header-title-img {
  flex-shrink: 0;
  display: block;
  width: 9.5%;
  height: auto;
  margin: 0 18px;
}

/* ---- Carousel ---- */
.doctor-new-swiper {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 46px auto 0;   /* 标题块(帧y205)与slide(帧y255)之间 50px 间距 → 内容区起点与设计帧对齐 */
}

/* ---- Slide (设计视觉带 1920×624; 随容器宽度等比缩放) ---- */
.doctor-new-slide {
  position: relative;
  aspect-ratio: 1920 / 624;
  height: auto;          /* 高度 = 宽度 × 624/1920, 任意宽度保持设计比例 */
  background: transparent;   /* 透出模块渐变（与 ebmedical 背景一致） */
  box-sizing: border-box;
  overflow: hidden;
}

/* ---- Visual（整帧 1920×624：背景渐变已烧进图内，3 张 slide 同尺寸同样式）---- */
.doctor-new-visual {
  position: absolute;
  z-index: 1;
  inset: 0;              /* 整帧铺满 slide */
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 1920×624 图与 slide 宽高比一致，cover 精确铺满不裁切 */
  max-width: none;
  display: block;
}

/* ---- Main text (文案-主 5:211: 590×313 @slide y67 x977) ---- */
.doctor-new-main {
  position: absolute;
  z-index: 1;
  left: 50.9%;      /* 977px @1920 */
  top: 10.74%;      /* 67px / 624 */
  width: 30.7%;     /* 590px / 1920 */
  max-width: none;
}

.doctor-new-kicker {
  font-size: min(47px, 2.45vw);   /* 47px @1920, 随视口等比 */
  font-weight: 700;
  color: #D60008;
  letter-spacing: 0.94px;
  line-height: 1.2;
  margin: 0 0 min(24px, 1.25vw);   /* kicker→title 间隔 24px, 等比缩放 */
}

.doctor-new-heading {
  font-size: min(63px, 3.28vw);   /* 63px @1920 */
  font-weight: 700;
  color: #100B0D;
  letter-spacing: 1.26px;
  line-height: 1.1;
  margin: 0;
}

/* name 下划线 (Pixso 直线 162: 46.9×4 #D60008 stroke 4; name下22px, desc上24px) */
.doctor-new-divider {
  display: block;
  width: min(47px, 2.45vw);   /* 47px @1920 */
  height: 4px;
  background: #D60008;
  margin: min(22px, 1.15vw) 0 min(24px, 1.25vw);
}

.doctor-new-desc {
  font-size: min(30px, 1.56vw);   /* 30px @1920 */
  font-weight: 400;
  color: #372D32;
  letter-spacing: 0.6px;
  line-height: 1.4;
  margin: 0;
}

/* ---- Tags (文案-副 5:215: 743×91 @slide y392 x975, horizontal row) ---- */
.doctor-new-tags {
  position: absolute;
  z-index: 1;
  left: 50.8%;      /* 975px @1920 */
  top: 62.82%;      /* 392px / 624 */
  width: 49%;       /* 流式宽度: 1920 时 941px→上限 743px 与设计一致; 窄屏随容器收缩, 不溢出 */
  max-width: 743px; /* 设计原宽, 仅 1920 附近生效 */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.doctor-new-tag {
  display: flex;
  align-items: center;
  gap: min(11px, 0.57vw);   /* 图标↔文字 11px @1920, 等比缩放 */
  flex: 0 1 auto;       /* 允许收缩：超长/无换行 tag 文本在容器内折行而非撑爆（线上 CMS tag 无 \n） */
  min-width: 0;
  max-width: 100%;      /* 单 tag 不超出 tags 容器宽 */
}

/* Vertical divider between tags (Pixso 直线 163/164: 0.5px #372D32, 两侧 ~26px) */
.doctor-new-tag + .doctor-new-tag {
  margin-left: min(26px, 1.35vw);   /* 设计: 线左侧间距 ~26px, 等比缩放 */
  border-left: 0.5px solid #372D32; /* 设计: 0.5px #372D32 抗锯齿细线, 任意 DPR 下还原视觉 */
  padding-left: min(26px, 1.35vw);  /* 设计: 线右侧间距 ~26px, 等比缩放 */
}

.doctor-new-tag-icon {
  width: min(70px, 3.65vw);   /* 70px @1920 */
  height: min(70px, 3.65vw);
  flex-shrink: 0;
  display: block;
}

.doctor-new-tag-text {
  font-size: min(22px, 1.15vw);   /* 22px @1920 */
  font-weight: 500;
  color: #372D32;
  line-height: 1.33;   /* 设计 lineHeight 29.73 / 22.28 */
  white-space: pre-line;   /* 数据内若有 \n 仍折行（兼容后台带换行的数据） */
  overflow-wrap: break-word;   /* 无换行超长文本（线上 CMS tag 单行）在容器宽度内折行，不溢出 */
  min-width: 0;   /* 允许 flex 内收缩，使 break-word 生效 */
}

/* ---- 了解更多 button (自由优化: 立体红胶囊 + 阴影浮起 + 悬停微交互) ---- */
.doctor-new-btn {
  position: absolute;
  z-index: 1;
  right: 10.06%;    /* 右缘 1727px @1920 */
  top: 86.22%;      /* 538px / 624 */
  box-sizing: border-box;   /* 移动端 padding 计入 height, 触控区高度精确 */
  height: min(52px, 2.7vw);   /* 更高的点击目标, 等比缩放 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 999px;      /* 真胶囊 */
  background: linear-gradient(135deg, #E4221B 0%, #CA0015 55%, #B30012 100%);   /* 立体品牌红 */
  box-shadow: 0 8px 18px rgba(202, 0, 21, 0.25);   /* 轻浮起 */
  color: #FFFFFF;
  font-size: min(28px, 1.46vw);   /* 28px @1920, 等比缩放 */
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1;
  padding: 0 30px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  -webkit-tap-highlight-color: transparent;   /* 移动端点击无闪灰 */
}

.doctor-new-btn-arrow {
  display: inline-block;
  width: 0.6em;      /* 箭头宽按字号比例, 去掉设计里夸张的固定 25px */
  text-align: center;
  font-size: min(30px, 1.56vw);   /* 与正文同量级, 不再 44px 顶满按钮高 */
  font-weight: 400;
  line-height: 1;
  transition: transform .25s ease;
}

.doctor-new-btn:hover {
  transform: translateY(-3px);   /* 整钮上浮 */
  box-shadow: 0 12px 26px rgba(202, 0, 21, 0.34);
  background: linear-gradient(135deg, #EF2A20 0%, #D60008 55%, #C00014 100%);   /* 悬停更亮 */
}

.doctor-new-btn:hover .doctor-new-btn-arrow {
  transform: translateX(4px);   /* 箭头向前推 */
}

.doctor-new-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(202, 0, 21, 0.28);
}

.doctor-new-btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* ---- Pagination (Pixso 滚动 0:1457: 3 dots 19px; 位于 slide 下方 59px, 跟随 slide 缩放) ---- */
.doctor-new .doctor-new-pagination {
  position: static;   /* 在流中跟随等比 slide */
  margin: 59px auto 0;   /* 设计: 渐变带底→分页 59px */
  width: auto;
  transform: none;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: min(38px, 1.98vw);   /* 38px @1920, 等比缩放 */
}

.doctor-new .doctor-new-pagination .swiper-pagination-bullet {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #160D0C;   /* 设计稿 椭圆97/98 未选中态 */
  opacity: 1;
  margin: 0;       /* 覆盖 swiper bullet 的 margin:0 5px */
}

.doctor-new .doctor-new-pagination .swiper-pagination-bullet-active {
  background: #CA0015;   /* 设计稿 椭圆96 选中态 */
}

/* ---- Background watermark logo (Pixso 0:1193: 723×125 @帧x1197,y908, 白 15%) ---- */
.doctor-new-watermark {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 37.7%;      /* 723px @1920 */
  height: auto;
  z-index: 0;
  pointer-events: none;
}

/* ========================================
   Responsive — 1024px (single column, static layout)
   ======================================== */
@media only screen and (max-width: 1024px) {
  .doctor-new {
    padding: 30px 0 0;   /* 单栏流式布局, 取消绝对定位的底部留白 */
  }
  .doctor-new-swiper {
    margin-top: 0;
  }
  .doctor-new-dash {
    max-width: 300px;
  }
  .doctor-new-slide {
    aspect-ratio: auto;   /* 静态布局: 高度由内容撑开 */
    height: auto;
    overflow: visible;
    padding: 20px 16px 60px;
  }
  /* Reset absolute positioning → normal flow */
  .doctor-new-visual,
  .doctor-new-main,
  .doctor-new-tags,
  .doctor-new-btn {
    position: static;
    z-index: auto;
  }
  .doctor-new-visual {
    width: 100%;
    height: auto;
    margin: 0 0 24px;
  }
  .doctor-new-main {
    width: 100%;
    margin-bottom: 30px;
  }
  .doctor-new-kicker {
    font-size: 32px;
    margin-bottom: 16px;
  }
  .doctor-new-heading {
    font-size: 42px;
  }
  .doctor-new-desc {
    font-size: 20px;
  }
  .doctor-new-divider {
    margin: 16px 0 20px;
  }
  .doctor-new-tags {
    width: 100%;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-bottom: 30px;
  }
  .doctor-new-tag {
    flex: none;
    min-width: 220px;
    max-width: 100%;   /* 长 tag 折行，不超 tags 行（桌面规则在断点内被覆盖，需补） */
  }
  .doctor-new-tag + .doctor-new-tag {
    border-left: none;
    padding-left: 0;
    margin-left: 0;   /* 清除等比区间的线前间距, 避免与容器 gap 叠加 */
  }
  .doctor-new-tag-icon {
    width: 48px;
    height: 48px;
  }
  .doctor-new-tag-text {
    font-size: 16px;
  }
  .doctor-new-btn {
    display: inline-flex;
    margin: 0;
    height: 48px;   /* 静态布局固定高度, 覆盖等比区间的 vw 值 */
    font-size: 20px;
    letter-spacing: 1px;
    padding: 0 30px;
  }
  .doctor-new-btn-arrow {
    font-size: 28px;
  }
  .doctor-new .doctor-new-pagination {
    position: static;
    transform: none;
    margin: 30px auto 0;
    gap: 24px;
    justify-content: center;
  }
  .doctor-new .doctor-new-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }
}

/* ========================================
   Responsive — 768px
   ======================================== */
@media only screen and (max-width: 768px) {
  .doctor-new {
    padding: 30px 0 0;   /* 与 ebmedical 一致 */
  }
  .doctor-new-header {
    padding: 0 16px;
  }
  .doctor-new-dash {
    display: none;
  }
  .doctor-new-header-title-img {
    width: 30%;   /* 与 ebmedical-header-title-img 移动端一致 */
    margin: 0;
  }

  .doctor-new-swiper {
    margin-top: 24px;   /* header 与下方轮播之间留空间 */
  }

  /* ---- Visual：左 50% 放大铺满，右 50% 移出屏幕右缘（全出血）----
     object-position: 5% → 显示窗口 x≈49–985，把三张关键图的主体（x494–575）尽量居中：
     slide1 照片正好居中、slide2 插画左缘仅裁 ~20px、slide3 合成图明显靠中。 */
  .doctor-new-slide {
    padding: 0 16px 24px;   /* hero 全出血后顶部不再留 padding；底部收窄让分页更贴 */
  }
  .doctor-new-visual {
    width: calc(100% + 32px);
    max-width: none;
    aspect-ratio: 3 / 2;        /* 390px → ~260px 高；配合 cover+5% 显左 ~50% */
    height: auto;
    max-height: 340px;          /* 平板 601–768px 不至于过高，自动变宽裁切 */
    object-fit: cover;
    object-position: 5% center; /* 主体居中；落地按三张图目测微调 */
    display: block;
    margin: 0 -16px 20px;       /* 左右 -16px 全出血；底部 20px 与内容分隔 */
  }

  /* ---- 内容卡片紧凑化（降高 + 通栏 CTA） ---- */
  .doctor-new-main {
    margin-bottom: 18px;
  }
  .doctor-new-divider {
    margin: 12px 0 16px;
  }
  .doctor-new-desc {
    line-height: 1.5;
  }
  .doctor-new-tags {
    flex-direction: column;   /* 三行标签竖排整行 */
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }
  .doctor-new-tag {
    width: 100%;
    min-width: 0;
    max-width: 100%;   /* 保险：长 tag 折行不超容器 */
  }
  .doctor-new-btn {
    display: flex;
    width: 100%;   /* 通栏 CTA，更大的触控区 */
    justify-content: center;
    height: 48px;
  }

  /* ---- 分页：收窄与卡片间距，导航底部留出空间 ---- */
  .doctor-new .doctor-new-pagination {
    margin: 10px auto 24px;
  }
}

/* ========================================
   Responsive — 480px (手机窄屏再缩一档)
   ======================================== */
@media only screen and (max-width: 480px) {
  .doctor-new {
    padding: 24px 0 0;
  }
  .doctor-new-kicker {
    font-size: 28px;
  }
  .doctor-new-heading {
    font-size: 36px;
  }
  .doctor-new-desc {
    font-size: 18px;
  }
  .doctor-new-divider {
    width: 28px;
  }
  .doctor-new-tag-icon {
    width: 40px;
    height: 40px;
  }
  .doctor-new-tag-text {
    font-size: 15px;
  }
  .doctor-new-btn {
    font-size: 18px;
  }
  .doctor-new-btn-arrow {
    font-size: 26px;
  }
  .doctor-new .doctor-new-pagination {
    gap: 20px;
  }
  .doctor-new .doctor-new-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }
}