/* ==========================================================================
   p-solution.css — 解决方案页专属（几何数值取自 01_解决方案.psd，1rem = 100 设计 px）
   ========================================================================== */


/* ---- banner 标题：PSD 字号约 78 ---- */

/* ---- 内容区（239-1681，702 → 822 起，1977 止） ---- */
.p-sol .container { width: min(14.42rem, calc(100% - 0.4rem)); }
.p-sol { padding-block: 1.18rem 1.17rem; }

.p-sol__cols {
  display: flex;
  align-items: flex-start;
}
.p-sol__aside { flex: none; width: 5.7rem; }

/* 左栏：区块标题（822-867）+ 锚点列表（969/1036/1101，激活蓝 + 蓝三角） */
.p-sol__h {
  font-size: 0.46rem;
  line-height: 1;
  font-weight: 400;
  color: var(--c-ink);
}
.p-sol__tabs { margin-top: 0.98rem; }
.p-sol__tabs li + li { margin-top: 0.46rem; }
.p-sol__tabs a {
  position: relative;
  display: inline-block;
  font-size: 0.2rem;
  line-height: 0.2rem;
  color: var(--c-ink-2);
  transition: color 0.2s ease;
}
.p-sol__tabs a:hover { color: var(--c-primary); }
.p-sol__tabs a.is-active { color: var(--c-primary); }
.p-sol__tabs a.is-active::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  margin: -0.075rem 0 0 0.26rem;
  border-left: 0.11rem solid var(--c-primary);
  border-top: 0.075rem solid transparent;
  border-bottom: 0.075rem solid transparent;
}

/* 右栏：案例标题（830-858，蓝色双三角）+ 细线（886-890）+ 正文（923-1121） */
.p-sol__main {
  flex: 1;
  min-width: 0;
  padding-top: 0.06rem;
}
.p-sol__title {
  display: flex;
  align-items: center;
  font-size: 0.28rem;
  line-height: 1;
  font-weight: 400;
  color: var(--c-ink);
}
.p-sol__marks {
  flex: none;
  display: flex;
  gap: 0.03rem;
  margin-right: 0.29rem;
}
.p-sol__marks i {
  width: 0.1rem;
  height: 0.14rem;
  background: var(--c-primary);
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.p-sol__rule {
  margin-top: 0.28rem;
  height: 0.03rem;
  background: var(--c-line);
}
.p-sol__text {
  margin-top: 0.29rem;
  font-size: 0.17rem;
  line-height: 0.36rem;
  letter-spacing: -0.02em;
  color: var(--c-ink-2);
}
.p-sol__text p + p { margin-top: 0.36rem; }
.p-sol__text strong { color: var(--c-ink); font-weight: 600; }

/* 分段内容：切换时淡入上移 */
.p-sol__text[hidden] { display: none; }
.p-sol__text.is-anim {
  animation: solIn 0.36s cubic-bezier(0.22, 0.8, 0.28, 1) both;
}
@keyframes solIn {
  from { opacity: 0; transform: translateY(0.08rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .p-sol__text.is-anim { animation: none; }
}

/* 案例大图（1199-1861，1442×664）：悬停时缓慢推近 */
.p-sol__fig {
  margin-top: 0.56rem;
  overflow: hidden;
  border-radius: var(--radius-card);
}
.p-sol__fig img {
  width: 100%;
  height: auto;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.p-sol__fig:hover img { transform: scale(1.02); }

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
  .p-sol__aside { width: 3.4rem; }
}

@media (max-width: 768px) {
  .p-sol { padding-block: 0.6rem 0.8rem; }
  .p-sol__cols { flex-direction: column; gap: 0.5rem; }
  .p-sol__aside { width: 100%; }
  .p-sol__h { font-size: 0.36rem; }
  /* 手机左栏是一整行宽度，三个锚点竖排会占掉三行、把正文推得很远，
     改成和上面案例标签一致的一行排列；个别更长的标题允许换行兜底 */
  .p-sol__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.24rem 0.5rem;
    margin-top: 0.4rem;
  }
  .p-sol__tabs li + li { margin-top: 0; }
  .p-sol__tabs a { font-size: 0.26rem; line-height: 1.4; }
  /* 蓝色三角原来靠 left:100% + 0.26rem 外边距挂在文字右侧，
     一行排列时这段间距会把下一项推远，而且三角贴字太近，
     这里把三角摆到两项之间间隙的正中（间隙 0.5rem、三角 0.11rem → 左右各 0.19rem） */
  .p-sol__tabs a.is-active::after { margin-left: 0.19rem; margin-top: -0.06rem; }
  .p-sol__main { width: 100%; padding-top: 0; }
  .p-sol__title { font-size: 0.32rem; }
  .p-sol__text { font-size: 0.24rem; line-height: 1.875; }
}