/* 技术方案列表 / 详情 */
body.page-sol,
body.page-sol-detail {
  padding-top: var(--header-h);
  background: #fff;
}

body.page-sol .header,
body.page-sol-detail .header {
  position: fixed;
}

.page-sol .page-hero-media img,
.page-sol-detail .page-hero-media img {
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center center;
}

.page-sol .page-hero-mask,
.page-sol-detail .page-hero-mask {
  background: linear-gradient(90deg, var(--c-primary) 0%, rgba(255, 255, 255, 0) 71.693%);
}

.sol-layout {
  display: flex;
  align-items: baseline;
  gap: 40px;
  padding: 93px 0 105px;
}

.sol-side {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 0;
  margin: 0;
  align-self: baseline;
}

.sol-side a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 20px;
  color: #6b7280;
}

.sol-side a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px #d1d5db;
  flex-shrink: 0;
}

.sol-side a.is-active {
  color: var(--c-primary);
}

.sol-side a.is-active::before {
  background: var(--c-primary);
  box-shadow: none;
}

.sol-main {
  flex: 1;
  min-width: 0;
}

.sol-block {
  scroll-margin-top: 110px;
}

.sol-block + .sol-block {
  margin-top: 62px;
}

.sol-block h2 {
  font-size: 30px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: -0.45px;
  color: #333;
  margin: 0 0 35px;
}

.sol-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  box-sizing: border-box;
  min-height: 320px;
  height: auto;
  padding: 40px 48px;
  background: #f8f9fa;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
}

.sol-card + .sol-card {
  margin-top: 24px;
}

.sol-empty {
  margin: 0 0 24px;
  color: #6b7280;
  font-size: 16px;
}

.npage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 52px;
  padding-top: 8px;
}

.npage a,
.npage span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  background: #eceef2;
  color: #4b5563;
  font-size: 16px;
  line-height: 20px;
  border-radius: 9999px;
}

.npage a.is-active {
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.npage .npage-ellipsis {
  min-width: 0;
  height: auto;
  padding: 0 4px;
  background: none;
  color: #9ca3af;
  font-size: 14px;
}

.npage .npage-next,
.npage .npage-prev {
  padding: 0 20px;
}

.sol-card-copy {
  flex: 1 1 360px;
  width: auto;
  max-width: 640px;
  min-width: 0;
}

.sol-card-copy h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.45px;
  color: #111827;
}

.sol-card-copy h3 em {
  font-style: normal;
  color: var(--c-primary);
  margin-right: 8px;
}

.sol-card-copy p {
  margin-top: 23px;
  font-size: 16px;
  line-height: 22.75px;
  color: #6b7280;
}

.sol-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 32px;
  height: 42px;
  padding: 0 25px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  line-height: 20px;
  color: #374151;
}

.sol-more:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.sol-card-photo {
  flex: 1 1 400px;
  width: auto;
  max-width: 635px;
  min-width: 0;
  height: auto;
  aspect-ratio: 635 / 332;
  max-height: 332px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 1;
}

.sol-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 详情 */
.sd-wrap {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 49px 0 80px;
}

.sd-main {
  flex: 1;
  width: auto;
  min-width: 0;
}

.sd-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-primary);
}

.sd-back img {
  width: 16px;
  height: 16px;
}

.sd-main h1 {
  margin-top: 25px;
  font-size: 36px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: -0.75px;
  color: #111827;
}

.sd-lead {
  margin-top: 12px;
  max-width: 1115px;
  font-size: 16px;
  line-height: 30px;
  color: #4b5563;
}

.sd-lead p {
  margin: 0;
}

.sd-lead p + p {
  margin-top: 30px;
}

.sd-sec {
  margin-top: 43px;
}

.sd-sec h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: #111827;
}

.sd-sec h2::before {
  content: "";
  width: 6px;
  height: 16px;
  border-radius: 2px;
  background: var(--c-primary);
}

