/* ================================================================
   news.css — 新闻三页共用（index / list / detail）@layer pages
   D 方向：经典蓝 + 橙红。复用全局 tokens/base/components。
   ================================================================ */
@layer pages {

  .news-page { padding: var(--space-lg) 0 var(--space-xl); }

  /* ---------------- 页头 ---------------- */
  .news-header { margin-bottom: var(--space-lg); }
  .news-header__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    color: var(--color-text-strong);
    margin: 0 0 4px;
  }
  .news-header__subtitle { font-size: var(--font-size-md); color: var(--color-text-secondary); margin: 0; }

  /* ================================================================
     1. 特色大卡（index 左侧）
     ================================================================ */
  .news-featured {
    display: block;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    height: 100%;
    transition: var(--transition-base);
  }
  .news-featured:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
  .news-featured__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--color-gray-100); }
  .news-featured__body { padding: var(--space-lg); }
  .news-featured__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    line-height: 1.35;
    margin: 0 0 var(--space-sm);
  }
  .news-featured:hover .news-featured__title { color: var(--color-primary); }
  .news-featured__excerpt { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 var(--space-sm); }
  .news-featured__time { font-size: var(--font-size-xs); color: var(--color-text-muted); }

  /* ================================================================
     2. 最新列表（index 右侧）
     ================================================================ */
  .news-latest { display: flex; flex-direction: column; gap: var(--space-sm); height: 100%; }
  .news-latest__item {
    display: flex;
    gap: var(--space-sm);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    text-decoration: none;
    transition: var(--transition-fast);
  }
  .news-latest__item:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-sm); }
  /* 文字块占据剩余宽度，把缩略图推到最右对齐 */
  .news-latest__item > :first-child { flex: 1 1 auto; min-width: 0; }
  .news-latest__tag { font-size: 10px; font-weight: var(--font-weight-bold); color: var(--color-accent); text-transform: uppercase; letter-spacing: .05em; }
  .news-latest__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-strong);
    line-height: 1.4;
    margin: 2px 0 4px;
  }
  .news-latest__item:hover .news-latest__title { color: var(--color-primary); }
  .news-latest__date { font-size: var(--font-size-xs); color: var(--color-text-muted); }
  .news-latest__thumb { width: 84px; flex-shrink: 0; }
  .news-latest__thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); display: block; background: var(--color-gray-100); }

  /* ================================================================
     3. 文章卡 .news-card（index 分类网格 / list / related 共用）
     ================================================================ */
  .news-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    height: 100%;
    transition: var(--transition-base);
  }
  .news-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
  .news-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--color-gray-100); }
  .news-card__body { padding: var(--space-md); display: flex; flex-direction: column; flex: 1; }
  .news-card__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-strong);
    line-height: 1.4;
    margin: 0 0 6px;
    /* 锁 2 行高度，保证跨列卡片对齐 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
  }
  .news-card:hover .news-card__title { color: var(--color-primary); }
  .news-card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-sm);
    flex: 1;
    /* 锁 2 行高度 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.2em;
  }
  .news-card__date { font-size: var(--font-size-xs); color: var(--color-text-muted); }

  /* index 分类区块标题 */
  .news-cat-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-border);
    position: relative;
  }
  .news-cat-title::before {
    content: ""; position: absolute; left: 0; bottom: -2px; width: 48px; height: 2px; background: var(--color-accent);
  }
  .news-cat-title a { color: inherit; text-decoration: none; }
  .news-cat-title a:hover { color: var(--color-primary); }

  /* ================================================================
     4. 侧边栏（list / detail）
     ================================================================ */
  .news-sidebar__search { display: flex; margin-bottom: var(--space-lg); }
  .news-sidebar__search input {
    flex: 1; min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font-size: var(--font-size-sm);
  }
  .news-sidebar__search input:focus { outline: none; border-color: var(--color-primary); }
  .news-sidebar__search button {
    padding: 8px 16px;
    background: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--font-size-sm);
    cursor: pointer;
  }
  .news-sidebar__search button:hover { background: var(--color-primary-dark); }

  .news-widget {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
  }
  .news-widget__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-bg-light);
  }
  .news-recent { list-style: none; margin: 0; padding: 0; }
  .news-recent__item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-bg-light); }
  .news-recent__item:last-child { border-bottom: none; }
  .news-recent__item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--color-gray-100); }
  .news-recent__title { font-size: var(--font-size-sm); color: var(--color-text); text-decoration: none; line-height: 1.4; }
  .news-recent__title:hover { color: var(--color-primary); }

  .news-catlist { list-style: none; margin: 0; padding: 0; }
  .news-catlist li { border-bottom: 1px solid var(--color-bg-light); }
  .news-catlist li:last-child { border-bottom: none; }
  .news-catlist a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; font-size: var(--font-size-sm); color: var(--color-text); text-decoration: none;
  }
  .news-catlist a::after { content: "\203A"; color: var(--color-text-muted); }
  .news-catlist a:hover { color: var(--color-primary); }

  /* ================================================================
     5. 详情正文
     ================================================================ */
  .news-article {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
  }
  .news-article__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    line-height: 1.3;
    margin: 0 0 var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-bg-light);
  }
  .news-article__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-md); }
  .news-article__hero { width: 100%; border-radius: var(--radius-md); margin: var(--space-md) 0; display: block; }
  /* overflow-wrap：正文里常有不可断的长网址（「www.sinoali.com/supplier/…」），不加会把 320 宽整页撑到 327。
     与旺铺 supplier_shared/css/news-detail.css 同一套（2026-10-02 本机灌测试新闻后量出）。 */
  .news-article__body { font-size: var(--font-size-md); color: var(--color-text); line-height: 1.85; overflow-wrap: break-word; }
  .news-article__body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
  .news-article__body h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin: var(--space-lg) 0 var(--space-sm); color: var(--color-text-strong); }
  .news-article__body h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin: var(--space-md) 0 var(--space-sm); }
  .news-article__body p { margin: 0 0 var(--space-md); }
  .news-article__body a { color: var(--color-text-link); }

  /* 上下篇 */
  .news-postnav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-bg-light);
  }
  .news-postnav__item { text-decoration: none; max-width: 48%; }
  .news-postnav__item--next { text-align: right; margin-left: auto; }
  .news-postnav__label { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: 2px; }
  .news-postnav__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-strong); display: inline-flex; align-items: center; gap: 6px; }
  .news-postnav__item:hover .news-postnav__title { color: var(--color-primary); }

  .news-related { margin-top: var(--space-lg); }
  .news-related__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-md);
  }

  /* ================================================================
     6. 响应式
     ================================================================ */
  @media (max-width: 767.98px) {
    .news-latest__thumb { width: 72px; }
    .news-article { padding: var(--space-md); }
    .news-postnav { flex-direction: column; }
    .news-postnav__item, .news-postnav__item--next { max-width: 100%; text-align: left; margin-left: 0; }
    /* 富文本不能改 DOM 包一层滚动容器，只能让 table 自己变成块级滚动盒（与旺铺新闻详情同一条；
       英文规格表在 320 下右缘到 332，2026-10-02 实测） */
    .news-article__body table { display: block; max-width: 100%; overflow-x: auto; }

    /* 新闻首页手机端（2026-10-02）：分类楼层的大图卡（每张约 381px，三个分类占整页 58%）改成与 Latest 同款的
       紧凑行——缩略图在右、标题两行、日期；摘要在手机上不印（桌面保留）。390 en 5.28→约 3.1 屏。
       ⚠ 只打 .news-cat-grid：.news-card 还被新闻列表页与详情页「相关文章」共用。 */
    .news-cat-grid .news-card {
      flex-direction: row-reverse;
      align-items: flex-start;
      gap: var(--space-sm);
      padding: var(--space-sm);
      height: auto;
    }
    .news-cat-grid .news-card__img {
      flex: 0 0 96px;
      width: 96px;
      height: 72px;
      aspect-ratio: auto;
      border-radius: var(--radius-sm);
    }
    .news-cat-grid .news-card__body { padding: 0; min-width: 0; }
    .news-cat-grid .news-card__title { font-size: var(--font-size-sm); min-height: 0; margin-bottom: 4px; }
    .news-cat-grid .news-card__excerpt { display: none; }
    /* Latest 每条都印「LATEST NEWS」，同一个词重复 5 遍，手机上去掉（桌面保留） */
    .news-latest__tag { display: none; }
  }

}