/* 服务分类骨架：
   总览页：页面头部 + 5 张大号服务卡（2 + 3 排列）
   服务页：类别色带头部（图标方块 + h1 + 导语 + 主按钮 / 右侧 4:3 配图）→ 服务范围 → 如何对接 → 提交前请准备 → 已审核服务商 → 其他服务 */
@layer pages {
  .services-overview__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--card-gap);
  }

  .services-overview__grid > :nth-child(-n + 2) {
    grid-column: span 3;
  }

  .services-overview__grid > :nth-child(n + 3) {
    grid-column: span 2;
  }

  /* 类别色带头部：section 上加 .is-stand 等类别类 */
  .service-head {
    background: var(--tile-bg);
    box-shadow: inset 0 -1px 0 var(--tile-border);
  }

  .service-head__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-12);
    align-items: center;
    padding-block: var(--section-y);
  }

  .service-head__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .service-head__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-ring);
    color: var(--tile-icon);
  }

  .service-head__icon .icon {
    width: 24px;
    height: 24px;
  }

  .service-scope__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3) var(--space-6);
  }

  .service-prep .dl {
    max-width: var(--measure);
  }

  .service-suppliers__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--card-gap);
  }

  .service-others__grid {
    --tile-cols: 4;
  }

  @media (max-width: 1023.98px) {
    .services-overview__grid > * {
      grid-column: span 3;
    }

    .service-head__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
      padding-block: var(--space-12);
    }

    .service-scope__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-suppliers__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 639.98px) {
    .services-overview__grid > * {
      grid-column: 1 / -1;
    }

    .service-scope__list {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

/* P5 补充：服务页实际结构（2026-10-05） */
@layer pages {
  .service-head .breadcrumb {
    padding-top: var(--space-6);
    margin-bottom: 0;
  }

  .service-head__inner {
    padding-block: var(--space-10) var(--section-y);
  }

  .service-head h1 {
    max-width: 20em;
  }

  .service-scope__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-6);
  }

  .service-scope__cols h3 {
    margin-bottom: var(--space-3);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
  }

  .service-prep .dl {
    margin-top: var(--space-6);
    max-width: 56rem;
  }

  .service-notes__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10);
  }

  .service-notes__grid h2 {
    margin-bottom: var(--space-3);
  }

  .service-notes__grid p {
    color: var(--color-text-secondary);
  }

  .service-notes__grid .notice {
    color: inherit;
  }

  .section > .container > h2 + .steps,
  .section > .container > h2 + .checklist,
  .section > .container > h2 + .tile-grid,
  .section > .container > h2 + .table-wrap,
  .section > .container > h2 + .accordion {
    margin-top: var(--space-6);
  }

  .section .steps + .statement {
    margin-top: var(--space-8);
  }

  .service-suppliers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-suppliers .service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .service-suppliers .service-card .card__actions {
    margin-top: auto;
    padding-top: var(--space-4);
  }

  .page-faq {
    max-width: var(--measure);
  }

  @media (max-width: 1023.98px) {
    .service-scope__cols,
    .service-notes__grid,
    .service-suppliers__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .service-head .art {
      order: -1;
    }
  }
}