/* 麦尚食品 · news 页面样式（PC 段 + 手机段，各自媒体查询包裹） */

/* PC 布局：≥1200px */
@media (min-width: 1200px) {
  button {
          margin: 0;
          padding: 0;
          border: 0.0694vw solid transparent;
          outline: none;
          background-color: transparent;
          font-family: inherit;
        }

        /* ============ 页面骨架 ============ */
        .page {
          position: relative;
          width: 100vw;
          margin: 0 auto;
        }

        /* ============ 头部导航 ============ */
        .header-zone {
          width: 100vw;
          height: 29.1667vw;
        }

        /* ============ 内页 banner ============ */
        .page-banner {
          width: 100vw;
          height: 20.8333vw;
          margin-bottom: 0.0694vw;
          background: url(../../img/banner-news.webp) 100% no-repeat;
          background-size: 100% 100%;
        }
        .page-banner h1 {          width: 16.3889vw;
          height: 3.5417vw;
          color: rgba(255, 255, 255, 1);
          font-size: 4.1667vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 3.5417vw;
          padding: 6.0417vw 0 0 8.3333vw;
        }

        /* ============ 新闻列表 ============ */
        .sec-news-list {
          /* 装饰底图内联在标签上（见 category.php 的 $ms_section_bg） */
          background-color: rgba(255, 255, 255, 1);
          width: 100vw;
          margin-top: -0.0694vw;
          display: flex;
          flex-direction: column;
        }

        /* 头条大卡 */
        .news-featured {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 1.1111vw;
          width: 83.3333vw;
          height: 23.4722vw;
          border: 0.0694vw solid rgba(230, 230, 230, 1);
          box-shadow: 0 0 1.6667vw 0 rgba(0, 0, 0, 0.08);
          margin: 4.1667vw 0 0 8.3333vw;
          display: flex;
          flex-direction: row;
          overflow: hidden;
        }
        .news-featured-figure {
          width: 41.6667vw;
          height: 23.4722vw;
          overflow: hidden;
        }
        .news-featured-figure img {
          width: 41.6667vw;
          height: 23.4722vw;
          transition: transform 0.6s ease;
        }
        .news-featured:hover .news-featured-figure img {
          transform: scale(1.05);
        }
        .news-featured-info {
          width: 35.625vw;
          margin: 3.1944vw 3.1944vw 0 2.8472vw;
          display: flex;
          flex-direction: column;
        }
        .news-date {
          color: rgba(102, 102, 102, 1);
          font-size: 1.1111vw;
          text-align: left;
          white-space: nowrap;
          line-height: 2.2222vw;
        }
        .news-featured-title {
          width: 35.625vw;
          color: rgba(51, 51, 51, 1);
          font-size: 1.6667vw;
          text-align: left;
          line-height: 2.7778vw;
          max-height: 5.5556vw;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          transition: color 0.3s ease;
        }
        .news-featured:hover .news-featured-title {
          color: rgba(230, 0, 18, 1);
        }
        .news-featured-excerpt {
          width: 35.625vw;
          color: rgba(102, 102, 102, 1);
          font-size: 1.1111vw;
          text-align: left;
          line-height: 2.2222vw;
          margin-top: 0.8056vw;
          max-height: 4.4444vw;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .news-featured .btn {
          margin-top: 0.8056vw;
        }

        /* 通用按钮（与首页一致） */
        .btn {
          position: relative;
          overflow: hidden;
          background-color: rgba(253, 242, 243, 1);
          border-radius: 0.5556vw;
          width: 11.1111vw;
          height: 3.3333vw;
          border: 0.0694vw solid rgba(230, 0, 18, 1);
          display: flex;
          flex-direction: row;
          cursor: pointer;
        }
        .btn::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(230, 0, 18, 1);
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .btn:hover::before {
          transform: scaleX(1);
        }
        .btn-inner {
          flex: 1;
          margin: 0 2.0833vw;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          position: relative;
          z-index: 1;
        }
        .btn-inner span {
          color: rgba(230, 0, 18, 1);
          font-size: 1.1111vw;
          text-align: left;
          white-space: nowrap;
          line-height: 1.6667vw;
          transition: color 0.35s ease;
        }
        .btn:hover .btn-inner span {
          color: #fff;
        }
        .btn-inner img {
          width: 1.8056vw;
          height: 0.4861vw;
          position: relative;
          z-index: 1;
          transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .btn:hover .btn-inner img {
          transform: translateX(0.4167vw);
        }

        /* 小卡行 */
        .news-row {
          width: 83.3333vw;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin: 2.0833vw 0 0 8.3333vw;
        }
        .news-card {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 1.1111vw;
          width: 26.3889vw;
          height: 26.3889vw;
          border: 0.0694vw solid rgba(230, 230, 230, 1);
          box-shadow: 0 0 1.6667vw 0 rgba(0, 0, 0, 0.08);
          display: flex;
          flex-direction: column;
          overflow: hidden;
          transition:
            transform 0.35s ease,
            box-shadow 0.35s ease;
        }
        .news-card:hover {
          transform: translateY(-0.5556vw);
          box-shadow: 0 1.1111vw 2.7778vw 0 rgba(0, 0, 0, 0.14);
        }
        .news-card-figure {
          width: 26.3889vw;
          height: 14.8611vw;
          overflow: hidden;
        }
        .news-card-figure img {
          width: 26.3889vw;
          height: 14.8611vw;
          transition: transform 0.6s ease;
        }
        .news-card:hover .news-card-figure img {
          transform: scale(1.05);
        }
        .news-card-body {
          flex: 1;
          width: 26.3889vw;
          padding: 1.7361vw 2.0139vw 1.9444vw 2.1528vw;
          display: flex;
          flex-direction: column;
        }
        .news-card-title {
          width: 22.2222vw;
          height: 4.1667vw;
          color: rgba(51, 51, 51, 1);
          font-size: 1.25vw;
          text-align: left;
          line-height: 2.0833vw;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          transition: color 0.3s ease;
        }
        .news-card:hover .news-card-title {
          color: rgba(230, 0, 18, 1);
        }
        .news-more {
          margin-top: 0.4vw;
          width: 6.8056vw;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }
        .news-more span {
          color: rgba(230, 0, 18, 1);
          font-size: 1.1111vw;
          text-align: left;
          white-space: nowrap;
          line-height: 1.6667vw;
        }
        .news-more img {
          width: 1.8056vw;
          height: 0.4861vw;
          margin-top: 0.3472vw;
          transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .news-card:hover .news-more img {
          transform: translateX(0.4167vw);
        }

        /* 分页 */
        .pager {
          width: 83.3333vw;
          margin: 4.0278vw auto 6.8056vw;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
        }
        .pager-arrow {
          width: 2.77778vw;
          height: 2.77778vw;
          cursor: pointer;
          transition:
            transform 0.3s ease,
            opacity 0.3s ease;
        }
        .arrow-button {
          position: relative;
          width: 2.77778vw;
          height: 2.77778vw;
          cursor: pointer;
          transition:
            transform 0.3s ease,
            opacity 0.3s ease;
        }
        .arrow-button:hover {
          transform: translateY(-0.2778vw);
        }
        .arrow-button.is-disabled,
        .arrow-button.swiper-button-disabled {
          cursor: default;
          transform: none;
          transform: translateY(0);
        }
        .arrow-button img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          transition: opacity 0.3s ease;
        }
        .arrow-button img.arrow-hover,
        .arrow-button img.arrow-disabled {
          opacity: 0;
        }
        .arrow-button:hover img.arrow-hover {
          opacity: 1;
        }
        .arrow-button:hover img.arrow-disabled {
          opacity: 0;
        }
        .arrow-button.is-disabled img {
          opacity: 0;
        }
        .arrow-button.is-disabled img.arrow-disabled {
          opacity: 1;
        }
        .pager-nums {
          display: flex;
          flex-direction: row;
          justify-content: center;
          gap: 0.5vw;
          margin: 0 2vw;
        }
        .pager-num {
          width: 2.77778vw;
          height: 2.77778vw;
          color: rgba(102, 102, 102, 1);
          font-size: 1.1111vw;
          text-align: center;
          white-space: nowrap;
          line-height: 2.77778vw;
          cursor: pointer;
          transition: color 0.3s ease;
        }
        .pager-num:hover,
        .pager-num.is-active {
          color: rgba(230, 0, 18, 1);
        }

        /* ============ 降噪 ============ */
        @media (prefers-reduced-motion: reduce) {
          *,
          *::before,
          *::after {
            animation: none !important;
            transition: none !important;
          }
        }


    /* ===== 英文稿与中文稿的差异（自动生成，来源：线上 PC 稿）===== */
    html[lang^="en"] .btn-inner {
      margin: 0 1vw;
    }
    html[lang^="en"] .page-banner h1 {
      width: auto;
    }
    html[lang^="en"] .page-banner h1 {
      padding: 6.5278vw 0 0 8.3333vw;
    }
  }

/* 手机布局：<1200px */
@media (max-width: 1199.98px) {
  .page-hero {
          background-image: url(../../img/news-banner.webp);
        }
        /* ---------- 新闻列表 ---------- */
        /*
         * 手机端的装饰底图统一用 block-bg-2.webp（浅色水印版，798×274），
         * 与关于我们页那几个手机端区块是同一张 —— PC 那边用的是对比度更高的
         * bg-section-pasture.webp，两张图分别服务两个断点，不要互换。
         * contain：等比缩到容器宽、贴右下角。
         */
        .news-list-section {
          background: #fff url(../../img/block-bg-2.webp) 100% 100% / contain no-repeat;
        }
        .news-card:last-of-type {
          margin-bottom: 0;
        }
}