/*
 * 首页 · 质控整体解决方案
 * 三种状态统一在此收口：
 * 1. 默认：四张实景卡 + 底部中性磨砂标题条
 * 2. 悬停 / 键盘聚焦：磨砂层平滑铺满，详情在卡片中下部展开
 * 3. 触屏：首次点击沿用展开态，再次点击进入详情页
 */
.stack-home #solutions.solh-sec {
  --solution-ink: #102822;
  --solution-copy: #5b6b66;
  --solution-accent: #2bc593;
  background: #fff !important;
}

.stack-home #solutions.solh-sec .h2,
.stack-home #solutions.solh-sec .h2 b {
  color: #173c2d !important;
}

.stack-home #solutions .solh-g {
  gap: clamp(18px, 1.3vw, 26px);
}

.stack-home #solutions .solh {
  --solh-inset: 16px;
  --solh-peek: 136px;
  border: 1px solid rgba(21, 57, 47, .06) !important;
  border-radius: 20px;
  background: #dfeae7;
  box-shadow:
    0 30px 66px -44px rgba(16, 55, 44, .52),
    0 1px 1px rgba(16, 55, 44, .035) !important;
}

.stack-home #solutions .solh-img img {
  transform: scale(1.001) !important;
  transition: transform 1.15s cubic-bezier(.16, 1, .3, 1), filter .7s ease !important;
}

.stack-home #solutions .solh:hover .solh-img img,
.stack-home #solutions .solh:focus-visible .solh-img img,
.stack-home #solutions .solh.is-active .solh-img img {
  transform: scale(1.026) !important;
}

/* 当前方案只做一层克制的上浮与景深变化，避免四张卡片同时争夺注意力。 */
.stack-home #solutions .solh.is-active:not(:hover) {
  transform: translateY(-3px);
  box-shadow:
    0 34px 72px -46px rgba(16, 55, 44, .52),
    0 1px 1px rgba(16, 55, 44, .045) !important;
}

.stack-home #solutions .solh-body {
  padding: 42px 28px 16px;
  border: 0 !important;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(242, 246, 244, .7)) !important;
  -webkit-backdrop-filter: blur(30px) saturate(28%) brightness(108%) contrast(101%) !important;
  backdrop-filter: blur(30px) saturate(28%) brightness(108%) contrast(101%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(255, 255, 255, .38),
    0 22px 48px -34px rgba(14, 35, 29, .24) !important;
}

.stack-home #solutions .solh:hover .solh-body,
.stack-home #solutions .solh:focus-visible .solh-body,
.stack-home #solutions .solh.is-active .solh-body {
  /* 只收紧面板内边距，让文字上移；卡片与磨砂面板外框保持原位。 */
  padding: 20px 30px 26px;
  background:
    radial-gradient(circle at 50% 70%, rgba(193, 179, 176, .26), transparent 30%),
    linear-gradient(145deg, rgba(247, 250, 249, .71), rgba(220, 229, 226, .6)) !important;
  -webkit-backdrop-filter: blur(34px) saturate(35%) brightness(106%) contrast(102%) !important;
  backdrop-filter: blur(34px) saturate(35%) brightness(106%) contrast(102%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 22px 46px -34px rgba(14, 35, 29, .22) !important;
}

.stack-home #solutions .solh-head {
  flex: 0 0 auto;
  transition: flex-basis .64s cubic-bezier(.16, 1, .3, 1);
}

/* 默认收起态：标题按可见磨砂层本身居中，不再受整张卡片的位移影响。 */
.stack-home #solutions .solh:not(:hover):not(:focus-visible):not(.is-active) .solh-body {
  padding: 0 !important;
}
.stack-home #solutions .solh:not(:hover):not(:focus-visible):not(.is-active) .solh-head {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: calc(var(--solh-peek) + var(--solh-inset));
  padding: 0 28px;
}

@media (max-width: 700px) {
  .stack-home #solutions .solh:not(:hover):not(:focus-visible):not(.is-active) .solh-head {
    padding: 0 20px;
  }
}

