/* ==========================================================================
   Reviews & news reviews.css  — replicates Figma node 624:1832 (desktop) / 624:2984 (mobile)
   ========================================================================== */

.reviews-page {
  padding: 28px 0 116px;
}

/* Breadcrumb */
.crumb {
  font-size: 16px;
  color: var(--t-400);
  margin-bottom: 30px;
}

.crumb a {
  color: var(--t-400);
}

.crumb a:hover {
  color: var(--orange);
}

.crumb span {
  color: var(--t-800);
}

/* White large card (outer shell for each section) */
.rv-card {
  background: #fff;
  border-radius: var(--r-card);
  padding: 36px 30px 31px 32px;
}

.rv-card+.rv-card {
  margin-top: 24px;
}

/* Section sub-heading (20px bold) */
.rv-title {
  font-weight: 700;
  font-size: 20px;
  color: #111;
  line-height: 1.2;
}

/* ----- Meta info row (date / reads / comments) ----- */
.meta-row {
  display: flex;
  align-items: center;
  gap: 31px 24px;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #b7b7b7;
  white-space: nowrap;
}

.m-ic {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 卡片改为可点击链接：去下划线、继承文字色（不改变原布局） */
.feature-card,
.latest-item,
.acard {
  color: inherit;
  text-decoration: none;
}

/* 各区块空数据友好提示：仅在对应区块内居中显示一行，不影响有数据时的布局 */
.rv-empty {
  padding: 44px 20px;
  text-align: center;
  font-size: 15px;
  color: var(--t-400);
  line-height: 1.6;
}

/* ==========================================================================
   Latest in-depth reviews
   ========================================================================== */
.latest-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 752fr 376fr;
  gap: 10px;
  align-items: stretch;
}

.latest-grid>*,
.latest-list>*,
.library-grid>*,
.talk-grid>* {
  min-width: 0;
}

/* Featured large card (gray background) */
.feature-card {
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  padding: 14px 21px 14px 14px;
  display: flex;
  gap: 23px;
}

.feature-thumb {
  flex: 0 0 49.2%;
  min-width: 0;
  border-radius: 6px;
  overflow: hidden;
  align-self: stretch;
}

.feature-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-body {
  display: flex;
  flex-direction: column;
  padding: 1px 0;
  min-width: 0;
}

.feature-headline {
  font-weight: 700;
  font-size: 16px;
  color: #111;
  line-height: 1.4;
}

.feature-excerpt {
  font-size: 12px;
  color: var(--t-600);
  line-height: 1.5;
  margin-top: 17px;
}

.feature-card .meta-row {
  margin-top: auto;
  padding-top: 18px;
}

/* Right-side compact list */
.latest-list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 9px;
}

