/* 新闻模块中文使用思源宋体 Light 子集。文件名带时间戳，更新字体后改这里即可绕过缓存。
   只覆盖中文页面（html[lang="zh-cn"]），英文新闻继续用原来的 Helvetica。 */
@font-face {
  font-family: "NewsHanSerif-Light";
  src: url("https://images.ushopal.com/NewsHanSerif-Light-202610131451.woff2") format("woff2"),
       url("https://images.ushopal.com/NewsHanSerif-Light-202610131451.woff") format("woff"),
       url("https://images.ushopal.com/NewsHanSerif-Light-202610131451.ttf") format("truetype"),
       url("https://images.ushopal.com/NewsHanSerif-Light-202610131451.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

html[lang="zh-cn"] .news-block,
html[lang="zh-cn"] .article-page {
  font-family: "NewsHanSerif-Light", "Songti SC", "STSong", serif;
}

html[lang="zh-cn"] .news-block .news-heading-kicker,
html[lang="zh-cn"] .news-block .news-heading-title,
html[lang="zh-cn"] .news-block .news-card-date,
html[lang="zh-cn"] .news-block .news-card-title,
html[lang="zh-cn"] .article .breadcrumb,
html[lang="zh-cn"] .article .eyebrow,
html[lang="zh-cn"] .article h1,
html[lang="zh-cn"] .article .byline,
html[lang="zh-cn"] .article .byline strong,
html[lang="zh-cn"] .article h2,
html[lang="zh-cn"] .article .article-lead,
html[lang="zh-cn"] .article p,
html[lang="zh-cn"] .article li,
html[lang="zh-cn"] .article figcaption,
html[lang="zh-cn"] .article blockquote,
html[lang="zh-cn"] .article blockquote p,
html[lang="zh-cn"] .news-source,
html[lang="zh-cn"] .news-source p,
html[lang="zh-cn"] .news-source strong {
  font-family: "NewsHanSerif-Light", "Songti SC", "STSong", serif;
  font-weight: 300;
}

/* ==========================================================================
   新闻模块样式
   1) 首页「最新活动」轮播卡片（作用域限定 .news-block，不影响首页其它区块）
   2) 新闻详情页排版（作用域限定 .article-page / .article）
   配色沿用官网主色：强调红 #B50D0D、标题 #4b4e53、正文 #363636、浅底 #f5f3f0
   字体统一使用首页默认字体："Helvetica Neue", Helvetica, Arial, sans-serif
   轮播卡片配色参照旧版海报：底色 #22140A / 边框 #7B726B / 标题 #FCFBF7 / 日期 #DDDCDC
   ========================================================================== */

/* ==================== 1. 首页「最新活动」轮播卡片 ==================== */

/* 区块标题：背景图上印着「IN THE NEWS / 最新动态」，这里用同色色块盖掉图上原字，
   再放真实 HTML 文字 —— 字体跟随首页默认字体，文案也便于后续修改 */
.news-block {
  position: relative;
}

.news-block .news-heading {
  position: absolute;
  top: 5%;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 18%;
  padding-left: 4.2%;
  background-color: #271509; /* 同背景图底色：色块本身不可见，只用于遮住原字 */
}

.news-block .news-heading-kicker,
.news-block .news-heading-title {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.25;
  color: #E6DCD3;
}

.news-block .news-heading-kicker {
  font-size: min(3.64vw, 70px);
  letter-spacing: 0.02em;
}

.news-block .news-heading-title {
  font-size: min(3.96vw, 76px);
}

/* 英文版背景图只有一行大标题，字号基准与中文版不同 */
.news-block.en .news-heading-title {
  font-size: min(4.87vw, 94px);
}

.news-block .news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* 底色与旧版轮播海报一致（#22140A），卡片与区块背景同色系融为一体 */
  box-sizing: border-box;
  background-color: #22140A;
  border: 1px solid #7B726B;
  text-decoration: none;
  transition: box-shadow 0.35s ease;
}

.news-block .news-card:hover,
.news-block .news-card:focus {
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
}

/* 图片区固定占卡片高度 65%：高度不再随文案行数变化，保证每张卡片的图片等高 */
.news-block .news-card-media {
  display: block;
  flex: 0 0 auto;
  height: 65%;
  overflow: hidden;
  background-color: #2B1B10;
}

.news-block .news-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.news-block .news-card:hover .news-card-media img {
  transform: scale(1.05);
}

.news-block .news-card-body {
  display: block;
  /* 吸收剩余高度：文案多一行也不会把图片挤矮 */
  flex: 1 1 auto;
  overflow: hidden;
  padding: 18px 20px 22px;
}

.news-block .news-card-date {
  display: block;
  margin-bottom: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #DDDCDC;
}

.news-block .news-card-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #FCFBF7;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

@media screen and (max-width: 600px) {
  /* 移动端换用 wap 版背景图：底色与原字位置都不同，需单独覆盖 */
  .news-block .news-heading {
    top: 13%;
    height: 16%;
    padding-left: 7%;
    background-color: #23150A;
  }

  .news-block .news-heading-kicker {
    font-size: 5.46vw;
  }

  .news-block .news-heading-title {
    font-size: 6.4vw;
  }

  .news-block.en .news-heading-title {
    font-size: 8.32vw;
  }

  /* slide 略小于「区块内容区」，再配合 .news 的上下内边距，卡片才不会贴住
     背景图上的装饰线、也不会贴住下一个区块。
     内容区高 = 区块高 110.8vw − padding-top（cn 42vw / en 34vw）= cn 68.8vw / en 76.8vw */
  .news-block .news {
    padding: 5vw 0;
  }

  .news-block .news .swiper-slide {
    height: 58.8vw;
  }

  .news-block.en .news .swiper-slide {
    height: 66.8vw;
  }

  /* 图片略大于文案，更接近新闻卡片的常规视觉 */
  .news-block .news-card-media {
    flex: 0 0 auto;
    height: 52%;
  }

  .news-block .news-card-body {
    padding: 10px 12px 12px;
  }

  .news-block .news-card-date {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 5px;
    font-size: 10px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .news-block .news-card-title {
    font-size: 13px;
    line-height: 1.3;
    -webkit-line-clamp: 3;
  }
}

/* ==================== 2. 新闻详情页 ==================== */

.article-page {
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto;
  padding: 52px 40px 90px;
}

.article {
  padding: 56px 64px 64px;
  background-color: #ffffff;
}

.article .breadcrumb {
  margin: 0 0 26px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #858484;
}

.article .breadcrumb a {
  color: #B50D0D;
  text-decoration: none;
}

.article .breadcrumb a:hover {
  text-decoration: underline;
}

.article .eyebrow {
  display: block;
  margin-bottom: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #B50D0D;
}

.article h1 {
  margin: 0 0 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.35;
  color: #21160C;
}

.article .byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid #efefef;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #858484;
}

.article .byline strong {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #363636;
}

.article .source-tag {
  padding: 3px 10px;
  border-radius: 10px;
  background-color: #B50D0D;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.article .article-lead {
  margin: 0 0 30px;
  font-size: 20px;
  line-height: 1.85;
  color: #363636;
}

.article h2 {
  margin: 44px 0 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.4;
  color: #4b4e53;
}

.article p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 2;
  color: #4b4e53;
}