.stack-home #solutions .solh:hover .solh-head,
.stack-home #solutions .solh:focus-visible .solh-head,
.stack-home #solutions .solh.is-active .solh-head {
  display: flex;
  flex: 0 0 27%;
  align-items: flex-end;
}

.stack-home #solutions .solh-body h3 {
  color: var(--solution-ink);
  font-size: clamp(17px, 1.1vw, 20px);
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.3;
  text-shadow: none !important;
}

.stack-home #solutions .solh-reveal {
  margin-top: 0 !important;
}

.stack-home #solutions .solh:hover .solh-reveal,
.stack-home #solutions .solh:focus-visible .solh-reveal,
.stack-home #solutions .solh.is-active .solh-reveal {
  max-height: none;
  margin-top: clamp(16px, 2.2vh, 24px) !important;
}

.stack-home #solutions .solh-lead {
  margin: 0 0 12px;
  color: var(--solution-copy) !important;
  font-size: clamp(12.5px, .92vw, 15px);
  line-height: 1.75;
}

.stack-home #solutions .solh-reveal ul {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(32, 73, 62, .1);
}

.stack-home #solutions .solh-reveal li {
  min-height: 40px;
  padding: 10px 0 10px 30px;
  color: #293d37 !important;
  border-bottom: 1px solid rgba(32, 73, 62, .1);
  font-size: clamp(12px, .88vw, 14px);
  line-height: 1.55;
}

.stack-home #solutions .solh-reveal li::before {
  top: 50%;
  width: 13px;
  height: 2px;
  border-radius: 0;
  background: var(--solution-accent);
  transform: translateY(-50%);
}

.stack-home #solutions .solh-tags {
  display: none !important;
}

.stack-home #solutions .solh-more {
  margin-top: auto;
  padding-top: 12px;
  color: var(--solution-ink) !important;
  font-size: clamp(13px, .9vw, 15px);
  font-weight: 650;
  letter-spacing: .015em;
}

.stack-home #solutions .solh-more .ar {
  color: var(--solution-accent);
}

.stack-home #solutions .solh:focus-visible {
  outline: 3px solid rgba(43, 197, 147, .45);
  outline-offset: 5px;
}

@media (max-width: 1200px) {
  .stack-home #solutions .solh {
    --solh-peek: 128px;
  }

  .stack-home #solutions .solh:hover .solh-head,
  .stack-home #solutions .solh:focus-visible .solh-head,
  .stack-home #solutions .solh.is-active .solh-head {
    flex-basis: 24%;
  }
}

@media (max-width: 700px) {
  .stack-home #solutions .solh {
    --solh-inset: 10px;
    --solh-peek: 108px;
    height: min(118vw, 470px);
  }

  .stack-home #solutions .solh-body {
    padding: 58px 20px 8px;
  }

  .stack-home #solutions .solh:hover .solh-body,
  .stack-home #solutions .solh:focus-visible .solh-body,
  .stack-home #solutions .solh.is-active .solh-body {
    padding: 18px 22px 22px;
  }

  .stack-home #solutions .solh:hover .solh-head,
  .stack-home #solutions .solh:focus-visible .solh-head,
  .stack-home #solutions .solh.is-active .solh-head {
    flex-basis: 17%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-home #solutions .solh-head {
    transition: none;
  }
}

/*
 * 首页方案卡片 · 紧凑悬浮标题层
 * 默认标题层改为约原高度的 2/3，并在图片卡片四周保留呼吸边距。
 * Hover / keyboard focus 仍在同一张图片卡内完整展开，避免影响既有交互。
 */
.stack-home #solutions .solh {
  --solh-inset: clamp(14px, 1.05vw, 18px);
  --solh-peek: 100px;
}

