/* ==========================================================================
   News List Page — PC (web202606)
   ========================================================================== */

.news-list-page {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 80px;
  background: #d6cfc4 url('/web/assets/images/newsList/bg.png') center top / cover no-repeat;
  overflow-y: auto;
}

/* Left Decorate */
.news-list-decorate-left {
  position: absolute;
  left: 0;
  top: 6.5rem;
  width: 2.26rem;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* KV Banner */
.news-list-kv {
  position: relative;
  width: calc(100% + 160px);
  margin: 0 -80px;
}

.news-list-kv__img {
  display: block;
  width: 100%;
  height: auto;
}

/* KV Heading: News Center 标题 + 面包屑 */
.news-list-kv__heading {
  position: absolute;
  left: 3.46rem;
  top: 2.82rem;
  z-index: 2;
}

.news-list-kv__title {
  font-family: "HYYouYuan 105J", Arial, Helvetica, sans-serif;
  font-size: .44rem;
  line-height: 1.2;
  letter-spacing: -.01rem;
  color: #625d57;
  text-align: center;
  white-space: nowrap;
}

.news-list-breadcrumb {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin-top: .24rem;
  font-family: 'en1zc', Arial, Helvetica, sans-serif;
  font-size: .22rem;
  line-height: 1.2;
  letter-spacing: -.01rem;
  color: #625d57;
}

/* [gap-fallback:iOS13] .news-list-breadcrumb */
.news-list-breadcrumb > * + * { margin-left: .1rem; }
@supports (inset-inline: 0) {
  .news-list-breadcrumb { gap: .1rem; }
  .news-list-breadcrumb > * + * { margin-left: 0; }
}

.news-list-breadcrumb__link {
  color: #625d57;
  text-decoration: none;
  transition: opacity .2s;
}

.news-list-breadcrumb__link:hover {
  opacity: .8;
  text-decoration: underline;
}

.news-list-breadcrumb__sep {
  pointer-events: none;
}

[data-lang="ja"] .news-list-kv__title {
  font-family: "ja2", "HYYouYuan 105J", sans-serif;
}

[data-lang="ja"] .news-list-breadcrumb {
  font-family: "ja1", sans-serif;
}

/* Tabs */
.news-list-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  height: .71rem;
  background-color: #faf7f1;
  /* width: 88%; */
  width: 18.71rem;
  margin: .5rem auto 0;
  border-radius: 1rem;
}

.news-list-tabs[hidden] {
  display: none;
}

.news-list-tabs__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  padding: 0;
  font-size: .34rem;
  color: #929086;
  text-decoration: none;
  border-radius: 21px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

[data-lang="ja"] .news-list-tabs__item {
  font-family: "ja2";
}

.news-list-tabs__item:hover {
  color: #333;
}

.news-list-tabs__item.is-active {
  background: url('/web/assets/images/newsList/select-tabs-bg.png') center / 100% 100% no-repeat;
  color: #f9c150;
  font-weight: 700;
}

.news-list-tabs__item.is-active::before {
  content: '';
  flex-shrink: 0;
  width: .24rem;
  height: .24rem;
  margin-right: .12rem;
  background: url('/web/assets/images/newsList/star.png') center / contain no-repeat;
}

.news-list-tabs__divider {
  flex-shrink: 0;
  width: .03rem;
  height: .3rem;
  background: #dbd8d1;
}

.news-list-tabs__item.is-active + .news-list-tabs__divider,
/* iOS 13 不支持 :has()，激活项前的分隔线由 news-list.js 打标 is-before-active */
.news-list-tabs__divider.is-before-active,
.news-list-tabs__divider:has(+ .news-list-tabs__item.is-active) {
    visibility: hidden;
}

/* List */
.news-list-body {
  /* width: 88%; */
  width: 18.71rem;
  margin: .54rem auto;
  /* background-color: #fff; */
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}

.news-list-item {
  position: relative;
  height: 3.2rem;
  /* border-radius: .9rem; */
  overflow: visible;
  box-sizing: border-box;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}

.news-list-item::before {
  content: '';
  position: absolute;
  /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: url('/web/assets/images/newsList/select-bg.png') center top / 100% 100% no-repeat;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}

