/* vipkei.com 手机文章详情页专用样式
 * source: article_article_m.htm
 * version: 20260612-p1s5-article-detail
 */

.m-article-detail-template *,
    .m-article-detail-template *::before,
    .m-article-detail-template *::after {
      box-sizing: border-box;
    }

    /* 与手机文章列表页保持一致的栏目导航 */
    .m-article-detail-template .m-detail-cate {
      width: 100%;
      color: #FFFFFF;
      background: #30B7EF;
    }

    .m-article-detail-template .m-detail-cate__toolbar {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 48px;
      padding: 6px 54px;
    }

    .m-article-detail-template .m-detail-cate__title {
      min-width: 0;
      overflow: hidden;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.4;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .m-article-detail-template .m-detail-cate__button,
    .m-article-detail-template .m-detail-cate__back {
      position: absolute;
      top: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 4px;
      color: #FFFFFF;
      background: transparent;
      transform: translateY(-50%);
      cursor: pointer;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }

    .m-article-detail-template .m-detail-cate__back {
      left: 8px;
    }

    .m-article-detail-template .m-detail-cate__button {
      right: 8px;
    }

    .m-article-detail-template .m-detail-cate__button:focus-visible,
    .m-article-detail-template .m-detail-cate__back:focus-visible {
      outline: 2px solid #FFFFFF;
      outline-offset: -2px;
    }

    .m-article-detail-template .m-detail-cate__back-icon {
      width: 10px;
      height: 10px;
      border-bottom: 2px solid currentColor;
      border-left: 2px solid currentColor;
      transform: rotate(45deg);
    }

    .m-article-detail-template .m-detail-cate__toggle-icon {
      width: 9px;
      height: 9px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg) translate(-2px, -2px);
      transition: transform .2s ease;
    }

    .m-article-detail-template .m-detail-cate__button[aria-expanded="true"]
    .m-detail-cate__toggle-icon {
      transform: rotate(225deg) translate(-1px, -1px);
    }

    .m-article-detail-template .m-detail-cate__panel {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
      margin: 0;
      padding: 10px 8px;
      border-bottom: 1px solid #E2E8EC;
      background: #FFFFFF;
    }

    .m-article-detail-template .m-detail-cate__panel[hidden] {
      display: none;
    }

    .m-article-detail-template .m-detail-cate__panel a {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      min-height: 42px;
      padding: 7px 8px;
      overflow: hidden;
      border: 1px solid #DDE5E9;
      border-radius: 4px;
      color: #555555;
      background: #FFFFFF;
      font-size: 14px;
      line-height: 1.35;
      text-align: center;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .m-article-detail-template .m-detail-cate__panel a:focus-visible {
      outline: 2px solid #30B7EF;
      outline-offset: 2px;
    }

    /* 可见面包屑 */
    .m-article-detail-template .m-article-breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px;
      width: calc(100% - 12px);
      margin: 8px 6px 0;
      padding: 9px 11px;
      border: 1px solid #E0E7EA;
      border-radius: 3px;
      color: #777777;
      background: #FFFFFF;
      font-size: 13px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .m-article-detail-template .m-article-breadcrumb a {
      color: #168FBD;
      text-decoration: none;
    }

    .m-article-detail-template .m-article-breadcrumb__current {
      min-width: 0;
      color: #666666;
    }

    /* 文章目录：正文至少有两个 H2/H3 时由 JS 显示 */
    .m-article-detail-template .m-article-toc {
      width: 100%;
      margin: 0 0 17px;
      overflow: hidden;
      border: 1px solid #DDE5E9;
      border-radius: 4px;
      background: #F8FBFC;
    }

    .m-article-detail-template .m-article-toc[hidden] {
      display: none;
    }

    .m-article-detail-template .m-article-toc summary {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 46px;
      padding: 11px 42px 11px 14px;
      color: #2B2B2B;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.5;
      list-style: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .m-article-detail-template .m-article-toc summary::-webkit-details-marker {
      display: none;
    }

    .m-article-detail-template .m-article-toc summary::after {
      position: absolute;
      top: 50%;
      right: 15px;
      color: #168FBD;
      font-size: 20px;
      font-weight: 400;
      line-height: 1;
      content: "+";
      transform: translateY(-50%);
    }

    .m-article-detail-template .m-article-toc[open] summary {
      border-bottom: 1px solid #DDE5E9;
      color: #168FBD;
      background: #F2F8FA;
    }

    .m-article-detail-template .m-article-toc[open] summary::after {
      content: "−";
    }

    .m-article-detail-template .m-article-toc summary:focus-visible {
      outline: 2px solid #30B7EF;
      outline-offset: -2px;
    }

    .m-article-detail-template .m-article-toc__list {
      margin: 0;
      padding: 10px 14px 12px 33px;
      color: #555555;
      font-size: 14px;
      line-height: 1.65;
    }

    .m-article-detail-template .m-article-toc__list li {
      margin: 5px 0;
      padding: 0;
    }

    .m-article-detail-template .m-article-toc__list li.is-h3 {
      margin-left: 14px;
    }

    .m-article-detail-template .m-article-toc__list a {
      color: #46606D;
      text-decoration: none;
    }

    /* FAQ 字段独立输出，但沿用正文统一 details 样式 */
    .m-article-detail-template .m-article-faq {
      margin: 22px 0 0;
      padding-top: 1px;
    }

    .m-article-detail-template .m-article-faq > h2:first-child {
      margin-top: 0 !important;
    }

    /* 正文增加 .m-article-body 包裹后，继续兼容原有文章内 CTA 收口规则。 */
    body.m-article-detail-template .m-article-content
    .m-article-body > .article-contact:last-child {
      margin-bottom: -22px;
    }

    /* 正文视频与 iframe 响应式容器 */
    .m-article-detail-template .m-responsive-media {
      position: relative;
      overflow: hidden;
      width: 100%;
      aspect-ratio: 16 / 9;
      margin: 15px 0;
      border-radius: 3px;
      background: #000000;
    }

    .m-article-detail-template .m-responsive-media iframe,
    .m-article-detail-template .m-responsive-media video {
      position: absolute;
      inset: 0;
      display: block;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      border: 0;
    }

    /* 相关文章：图片固定 4:3，和产品正方形缩略图彻底分离 */
    .m-article-detail-template .m-related-articles {
      width: calc(100% - 12px);
      margin: 10px 6px 0;
      padding: 14px;
      border: 1px solid #E0E7EA;
      border-radius: 3px;
      background: #FFFFFF;
      box-shadow: 0 3px 12px rgba(20, 48, 74, .035);
    }

    .m-article-detail-template .m-related-articles[hidden] {
      display: none;
    }

    .m-article-detail-template .m-related-articles__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 11px;
    }

    .m-article-detail-template .m-related-articles__title {
      position: relative;
      margin: 0;
      padding-left: 12px;
      color: #2B2B2B;
      font-size: 19px;
      font-weight: 700;
      line-height: 1.45;
    }

    .m-article-detail-template .m-related-articles__title::before {
      position: absolute;
      top: .18em;
      bottom: .18em;
      left: 0;
      width: 4px;
      border-radius: 1px;
      background: #30B7EF;
      content: "";
    }

    .m-article-detail-template .m-related-articles__more {
      flex: 0 0 auto;
      color: #168FBD;
      font-size: 13px;
      line-height: 1.5;
      text-decoration: none;
    }

    .m-article-detail-template .m-related-articles__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
    }

    .m-article-detail-template .m-related-article-card {
      min-width: 0;
      overflow: hidden;
      border: 1px solid #E1E8EC;
      border-radius: 4px;
      background: #FFFFFF;
    }

    .m-article-detail-template .m-related-article-card > a {
      display: block;
      color: inherit;
      text-decoration: none;
    }

    .m-article-detail-template .m-related-article-card__image {
      display: block;
      overflow: hidden;
      width: 100%;
      aspect-ratio: 4 / 3;
      background: #F4F7F8;
    }

    .m-article-detail-template .m-related-article-card__image img {
      display: block;
      width: 100%;
      height: 100%;
      margin: 0;
      object-fit: cover;
      object-position: center;
    }

    .m-article-detail-template .m-related-article-card__image img.is-placeholder {
      padding: 8px;
      object-fit: contain;
    }

    .m-article-detail-template .m-related-article-card__title {
      display: -webkit-box;
      min-height: 58px;
      margin: 0;
      padding: 8px 8px 9px;
      overflow: hidden;
      color: #3E474D;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.45;
      text-align: left;
      text-overflow: ellipsis;
      overflow-wrap: anywhere;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .m-article-detail-template .m-related-article-card > a:active
    .m-related-article-card__title {
      color: #168FBD;
    }

    @media (max-width: 359px) {
      .m-article-detail-template .m-detail-cate__toolbar {
        padding-right: 50px;
        padding-left: 50px;
      }

      .m-article-detail-template .m-detail-cate__panel {
        gap: 6px;
        padding-right: 6px;
        padding-left: 6px;
      }

      .m-article-detail-template .m-detail-cate__panel a,
      .m-article-detail-template .m-related-article-card__title {
        font-size: 13px;
      }

      .m-article-detail-template .m-related-articles {
        padding-right: 10px;
        padding-left: 10px;
      }

      .m-article-detail-template .m-related-articles__grid {
        gap: 8px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .m-article-detail-template .m-detail-cate__toggle-icon {
        transition: none;
      }

      .m-article-detail-template {
        scroll-behavior: auto;
      }
    }