/* ========================================
   壹博新闻（新版）
   设计稿 Pixso 6:47「壹博新闻」1938×976（bg 1920 全出血）
   背景渐变 + header 与 ebmedical.css 完全一致；watermark 与 doctors_new.css 一致
   内容：三栏卡片（最新 3 条新闻），render.D('data.home.news2') 数据驱动
   ======================================== */

.news-new {
  position: relative;
  background: linear-gradient(to top, #CED5D6, #FFFFFF);   /* 与 ebmedical 背景一致 */
  overflow: hidden;
  padding: 46px 0 80px;   /* 设计：顶 46 / 底 80.3（内容组底→帧底） */
}

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

/* Dashed line images（与 ebmedical-header-dash 一致） */
.news-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） */
.news-new-header-title-img {
  flex-shrink: 0;
  display: block;
  width: 9.5%;
  height: auto;
  margin: 0 18px;
}

/* ---- 主题内容区：三栏卡片（设计稿 Pixso 6:46：圆图 + 文案 + 红色描边胶囊按钮，栏间 1px 竖线）----
   设计稿内容组 1306.9×618.09 @ y278（标题底 y208 → 上间距 70px）。
   列宽不同（左 349 / 中 343.38 / 右 376.27），列间空隙 102.64 / 108.48，竖线贴右侧列左缘 27.5px */
.news-new-content {
  position: relative;
  z-index: 1;                      /* 盖住 watermark（z-index:0） */
  max-width: 1306.9px;
  margin: 70px auto 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.news-new-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;            /* 子项纵向；圆居中/文字左对齐/按钮左对齐各自控制 */
  width: 349px;                    /* 左列宽 */
  max-width: 100%;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease;
}

.news-new-card:hover {
  transform: translateY(-4px);
}

.news-new-card:first-child {
  margin-left: 27.13px;            /* 设计：内容组内左列 x=27.13（左侧留白） */
}

/* 中列（媒体报道）：列宽 343.38 */
.news-new-card--mid {
  width: 343.38px;
}

/* 右列（公益服务）：标题最长，列宽 376.27（设计 fill_container 撑开） */
.news-new-card--right {
  width: 376.27px;
}

/* 长方形封面：固定图框，三列同宽同高（列宽 349/343/376 各异，width:100% 会让图框大小不一）。
   比例固定 = 后台封面原图 2174×918 ≈ 2.37:1；object-fit:cover 兜底填充；圆角 + 柔和投影 */
.news-new-cover {
  box-sizing: border-box;
  width: 330px;                    /* 固定图框宽：三列一致，视觉统一（原圆形亦为固定 294.5 居中） */
  max-width: 100%;                 /* 窄列兜底不溢出 */
  aspect-ratio: 2174 / 918;        /* 固定比例 = 后台封面原比例，任意源图都按此比例裁剪 */
  object-fit: cover;
  display: block;
  border-radius: 8px;
  filter: drop-shadow(0 10px 18px rgba(138, 130, 129, 0.3));
  margin: 0 auto;                  /* 列内水平居中（原圆形近居中偏左 5.5px） */
}

.news-new-body {
  box-sizing: border-box;
  width: 100%;
  margin-top: 20px;                 /* 设计：图像底→文字列顶（原圆形 25.15，矩形更矮收得更近） */
  min-height: 270px;                /* 内容紧密高 ~268 + 少量余量，三栏等高 */
  padding-bottom: 28px;             /* 按钮底→列底 28px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.news-new-category {
  font-size: 32px;
  font-weight: 700;
  color: #D60008;
  letter-spacing: 1.28px;
  line-height: 1.53;               /* 48.98 / 32 */
  margin: 0;
}

.news-new-subtitle {
  font-size: 24px;
  font-weight: 500;
  color: #1F191C;
  letter-spacing: 0.96px;
  line-height: 1.57;               /* 37.73 / 24 */
  white-space: nowrap;             /* 设计稿副标题恒为一行（左列 349.44px 文本 ≈ 349px 列宽，易误换行） */
  max-width: 100%;                 /* 超出卡片宽度时截断，不撑破列宽 */
  overflow: hidden;                /* 超出一行隐藏 */
  text-overflow: ellipsis;         /* 超出一行显示省略号 */
  margin: -2.92px 0 0;             /* 设计：副标题顶 46.05 = 分类行盒底 48.98 - 2.93，视觉紧贴字形 */
}

.news-new-headline {
  font-size: 20px;
  font-weight: 400;
  color: #372D32;
  line-height: 29.8px;
  margin: 30.5px 0 0;              /* 设计：副标题底(83.78)→标题顶(114.22) = 30.44，无下划线 */
  display: -webkit-box;            /* 超 2 行隐藏省略（line-clamp） */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-new-source {
  font-size: 14px;
  color: #6E6567;
  line-height: 28px;
  margin: 4.4px 0 0;               /* 设计：标题底(114.22+59.6)→来源顶(178.22) = 4.4px */
}

/* 红色描边胶囊「了解更多 >」（设计 340.84×33.3 radius 16.65，0.855px #D60008 描边，左对齐列） */
.news-new-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 340.84px;
  max-width: 100%;
  height: 33.3px;
  border: 0.855px solid #D60008;   /* 设计 矩形111 strokeWeight 0.855 */
  border-radius: 16.65px;
  color: #D60008;
  font-size: 14.7px;
  white-space: nowrap;
  margin-top: auto;                 /* 按钮推到列底留 28px（与竖线底对齐） */
  align-self: flex-start;           /* 设计：按钮左对齐列左缘（x≈0.5） */
}

.news-new-btn-arrow {
  font-size: 24.5px;
  line-height: 1;
}

/* 栏间竖分割线（设计 矩形110/120/123：1px #6E6567，高 260.26，贴列底留 28px，偏右贴右侧列 27.5px）
   实现：1px 实色矩形 + news_new.js 动态平移到整数像素列。纯 CSS 亚像素定位时 1px 线会被
   浏览器 hairline 抗锯齿成半透明发虚（竖线设计 x 恰落在亚像素），JS 对齐后单像素 100% 实心。
   竖线容器 = 列间空隙占位（102.64 / 108.48） */
.news-new-vline {
  position: relative;
  width: 102.64px;                 /* 空隙1（左→中） */
  height: 260.26px;
  align-self: flex-end;
  margin-bottom: 28px;             /* 竖线底→列底 28px（与按钮底对齐） */
}

.news-new-vline-bar {
  position: absolute;
  right: 28.49px;                   /* 锚定右缘：距相邻卡片 27.49px（设计），容器被 flex 压缩时 bar 跟随卡片，不溢出重叠 */
  top: 0;
  width: 1px;
  height: 260.26px;
  background: #6E6567;             /* 配合 news_new.js 平移到整数像素列 → 单像素实心无抗锯齿 */
}

/* 空隙2（中→右）108.48 宽，线左缘距右列左缘 27px → bar 右缘距相邻卡片 27px */
.news-new-vline--2 {
  width: 108.48px;
}

.news-new-vline--2 .news-new-vline-bar {
  right: 28px;
}

/* ---- Background watermark logo（Pixso 0:1195: 723×125 @帧右下, 白 15%）---- */
.news-new-watermark {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 37.7%;      /* 723px @1920 */
  height: auto;
  z-index: 0;
  pointer-events: none;
}

/* ========================================
   Responsive — 1200px（3 栏固定宽 349+343+376+空隙≈1096，竖线容器在 <1200 被压到 <43px、
   bar 右锚定会越界重叠前卡 → 1200 以下单列堆叠；对齐 doctors_new/feature_new）
   ======================================== */
@media only screen and (max-width: 1200px) {
  .news-new-dash {
    max-width: 300px;
  }
  /* 三栏（349×3 + 竖线 ≈1050）放不下 1200 → 单列堆叠（对齐 feature_new） */
  .news-new-content {
    width: 100%;          /* 窄屏内容通栏 + 16px 内边距（与 doctors_new 一致） */
    box-sizing: border-box;
    padding: 0 16px 24px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .news-new-vline {
    display: none;        /* 单列堆叠无栏间分割线 */
  }
  .news-new-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 440px;
  }
  .news-new-card:first-child {
    margin-left: 0;    /* 单列堆叠：移除桌面第一列左边距 */
  }
  .news-new-cover {
    width: 100%;          /* 单列堆叠：图铺满卡片（桌面固定 330 在此覆盖），三张卡片等宽 → 图一致 */
    margin: 0 auto;      /* 单列堆叠：矩形封面居中 */
  }
  .news-new-body {
    min-height: 0;        /* 单列不再强制等高 */
    padding-bottom: 0;
  }
  .news-new-btn {
    margin-top: 16px;
    align-self: center;    /* 单列堆叠按钮居中 */
  }
}

/* ========================================
   Responsive — 768px（移动端，镜像 doctors_new/feature_new）
   ======================================== */
@media only screen and (max-width: 768px) {
  .news-new {
    padding: 30px 0 40px;
  }
  .news-new-header {
    padding: 0 16px;
  }
  .news-new-dash {
    display: none;
  }
  .news-new-header-title-img {
    width: 30%;   /* 与 ebmedical-header-title-img 移动端一致 */
    margin: 0;
  }
  .news-new-content {
    gap: 36px;
    margin-top: 30px;
    padding: 0 16px 24px;
  }
  .news-new-cover {
    width: 100%;          /* 移动端矩形封面铺满卡片（中心对齐已由 margin:0 auto 保证） */
    max-width: 420px;
    margin: 0 auto;
  }
  .news-new-category {
    font-size: 26px;
  }
  .news-new-subtitle {
    font-size: 20px;
  }
  .news-new-headline {
    font-size: 18px;
    line-height: 1.5;
  }
  .news-new-btn {
    width: 100%;
    max-width: 340px;
    height: 40px;
    font-size: 15px;
    border-radius: 20px;
    align-self: center;    /* 移动端按钮居中 */
  }
  .news-new-btn-arrow {
    font-size: 26px;
  }
}

/* ========================================
   Responsive — 480px（手机窄屏再缩一档，镜像 doctors_new/feature_new）
   ======================================== */
@media only screen and (max-width: 480px) {
  .news-new {
    padding: 24px 0 32px;
  }
  .news-new-content {
    gap: 30px;
  }
  .news-new-cover {
    width: 100%;
  }
  .news-new-category {
    font-size: 24px;
  }
  .news-new-subtitle {
    font-size: 18px;
  }
  .news-new-headline {
    font-size: 16px;
    line-height: 1.55;
  }
}