/* Hover 背景层：默认透明，hover 时淡入 + 轻微缩放，实现丝滑切换 */
.news-list-item::after {
  content: '';
  position: absolute;
  /* [inset-fallback] iOS<14.5 不支持 inset 简写，勿删 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: url('/web/assets/images/newsList/selected-bg.png') center top / 100% 100% no-repeat;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.02);
  z-index: 1;
  transition:
    opacity .35s cubic-bezier(.22, .61, .36, 1),
    transform .45s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.news-list-item:hover {
  transform: translateY(-2px);
}

.news-list-item:hover::after {
  opacity: 1;
  transform: scale(1);
}

.news-list-item:hover .news-list-item__date {
  color: #3f3f3f;
  transition: color .35s cubic-bezier(.22, .61, .36, 1);
}

.news-list-item__new-star {
  position: absolute;
  width: .9rem;
  height: .93rem;
  right: -.25rem;
  top: -.2rem;
  background: url('/web/assets/images/newsList/new-star.png') center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}

.news-list-item__link {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  color: #fff;
  height: 100%;
}

.news-list-item__cover {
  width: 2.84rem;
  height: 2.84rem;
  object-fit: cover;
  /* border-radius: 90px 0 0 90px; */
  /* border: .78rem; */
  border-radius: .78rem;
  flex-shrink: 0;
  /* 用 margin 做左偏移：border-box 下 padding 会侵占内容盒，
     导致 object-fit 的裁剪区域变成 266x284 非正方形而变形 */
  margin-left: .18rem;
}

.news-list-item__arrow {
  position: absolute;
  width: .32rem;
  height: .49rem;
  right: .56rem;
  bottom: .6rem;
  pointer-events: none;
  z-index: 3;
}

.news-list-item__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  height: 100%;
  padding: .58rem .98rem .56rem .28rem;
  overflow: hidden;
}

.news-list-item__title {
  font-family: "en2";
  font-size: .38rem;
  line-height: .62rem;
  letter-spacing: -.01rem;
  color: #3d3d3d;
  margin: 0 0 .12rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-lang="ja"] .news-list-item__title {
  font-family: "ja2";
}

.news-list-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .01rem;
  margin-top: auto;
}

/* [gap-fallback:iOS13] .news-list-item__meta（column 方向） */
.news-list-item__meta > * + * { margin-top: .01rem; }
@supports (inset-inline: 0) {
  .news-list-item__meta { gap: .01rem; }
  .news-list-item__meta > * + * { margin-top: 0; }
}

.news-list-item__author,
.news-list-item__date {
  font-family: "en1zc";
  font-size: .22rem;
  font-weight: normal;
  line-height: .3rem;
  letter-spacing: 0;
  color: #939187;
  margin: 0;
}

[data-lang="ja"] .news-list-item__date {
  font-family: "ja1";
}

.news-list-item__tag {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(255, 200, 50, 0.15);
  color: #ffc832;
}

/* Loading & Empty */
.news-list-loading,
.news-list-empty {
  text-align: center;
  padding: 60px 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  grid-column: 1 / -1;
}

.news-list-empty[hidden] {
  display: none;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.news-list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .34rem;
  margin: .6rem auto 0;
  padding-bottom: .6rem;
}

.news-list-pagination__btn {
  position: relative;
  width: 2.75rem;        /* 275px，与 svg 原始宽度一致 */
  height: .87rem;        /* 87px，与 svg 原始高度一致 */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "HYYouYuan 105J", Arial, Helvetica, sans-serif;
  font-size: .28rem;
  font-weight: 700;
  letter-spacing: .04rem;
  transition: transform .15s;
  overflow: hidden;
  isolation: isolate;
}

/* PREV：直接用 svg 原色（#272727）做背景图 */
.news-list-pagination__btn--prev {
  background: url('/web/assets/images/newsList/next-btn.svg') center / 100% 100% no-repeat;
  color: #929086;
}

/* NEXT：用 svg 做 mask，background-color 提供黄色填充 */
.news-list-pagination__btn--next {
  background-color: #ffc832;
  -webkit-mask: url('/web/assets/images/newsList/next-btn.svg') center / 100% 100% no-repeat;
          mask: url('/web/assets/images/newsList/next-btn.svg') center / 100% 100% no-repeat;
  color: #3d3d3d;
}

/* 禁用态：不透明度不变，统一用 #bfbaaf 填充按钮底色 */
.news-list-pagination__btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
  background-image: none;
  background-color: #bfbaaf;
  -webkit-mask: url('/web/assets/images/newsList/next-btn.svg') center / 100% 100% no-repeat;
          mask: url('/web/assets/images/newsList/next-btn.svg') center / 100% 100% no-repeat;
}

.news-list-pagination__btn:not(:disabled):hover {
  transform: translateY(-2px);
}

.news-list-pagination__label {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.news-list-pagination__pages {
  display: inline-flex;
  align-items: baseline;
  gap: .08rem;
  color: #929086;
  font-family: "HYYouYuan 105J", Arial, Helvetica, sans-serif;
  font-size: .26rem;
  letter-spacing: .02rem;
}

/* [gap-fallback:iOS13] .news-list-pagination__pages */
.news-list-pagination__pages > * + * { margin-left: .08rem; }
@supports (inset-inline: 0) {
  .news-list-pagination__pages { gap: .08rem; }
  .news-list-pagination__pages > * + * { margin-left: 0; }
}

.news-list-pagination__current {
  color: #272727;
  font-weight: 700;
}

.news-list-pagination__sep {
  color: #929086;
  margin: 0 .02rem;
}