/* vipkei.com PC 文章列表专用样式
 * source: templets/default/list_article.htm
 * version: 20260612-p1s5-article-list
 */

.pc-article-list-template *,
    .pc-article-list-template *::before,
    .pc-article-list-template *::after {
      box-sizing: border-box;
    }

    .pc-article-list-template .pc-article-shell,
    .pc-article-list-template .pc-article-shell input,
    .pc-article-list-template .pc-article-shell select,
    .pc-article-list-template .pc-article-shell button {
      font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    }

    /*
     * PC 文章列表统一主体：左侧公共栏目 300px，右侧完整内容 830px。
     * 面包屑和列表放在同一个右侧容器，避免旧 float 在宽屏上分离，
     * 也避免左栏高度参与右侧内容行高计算而产生顶部空白。
     */
    .pc-article-list-template .pc-article-shell {
      display: grid !important;
      grid-template-columns: 300px minmax(0, 830px) !important;
      column-gap: 70px !important;
      align-items: start !important;
      width: 1200px !important;
      max-width: calc(100% - 32px) !important;
      min-width: 0 !important;
      height: auto !important;
      margin: 0 auto 40px !important;
      padding: 0 !important;
      float: none !important;
      clear: both !important;
      overflow: visible !important;
    }

    .pc-article-list-template .pc-article-shell > .vk-pc-sidebar {
      float: none !important;
      width: 300px !important;
      max-width: 100%;
      min-width: 0;
      margin: 0 !important;
      align-self: start;
    }

    .pc-article-list-template .pc-article-content-column {
      float: none !important;
      width: 830px !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin: 0 !important;
    }

    .pc-article-list-template .pc-article-content-column > .sidebar,
    .pc-article-list-template .pc-article-content-column > .column {
      float: none !important;
      width: 100% !important;
      min-width: 0 !important;
      margin: 0 !important;
    }

    .pc-article-list-template .pc-article-content-column > .sidebar .title_r {
      width: 100%;
      min-height: 58px;
      margin: 0;
      border-bottom: 1px solid #dbe2e6;
      line-height: 58px;
    }

    .pc-article-list-template .pc-article-content-column > .column .sidebar_con {
      width: 100%;
      min-width: 0;
      padding-top: 14px;
    }

    .pc-article-list-template .pc-article-breadcrumb {
      float: none;
      display: flex;
      flex-wrap: wrap;
      min-height: 58px;
      align-items: center;
      justify-content: flex-end;
      margin: 0;
      padding: 8px 0;
      color: #777;
      font-size: 14px;
      line-height: 1.65;
      text-align: right;
    }

    .pc-article-list-template .pc-article-breadcrumb a {
      color: #555;
      text-decoration: none;
      transition: color .18s ease;
    }

    .pc-article-list-template .pc-article-breadcrumb a:hover {
      color: #149bc5;
    }

    .pc-article-list-template .pc-article-breadcrumb__separator {
      margin: 0 6px;
      color: #999;
    }

    .pc-article-list-template .column,
    .pc-article-list-template .pc-article-main {
      min-width: 0;
    }

    .pc-article-list-template .pc-article-main {
      width: 100%;
    }

    .pc-article-list-template .pc-article-category-head {
      width: 100%;
      margin: 0 0 16px;
      padding: 20px 22px 18px;
      border: 1px solid #e1e8ec;
      border-radius: 3px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(20, 48, 74, .05);
    }

    .pc-article-list-template .pc-article-category-title {
      position: relative;
      margin: 0;
      padding: 0 0 0 13px;
      color: #2b2b2b;
      font-size: 25px;
      line-height: 1.4;
      font-weight: 700;
    }

    .pc-article-list-template .pc-article-category-title::before {
      position: absolute;
      top: .16em;
      bottom: .16em;
      left: 0;
      width: 4px;
      border-radius: 1px;
      background: #30b7ef;
      content: "";
    }

    .pc-article-list-template .pc-article-category-desc {
      margin: 10px 0 0;
      color: #555;
      font-size: 15px;
      line-height: 1.78;
    }

    .pc-article-list-template .pc-article-list {
      display: grid;
      gap: 12px;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .pc-article-list-template .pc-article-card {
      display: grid;
      grid-template-columns: 238px minmax(0, 1fr);
      gap: 18px;
      min-width: 0;
      margin: 0;
      padding: 15px;
      border: 1px solid #e1e8ec;
      border-radius: 3px;
      background: #fff;
      box-shadow: 0 3px 12px rgba(20, 48, 74, .045);
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .pc-article-list-template .pc-article-card:hover {
      border-color: #cad8df;
      box-shadow: 0 7px 20px rgba(20, 48, 74, .08);
      transform: translateY(-1px);
    }

    .pc-article-list-template .pc-article-card__image {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 2px;
      background: #f3f6f7;
    }

    .pc-article-list-template .pc-article-card__image img {
      display: block;
      width: 100%;
      height: 100%;
      max-width: 100%;
      border: 0;
      object-fit: cover;
      object-position: center;
      transition: transform .22s ease;
    }

    .pc-article-list-template .pc-article-card__image img.is-fallback {
      object-fit: contain;
      padding: 18px;
    }

    .pc-article-list-template .pc-article-card:hover .pc-article-card__image img {
      transform: scale(1.02);
    }

    .pc-article-list-template .pc-article-card:hover .pc-article-card__image img.is-fallback {
      transform: none;
    }

    .pc-article-list-template .pc-article-card__content {
      display: flex;
      min-width: 0;
      flex-direction: column;
      align-items: flex-start;
    }

    .pc-article-list-template .pc-article-card__title {
      margin: 0 0 7px;
      padding: 0;
      color: #2b2b2b;
      font-size: 18px;
      line-height: 1.5;
      font-weight: 700;
    }

    .pc-article-list-template .pc-article-card__title a {
      display: -webkit-box;
      overflow: hidden;
      color: inherit;
      text-decoration: none;
      overflow-wrap: anywhere;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      transition: color .18s ease;
    }

    .pc-article-list-template .pc-article-card__title a:hover {
      color: #149bc5;
    }

    .pc-article-list-template .pc-article-card__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 16px;
      margin: 0 0 8px;
      color: #7a878e;
      font-size: 13px;
      line-height: 1.6;
    }

    .pc-article-list-template .pc-article-card__excerpt {
      display: -webkit-box;
      overflow: hidden;
      margin: 0 0 13px;
      color: #555;
      font-size: 14px;
      line-height: 1.75;
      overflow-wrap: anywhere;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    .pc-article-list-template .pc-article-card__more {
      display: inline-flex;
      min-height: 38px;
      align-items: center;
      justify-content: center;
      margin-top: auto;
      padding: 7px 15px;
      border: 1px solid #30b7ef;
      border-radius: 3px;
      background: #fff;
      color: #168fbd;
      font-size: 13px;
      line-height: 1.2;
      font-weight: 700;
      text-decoration: none;
      transition: color .18s ease, border-color .18s ease, background-color .18s ease;
    }

    .pc-article-list-template .pc-article-card__more:hover {
      border-color: #168fbd;
      background: #168fbd;
      color: #fff;
    }

    .pc-article-list-template .pc-article-empty {
      display: none;
      margin: 0;
      padding: 34px 20px;
      border: 1px dashed #ccd8de;
      border-radius: 3px;
      background: #fff;
      color: #66757d;
      font-size: 15px;
      line-height: 1.75;
      text-align: center;
    }

    .pc-article-list-template .pc-article-empty.is-visible {
      display: block;
    }

    .pc-article-list-template .pc-article-pager {
      width: 100%;
      margin: 20px 0 6px;
      padding: 0;
    }

    .pc-article-list-template .pc-article-pager > ul {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .pc-article-list-template .pc-article-pager li {
      float: none !important;
      display: inline-flex;
      min-width: 34px;
      min-height: 34px;
      align-items: center;
      justify-content: center;
      margin: 0 !important;
      padding: 5px 10px !important;
      border: 1px solid #d9e1e5;
      border-radius: 3px;
      background: #fff;
      color: #555;
      font-size: 14px;
      line-height: 1.2;
      list-style: none;
    }

    .pc-article-list-template .pc-article-pager li a {
      display: inline-flex;
      width: 100%;
      min-height: 22px;
      align-items: center;
      justify-content: center;
      color: #555;
      text-decoration: none;
    }

    .pc-article-list-template .pc-article-pager li:hover {
      border-color: #30b7ef;
    }

    .pc-article-list-template .pc-article-pager li:hover a {
      color: #168fbd;
    }

    .pc-article-list-template .pc-article-pager li.thisclass {
      border-color: #30b7ef;
      background: #30b7ef;
      color: #fff;
      font-weight: 700;
    }

    .pc-article-list-template .pc-article-pager br {
      display: none;
    }

    .pc-article-list-template .pc-article-clear {
      clear: both;
      width: 100%;
      height: 0;
      overflow: hidden;
    }

    @media (max-width: 1240px) {
      .pc-article-list-template .pc-article-shell {
        grid-template-columns: 300px minmax(0, 1fr) !important;
        column-gap: 40px !important;
        width: calc(100% - 32px) !important;
        max-width: 1200px;
      }

      .pc-article-list-template .pc-article-content-column {
        width: 100%;
      }
    }

    @media (max-width: 980px) {
      .pc-article-list-template .pc-article-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 20px !important;
        width: calc(100% - 24px) !important;
      }

      .pc-article-list-template .pc-article-shell > .vk-pc-sidebar,
      .pc-article-list-template .pc-article-content-column {
        width: 100%;
      }
    }

    @media (max-width: 1050px) {
      .pc-article-list-template .pc-article-card {
        grid-template-columns: 210px minmax(0, 1fr);
      }
    }

    @media (max-width: 820px) {
      .pc-article-list-template .pc-article-card {
        grid-template-columns: 1fr;
      }

      .pc-article-list-template .pc-article-card__image {
        max-height: 320px;
      }
    }

    @media (max-width: 680px) {
      .pc-article-list-template .pc-article-shell {
        width: calc(100% - 12px) !important;
      }
    }

    @media (max-width: 560px) {
      .pc-article-list-template .pc-article-category-head {
        padding: 18px 16px;
      }

      .pc-article-list-template .pc-article-category-title {
        font-size: 22px;
      }

      .pc-article-list-template .pc-article-category-desc {
        font-size: 14px;
        line-height: 1.72;
      }

      .pc-article-list-template .pc-article-card {
        gap: 13px;
        padding: 12px;
      }

      .pc-article-list-template .pc-article-card__title {
        font-size: 17px;
      }

      .pc-article-list-template .pc-article-card__more {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pc-article-list-template .pc-article-card,
      .pc-article-list-template .pc-article-card__image img,
      .pc-article-list-template .pc-article-card__more {
        transition: none;
      }

      .pc-article-list-template .pc-article-card:hover,
      .pc-article-list-template .pc-article-card:hover .pc-article-card__image img {
        transform: none;
      }
    }