.latest-item {
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  padding: 15px 14px 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.latest-item h3 {
  font-weight: 700;
  font-size: 14px;
  color: #111;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 最新深度测评 无数据占位：保持 1大图 + 3行 布局，仅作友好提示（不可点、内容弱化、文字垂直居中） */
.sec-latest .feature-card.is-empty,
.sec-latest .latest-item.is-empty {
  pointer-events: none;
}

.sec-latest .feature-card.is-empty .feature-thumb {
  opacity: .45;
}

.sec-latest .feature-card.is-empty .feature-body {
  justify-content: center;
}

.sec-latest .feature-card.is-empty .feature-headline {
  color: var(--t-600);
}

.sec-latest .latest-item.is-empty h3 {
  color: var(--t-400);
  font-weight: 600;
}

/* 评测文章库 无数据占位：保持三列卡片布局，仅作友好提示 */
.sec-library .acard.is-empty {
  pointer-events: none;
}

.sec-library .acard.is-empty .acard-thumb {
  opacity: .45;
}

.sec-library .acard.is-empty .acard-title {
  color: var(--t-600);
}

.sec-library .acard.is-empty .acard-excerpt {
  color: var(--t-400);
}

/* 分页脚：禁用态（首页/末页） */
.pager .pg-btn[disabled] {
  opacity: .45;
  cursor: default;
}

/* ==========================================================================
   Review article library
   ========================================================================== */
.library-grid {
  margin-top: 19px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.acard {
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  padding: 15px 14px 20px;
  display: flex;
  flex-direction: column;
}

.acard-thumb {
  height: 172px;
  border-radius: 4px;
  overflow: hidden;
}

.acard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acard-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acard-title {
  font-weight: 700;
  font-size: 14px;
  color: #111;
  line-height: 1.3;
  margin-top: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acard-excerpt {
  font-size: 12px;
  color: var(--t-400);
  line-height: 1.3;
  margin-top: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acard .meta-row {
  margin-top: 14px;
}

/* Pagination */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin-top: 43px;
}

.pg-btn {
  height: 42px;
  padding: 10px 20px;
  border-radius: 66px;
  border: 1px solid #cfcfcf;
  color: #c8c8c8;
  font-family: var(--font-sc);
  font-size: 14px;
  line-height: 1;
  transition: all .15s;
}

.pg-btn.active {
  border-color: var(--orange);
  color: var(--orange);
}

.pg-btn.active:hover {
  background: var(--orange);
  color: #fff;
}

.pg-num {
  font-size: 18px;
  color: #111;
}

/* ==========================================================================
   Latest discussions
   ========================================================================== */
.talk-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
}

.talk-card {
  background: var(--bg-soft);
  border-radius: 6px;
  padding: 14px 22px 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.talk-name {
  font-weight: 700;
  font-size: 16px;
  color: #111;
  line-height: 1;
}

.talk-text {
  font-size: 14px;
  color: var(--t-600);
  line-height: 1;
}

/* 最新讨论：默认仅显示前 3 条（无 JS 时的兜底；有 JS 时每点一次多显示 3 条，由内联脚本控制） */
.sec-talk .talk-card:nth-child(n+4) {
  display: none;
}

.talk-more {
  display: block;
  margin: 40px auto 0;
  height: 42px;
  padding: 10px 30px;
  border-radius: 66px;
  border: 1px solid var(--orange);
  color: var(--orange);
  background: #fff;
  font-family: var(--font-sc);
  font-size: 14px;
  line-height: 1;
  transition: all .15s;
}

.talk-more:hover {
  background: var(--orange);
  color: #fff;
}

/* ==========================================================================
   Popular tags
   ========================================================================== */
.sec-tags .rv-title {
  font-weight: 900;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.rv-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 40px;
  border-radius: 66px;
  border: 1px solid #cfcfcf;
  color: var(--t-800);
  font-size: 16px;
  white-space: nowrap;
  transition: all .15s;
}

.rv-tag:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* ==========================================================================
   Responsive — mobile (<1080) — precise replication of the standalone Figma mobile design 624:2984
   Design canvas 1080px / content area 1000px; font sizes and dimensions scaled by factor ~0.417 and aligned.
   Shared mobile-page conventions (white shell 24px radius, card name 15px, secondary 11px, micro 10px).
   ========================================================================== */
@media (max-width: 1080px) {
  .reviews-page {
    padding: clamp(18px, 4.72vw, 51px) 0 clamp(29px, 7.69vw, 83px);
  }

  .crumb {
    font-size: clamp(10px, 2.59vw, 28px);
    margin-bottom: clamp(20px, 5.37vw, 58px);
  }

  /* White section shell (review article library / latest discussions / popular tags) */
  .rv-card {
    padding: clamp(16px, 4.17vw, 45px) clamp(10px, 2.78vw, 30px) clamp(22px, 5.89vw, 63.63px) clamp(16px, 4.17vw, 45px);
    border-radius: clamp(8px, 2.22vw, 24px);
  }

  .rv-card+.rv-card {
    margin-top: clamp(10px, 2.78vw, 30px);
  }

  .rv-title {
    font-size: clamp(15px, 3.89vw, 42px);
  }

  /* Meta info row (date/reads/comments) scaled down overall */
  .meta-row {
    gap: 12px;
  }

  .meta-item {
    font-size: clamp(7px, 1.85vw, 20px);
    gap: clamp(4px, 0.97vw, 10.53px);
  }

  .m-ic {
    width: 12px;
    height: 12px;
  }

  /* ===== Latest in-depth reviews: design has no white shell, cards sit directly on the gray page ===== */
  .sec-latest {
    background: transparent;
    border-radius: 0;
    padding: 0 0 0;
  }

  .sec-latest .rv-title {
    margin-bottom: clamp(13px, 3.52vw, 38px);
  }

  .latest-grid {
    grid-template-columns: 1fr;
    gap: clamp(10px, 2.78vw, 30px);
    margin-top: 0;
  }

  .latest-grid>*,
  .latest-list>* {
    min-width: 0;
  }

  /* Featured large card: horizontal (thumbnail left + text right), white card */
  .feature-card {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(10px, 2.69vw, 29px);
    padding: clamp(7px, 1.94vw, 21px) clamp(19px, 5.19vw, 56px) clamp(7px, 1.94vw, 21px) clamp(8px, 2.04vw, 22px);
    background: #fff;
    border-radius: clamp(8px, 2.22vw, 24px);
    min-width: 0;
  }

  .feature-thumb {
    flex: 0 0 34%;
    width: auto;
    max-width: none;
    aspect-ratio: 324 / 226;
    height: auto;
    border-radius: clamp(4px, 1.11vw, 12px);
    min-width: 0;
  }

  /* 最新深度测评已动态化：移除写死封面替换，显示真实/占位封面 */
  .feature-body {
    min-width: 0;
    padding: 0;
  }

  .feature-headline {
    font-size: clamp(13px, 3.33vw, 36px);
    font-weight: 700;
    color: #111;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .feature-excerpt {
    font-size: clamp(8px, 2.22vw, 24px);
    color: #666;
    line-height: 1.36;
    margin-top: clamp(6px, 1.57vw, 17px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .feature-card .meta-row {
    margin-top: auto;
    padding-top: clamp(11px, 2.87vw, 31px);
    justify-content: space-between;
    gap: clamp(24px, 6.43vw, 69.4px) clamp(16px, 4.36vw, 47.1px);
    flex-wrap: wrap;
  }

  /* Compact list: white card, single-line title + meta info row */
  .latest-list {
    gap: clamp(10px, 2.78vw, 30px);
  }

  .latest-item {
    background: #fff;
    border-radius: clamp(8px, 2.22vw, 24px);
    padding: clamp(11px, 2.96vw, 32px) clamp(13px, 3.56vw, 38.44px) clamp(11px, 2.91vw, 31.44px);
    gap: clamp(10px, 2.78vw, 30px);
    justify-content: center;
  }

  .latest-item h3 {
    font-size: clamp(13px, 3.33vw, 36px);
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ===== Review article library: horizontal cards (thumbnail left + title/excerpt right, no meta info row) ===== */
  .sec-library .rv-title {
    margin-bottom: 8px;
  }

  .library-grid {
    grid-template-columns: 1fr;
    gap: clamp(10px, 2.78vw, 30px);
    margin-top: 0;
  }

  .library-grid>* {
    min-width: 0;
  }

  .acard {
    flex-direction: row;
    gap: clamp(10px, 2.59vw, 28px);
    padding: clamp(5px, 1.39vw, 15px) clamp(19px, 5vw, 54px) clamp(5px, 1.39vw, 15px) clamp(5px, 1.39vw, 15px);
    align-items: center;
    border-radius: clamp(8px, 2.22vw, 24px);
    min-width: 0;
    background: #FAFAFA;
  }

  .acard-thumb {
    flex: 0 0 32%;
    width: auto;
    aspect-ratio: 300 / 200;
    height: auto;
    flex-shrink: 0;
    border-radius: 8px;
    min-width: 0;
  }

  /* 评测文章库已动态化：移除写死封面替换，显示真实/占位封面 */
  .acard-body {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  .acard-title {
    margin-top: 0;
    font-size: clamp(13px, 3.33vw, 36px);
    font-weight: 700;
    color: #222;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
  }

  .acard-excerpt {
    font-size: clamp(8px, 2.22vw, 24px);
    color: #666;
    line-height: 1.36;
    margin-top: clamp(9px, 2.5vw, 27px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
  }

  /* In the mobile design the article library cards do not show the date/reads/comments meta info row */
  .acard .meta-row {
    display: none;
  }

  /* Pagination: previous(gray) · 1/3(black) · next(orange) */
  .pager {
    margin-top: clamp(28px, 7.59vw, 82px);
    gap: clamp(11px, 2.83vw, 30.51px);
  }

  .pg-btn {
    padding: clamp(7px, 1.96vw, 21.18px) clamp(17px, 4.48vw, 48.34px);
    font-size: clamp(8px, 2.22vw, 24px);
    border-radius: clamp(41px, 10.97vw, 118.43px);
  }

  .pg-num {
    font-size: clamp(10px, 2.59vw, 28px);
  }

  /* ===== Latest discussions: stacked vertically ===== */
  .sec-talk .rv-title {
    margin-bottom: clamp(15px, 3.89vw, 42px);
  }

  .sec-talk {
    padding: clamp(16px, 4.17vw, 45px) clamp(10px, 2.78vw, 30px) clamp(42px, 11.3vw, 122px);
  }

  .talk-grid {
    grid-template-columns: 1fr;
    gap: clamp(10px, 2.78vw, 30px);
    margin-top: 0;
  }

  .talk-card {
    background: var(--bg-soft);
    border-radius: clamp(8px, 2.22vw, 24px);
    padding: clamp(14px, 3.7vw, 40px) clamp(12px, 3.15vw, 34px) clamp(13px, 3.33vw, 36px);
    gap: clamp(5px, 1.2vw, 13px);
  }

  .talk-name {
    font-size: clamp(13px, 3.33vw, 36px);
    font-weight: 700;
    color: #111;
  }

  .talk-text {
    font-size: clamp(10px, 2.59vw, 28px);
    color: #666;
    line-height: 1.35;
  }

  .talk-more {
    margin: clamp(42px, 11.11vw, 120px) auto 2px;
    width: clamp(156px, 41.67vw, 450px);
    padding: 0;
    font-size: clamp(11px, 2.96vw, 32px);
  }

  /* ===== Popular tags: two columns centered (in the design the tags do not fill the row, leaving margins on both sides) ===== */
  .sec-tags .rv-title {
    margin-bottom: clamp(16px, 4.17vw, 45px);
  }

  .sec-tags {
    padding: clamp(18px, 4.81vw, 52px) clamp(18px, 4.81vw, 52px) clamp(37px, 9.91vw, 107px);
  }

  .tag-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(17px, 4.44vw, 48px);
    /* width: 86%; */
    width: 100%;
    margin: 0 auto;
  }

  .rv-tag {
    width: 100%;
    padding: clamp(16px, 4.31vw, 46.5px) 10px;
    font-size: clamp(10px, 2.59vw, 28px);
  }

  .rv-empty {
    padding: clamp(28px, 7.4vw, 80px) 20px;
    font-size: clamp(11px, 2.8vw, 28px);
  }
}

@media (max-width: 380px) {

  /* Very narrow screens (iPhone SE 375, etc.): tighten the large card padding to avoid two-line titles squeezing the thumbnail */
  .feature-card,
  .acard {
    gap: 10px;
    padding: 10px;
  }

  .feature-headline,
  .acard-title {
    font-size: 14px;
  }

  .rv-tag {
    padding: 0 6px;
    font-size: 12px;
  }
}

@media (min-width: 1081px) {
  .reviews-page {
    padding-bottom: 116px;
  }

  .sec-library {
    padding: 36px 35px 41px 37px;
  }

  /* 评测文章库已动态化：移除桌面端写死标题/摘要替换，显示真实文章标题/摘要 */
  .sec-talk {
    padding: 36px 35px 45px;
  }

  .rv-card.sec-tags {
    margin-top: 24px;
    padding: 39px 32px 46px;
  }
}