.sd-scenes,
.sd-cases {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.sd-scene {
  flex: 1;
  min-width: 0;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sd-scene img {
  width: 100%;
  height: 227px;
  object-fit: cover;
}

.sd-scene p {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-top: 1px solid #f3f4f6;
  font-size: 14px;
  line-height: 20px;
  color: #1f2937;
}

.sd-case {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 236px;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}

.sd-case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.sd-case-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
}

.sd-case-bar span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-case-bar img {
  width: 16px;
  height: 16px;
  opacity: 1;
}

.sd-case-bar .sd-mini {
  width: 14px;
  height: 14px;
}

.sd-case.is-video {
  cursor: pointer;
}

.sd-case.is-video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

body.sd-video-open {
  overflow: hidden;
}

.sd-video-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.72);
}

.sd-video-modal[hidden] {
  display: none;
}

.sd-video-dialog {
  position: relative;
  width: min(960px, 100%);
}

.sd-video-dialog video {
  display: block;
  width: 100%;
  max-height: 80vh;
  background: #000;
  border-radius: 8px;
}

.sd-video-close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.sd-pager {
  margin-top: 55px;
  padding-top: 25px;
  border-top: 1px solid #f3f4f6;
  font-size: 14px;
  line-height: 20px;
  color: #6b7280;
}

.sd-pager p + p {
  margin-top: 21px;
}

.sd-pager a {
  color: var(--c-primary);
}

.sd-aside {
  flex: 0 1 32%;
  width: auto;
  min-width: 280px;
  max-width: 535px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.sd-aside h3 {
  height: 61px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--c-primary);
  border-top: 4px solid #9bdafb;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.sd-prod {
  margin: 20px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 4px;
  text-align: center;
}

.sd-prod.is-on {
  border-bottom: 2px solid var(--c-primary);
}

.sd-prod img {
  width: 435px;
  height: 378px;
  margin: 51px auto 0;
  object-fit: contain;
}

.sd-prod p {
  padding: 28px 0 51px;
  font-size: 16px;
  line-height: 20px;
  color: #1f2937;
}

@media (max-width: 1019px) {
  .sol-layout {
    padding: 48px 0 72px;
  }

  .sol-layout,
  .sd-wrap {
    flex-direction: column;
  }

  .sol-side {
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 0;
  }

  .sol-card {
    min-height: 0;
    flex-direction: column;
    height: auto;
    padding: 32px;
    gap: 24px;
  }

  .npage {
    flex-wrap: wrap;
    margin-top: 32px;
  }

  .sol-card-copy,
  .sol-card-photo,
  .sd-main,
  .sd-aside {
    width: 100%;
  }

  .sol-card-photo {
    height: 240px;
  }
}

@media (max-width: 768px) {
  .sol-layout {
    padding: 28px 0 56px;
    gap: 20px;
  }

  .sol-side {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sol-side::-webkit-scrollbar {
    display: none;
  }

  .sol-side a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 999px;
    font-size: 13px;
    line-height: 18px;
  }

  .sol-side a::before {
    display: none;
  }

  .sol-side a.is-active {
    background: var(--c-primary);
    color: #fff;
  }

  .sol-block + .sol-block {
    margin-top: 36px;
  }

  .sol-card + .sol-card {
    margin-top: 16px;
  }

  .sol-block h2 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 16px;
  }

  .sol-card {
    padding: 16px;
    border-radius: 12px;
    gap: 16px;
  }

  .sol-card-copy h3 {
    font-size: 16px;
    line-height: 24px;
  }

  .sol-card-copy p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 22px;
  }

  .sol-more {
    margin-top: 16px;
    height: 38px;
    padding: 0 16px;
  }

  .sol-card-photo {
    height: 180px;
  }

  .sd-wrap {
    padding: 24px 0 48px;
    gap: 24px;
  }

  .sd-main h1 {
    margin-top: 16px;
    font-size: 22px;
    line-height: 28px;
  }

  .sd-lead {
    font-size: 14px;
    line-height: 24px;
  }

  .sd-lead p + p {
    margin-top: 16px;
  }

  .sd-sec {
    margin-top: 28px;
  }

  .sd-scenes,
  .sd-cases {
    flex-direction: column;
  }

  .sd-scene img {
    height: 160px;
  }

  .sd-case {
    height: 180px;
  }

  .sd-pager {
    margin-top: 28px;
  }

  .sd-prod img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 220px;
    margin: 16px auto 0;
  }

  .sd-prod p {
    padding: 16px 8px 24px;
  }
}