.article ul,
.article ol {
  margin: 0 0 22px;
  padding-left: 24px;
}

.article li {
  font-size: 17px;
  line-height: 2;
  color: #4b4e53;
  list-style: disc;
}

.article ol li {
  list-style: decimal;
}

.article a {
  color: #B50D0D;
}

.article figure {
  margin: 34px 0;
  text-align: center;
}

.article figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.article figure.portrait {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
}

.article figcaption {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid #B50D0D;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.7;
  color: #858484;
  text-align: left;
}

.article blockquote {
  margin: 34px 0;
  padding: 22px 28px;
  border-left: 3px solid #B50D0D;
  background-color: #f5f3f0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.85;
  color: #363636;
}

.article blockquote p {
  margin: 0;
  font-size: 19px;
  color: #363636;
}

/* 原文引用框 */
.news-source {
  margin: 44px 0 26px;
  padding: 24px 28px;
  border-left: 4px solid #B50D0D;
  background-color: #f5f3f0;
}

.news-source strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #B50D0D;
}

.news-source p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: #363636;
}

.news-source p:last-child {
  margin-bottom: 0;
}

/* 详情页底部操作区 */
.news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 40px;
}

.news-actions .news-link {
  font-size: 16px;
}

.news-link {
  padding-bottom: 2px;
  color: #1f1f1f;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid #cfcdcd;
}

.news-link:hover,
.news-link:focus {
  color: #B50D0D;
  text-decoration: none;
  border-bottom-color: #B50D0D;
}

/* 详情页响应式 */
@media screen and (max-width: 1100px) {
  .article-page {
    padding: 40px 26px 70px;
  }

  .article {
    padding: 40px 34px 46px;
  }
}

@media screen and (max-width: 600px) {
  .article-page {
    padding: 24px 12px 50px;
  }

  .article {
    padding: 26px 20px 34px;
  }

  .article h1 {
    font-size: 26px;
  }

  .article .article-lead {
    font-size: 18px;
  }

  .article p,
  .article li {
    font-size: 16px;
  }

  .article h2 {
    margin-top: 34px;
    font-size: 22px;
  }
}