/* =========================================
   服务页 H5（max-width: 768px）
   设计稿 Service_mobile 390
   手风琴：item height 过渡（JS 写入真实高度），内容文档流 + overflow 裁切
   ========================================= */

@media (max-width: 768px) {
  /* ----------------------------------------
     Banner
     ---------------------------------------- */
  .service-banner {
    height: 5rem;
    min-height: 0;
  }

  .service-banner__bg {
    background: none;
    box-shadow: none;
    filter: none;
  }

  .service-banner__title {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3.5rem;
    gap: 0.16rem;
  }

  .service-banner__eyebrow {
    font-size: 0.13rem;
    line-height: 0.18rem;
    opacity: 1;
  }

  .service-banner__heading {
    font-size: 0.52rem;
    line-height: 0.6rem;
    font-weight: 700;
  }

  /* ----------------------------------------
     Intro
     设计稿：上 48 / 左右 20；eyebrow→headline 32；content→img 32；img 350×262；img→list 48
     ---------------------------------------- */
  .service-intro {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    min-height: 0;
    padding: 0.48rem 0.2rem 0;
  }

  .service-intro__content {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .service-intro__eyebrow {
    font-size: 0.16rem;
    line-height: 0.18rem;
    margin-bottom: 0.32rem;
  }

  .service-intro__headline {
    font-size: 0.24rem;
    line-height: 0.36rem;
    font-weight: 500;
  }

  .service-intro__photo {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    height: 2.62rem;
    margin-top: 0;
    background: none;
    box-shadow: none;
    filter: none;
    object-fit: cover;
  }

  /* ----------------------------------------
     Accordion List
     收起 height 88；展开由 JS 写真实高度并做 height 过渡
     ---------------------------------------- */
  .service-list {
    padding: 0.48rem 0.2rem;
  }

  .service-list__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 0.88rem;
    min-height: 0;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    transition:
      height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      border-color 0.35s ease;
  }

  .service-list__header,
  .service-list__bullets {
    flex-shrink: 0;
  }

  .service-list__bg {
    background: none;
    box-shadow: none;
    filter: none;
  }

  /* 收起时只加快背景图淡出，高度仍正常收合 */
  .service-list__item--open.service-list__item--closing .service-list__bg {
    opacity: 0;
    transition: opacity 0.12s ease;
  }

  .service-list__item--open.service-list__item--closing .service-list__num {
    color: #808080;
    opacity: 1;
    transition-duration: 0.12s;
  }

  .service-list__item--open.service-list__item--closing .service-list__name {
    color: var(--color-black);
    transition-duration: 0.12s;
  }

  .service-list__item--open.service-list__item--closing .service-list__icon::before,
  .service-list__item--open.service-list__item--closing .service-list__icon::after {
    background: var(--color-black);
    transition-duration: 0.12s;
  }

  /* H5：展开态仅用图片本身，不加遮罩 */
  .service-list__dim {
    display: none;
  }

  .service-list__header {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-height: 0;
    padding: 0.32rem 0.4rem 0 0.16rem;
    margin-bottom: 0;
    transition: none;
  }

  .service-list__left {
    flex: none;
    width: 100%;
    gap: 0.12rem;
    min-width: 0;
    align-items: flex-start;
  }

  .service-list__num {
    font-size: 0.14rem;
    width: 0.2rem;
    flex-shrink: 0;
    color: #808080;
    line-height: 0.24rem;
  }

  .service-list__name {
    flex: 1;
    min-width: 0;
    font-size: 0.18rem;
    line-height: 0.24rem;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .service-list__right {
    display: block;
    position: static;
    width: 100%;
    flex-shrink: 1;
  }

  .service-list__summary {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    z-index: 2;
    display: block;
    width: auto;
    max-height: none;
    margin: 0.12rem 0 0;
    padding: 0 0 0 0.32rem;
    overflow: visible;
    font-size: 0.14rem;
    line-height: 0.24rem;
    text-align: left;
    color: var(--color-white);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, color 0.35s ease;
  }

  .service-list__icon {
    position: absolute;
    right: 0.16rem;
    top: 0.38rem;
    width: 0.16rem;
    height: 0.16rem;
    margin-top: 0;
    flex-shrink: 0;
    transform: none;
  }

  .service-list__icon::before {
    width: 0.14rem;
    height: 1.5px;
  }

  .service-list__icon::after {
    width: 1.5px;
    height: 0.14rem;
  }

  .service-list__bullets {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.1rem;
    width: 100%;
    max-height: none;
    margin: 0;
    padding: 0.16rem 0.4rem 0.24rem 0.48rem;
    overflow: visible;
    opacity: 0;
    transform: none;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .service-list__bullet {
    flex: none;
    align-items: flex-start;
    width: 100%;
    font-size: 0.16rem;
    line-height: 0.22rem;
    gap: 0.12rem;
  }

  .service-list__bullet > span:not(.service-list__dot) {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .service-list__dot {
    width: 0.06rem;
    height: 0.06rem;
    margin-top: 0.08rem;
  }

  .service-list__item--open {
    height: auto;
    min-height: 2.84rem;
    border-bottom-color: transparent;
  }

  .service-list__item--open .service-list__header {
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    padding: 0.32rem 0.4rem 0 0.16rem;
    margin-bottom: 0;
  }

  .service-list__item--open .service-list__left {
    padding-right: 0;
  }

  .service-list__item--open .service-list__num {
    color: var(--color-white);
    opacity: 0.7;
  }

  .service-list__item--open .service-list__name {
    color: var(--color-white);
  }

  .service-list__item--open .service-list__summary {
    opacity: 1;
    pointer-events: auto;
  }

  .service-list__item--open .service-list__right {
    align-items: stretch;
    padding-top: 0;
  }

  .service-list__item--open .service-list__icon {
    top: 0.38rem;
    margin-top: 0;
    transform: rotate(45deg);
  }

  .service-list__item--open .service-list__bullets {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.06s;
  }

  .service-list__item--open .service-list__bullet {
    color: rgba(255, 255, 255, 0.8);
  }

  .service-list__item--open .service-list__dot {
    background: var(--color-white);
    opacity: 1;
  }
}