.stack-home #solutions .solh-body {
  top: calc(100% - var(--solh-peek) - var(--solh-inset)) !important;
  right: var(--solh-inset) !important;
  bottom: var(--solh-inset) !important;
  left: var(--solh-inset) !important;
  height: var(--solh-peek) !important;
  min-height: 0;
  padding: 0 !important;
  border-radius: 22px;
  transform: translateY(0);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(244, 247, 246, .8)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 20px 38px -28px rgba(14, 35, 29, .22) !important;
  transition:
    top .68s cubic-bezier(.16, 1, .3, 1),
    height .68s cubic-bezier(.16, 1, .3, 1),
    transform .68s cubic-bezier(.16, 1, .3, 1),
    background .5s ease,
    box-shadow .5s ease !important;
}

.stack-home #solutions .solh:not(:hover):not(:focus-visible):not(.is-active) .solh-head {
  height: 100%;
  padding: 0 clamp(22px, 2vw, 30px);
}

.stack-home #solutions .solh:hover .solh-body,
.stack-home #solutions .solh:focus-visible .solh-body,
.stack-home #solutions .solh.is-active .solh-body {
  top: var(--solh-inset) !important;
  bottom: var(--solh-inset) !important;
  height: calc(100% - var(--solh-inset) - var(--solh-inset)) !important;
  padding: 20px 30px 26px !important;
  transform: translateY(-1px);
}

/* 面板内容按信息顺序出现，切换时不会突兀地整块跳出。 */
.stack-home #solutions .solh-reveal {
  max-height: 0 !important;
  opacity: 0;
  transform: translateY(12px);
  transition:
    max-height .68s cubic-bezier(.16, 1, .3, 1),
    opacity .34s ease,
    transform .58s cubic-bezier(.16, 1, .3, 1) !important;
}

.stack-home #solutions .solh:hover .solh-reveal,
.stack-home #solutions .solh:focus-visible .solh-reveal,
.stack-home #solutions .solh.is-active .solh-reveal {
  display: flex;
  max-height: 420px !important;
  opacity: 1;
  transform: translateY(0);
  margin-top: clamp(16px, 2.2vh, 24px) !important;
}

.stack-home #solutions .solh-reveal > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .34s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}

.stack-home #solutions .solh:hover .solh-reveal > *,
.stack-home #solutions .solh:focus-visible .solh-reveal > *,
.stack-home #solutions .solh.is-active .solh-reveal > * {
  opacity: 1;
  transform: translateY(0);
}

.stack-home #solutions .solh:hover .solh-reveal > :nth-child(1),
.stack-home #solutions .solh:focus-visible .solh-reveal > :nth-child(1),
.stack-home #solutions .solh.is-active .solh-reveal > :nth-child(1) { transition-delay: .08s; }
.stack-home #solutions .solh:hover .solh-reveal > :nth-child(2),
.stack-home #solutions .solh:focus-visible .solh-reveal > :nth-child(2),
.stack-home #solutions .solh.is-active .solh-reveal > :nth-child(2) { transition-delay: .14s; }
.stack-home #solutions .solh:hover .solh-reveal > :nth-child(4),
.stack-home #solutions .solh:focus-visible .solh-reveal > :nth-child(4),
.stack-home #solutions .solh.is-active .solh-reveal > :nth-child(4) { transition-delay: .2s; }

@media (max-width: 700px) {
  .stack-home #solutions .solh {
    --solh-inset: 10px;
    --solh-peek: 92px;
  }

  .stack-home #solutions .solh:not(:hover):not(:focus-visible):not(.is-active) .solh-head {
    padding: 0 20px;
  }

  .stack-home #solutions .solh:hover .solh-body,
  .stack-home #solutions .solh:focus-visible .solh-body,
  .stack-home #solutions .solh.is-active .solh-body {
    padding: 18px 22px 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-home #solutions .solh,
  .stack-home #solutions .solh-img img,
  .stack-home #solutions .solh-body,
  .stack-home #solutions .solh-reveal,
  .stack-home #solutions .solh-reveal > * {
    transition: none !important;
  }
}