/* ============================================================
   方案页区块样式（/plan/*.html）
   ------------------------------------------------------------
   为什么单独一个文件：
     www 的 plan/*.html 全部是 29 字节的桩（内容就一句 include defaultabout），
     真正的版式与文案在源站后台数据库里（defaultabout.html 靠 $pagecontent
     的 advantage / problem / architecture / correlation / partner / more
     六段数据驱动）。v10 没有 pagecontent 这个数据源，所以这 4 个页面
     按 about.html / solution.html 的写法落地成静态模板，区块样式写在这里。

   区块来源与映射（左侧是源站类名，右侧是本文件）：
     .advantage-Content-list-item      → .p-adv__item     （优势三卡，居中）
     .problem-Content-row              → .p-problem       （左说明 + 右 2×2 卡片）
     .architecture-Content-row         → .p-arch          （左说明 + 右架构图）
     .more-Content-row                 → .p-more          （更多方案横条）
     .et-hero-tabs（吸顶锚点导航）      → .p-anchor

   为什么不用 product-blocks.css 里现成的块：
     .p-stage 是「52/64px 方图标 + 左对齐」的产品特性格，而方案页的优势图标
     是 292×184 的宽幅插画（1.59:1），塞进方盒只剩一坨颜色；且源站是居中
     排版。版式差得太远，硬套不如另写一个 .p-adv。
     .p-scene 是「左文右图、白底」的场景块，架构区块在源站是一整块浅蓝底
     面板（文字和图都在这块面板里），底与内边距都不同，也不复用。

   取值规则与 pages.css 一致：颜色 / 圆角 / 间距一律走 common/vars.css 的变量。
   加载顺序：页面在自己 include header 之后追加本文件，因此排在
   product-blocks.css 之后、但在 bridge.css 之前（bridge.css 在 header.html
   里加载，页面级 <link> 无法排到它后面）——所以本文件不要写任何需要压过
   bridge.css 的规则，也不要去覆盖 nav / footer。
   ============================================================ */

/* ============================================================
   1. 吸顶锚点导航
   ------------------------------------------------------------
   对应源站的 .et-hero-tabs。站点导航是 position:fixed（--navheight = 62px），
   所以吸顶起点要让它一截，否则会钻到导航下面。
   锚点落位补偿写在 .plan-main 的 [id] 上（scroll-margin-top），
   这样直接带 #hash 打开页面时也算得对，不依赖 JS 点击逻辑。
   ============================================================ */
/* 页头描述的孤字：这四页描述长短差得远（游戏页 36 字一行放得下，电商页
   47 字就会折出「求。」这种只剩两个字的一行）。行宽 816px 由 www 的
   .pagebanner-text 定死，改宽度会顶到右侧插画上，所以只调折行：
   text-wrap: balance 让浏览器把各行长度尽量拉平。不支持的浏览器按正常
   折行，版式不变（降级安全）。只挂 .plan-banner，不污染其它内页页头。 */
.plan-banner .pagebanner-description {
  text-wrap: balance;
}

/* 吸顶条高度只在 body 上定一次：.p-anchor 在 <main> 之前、.plan-main 在
   <main> 上，两者是兄弟节点，变量只能从共同祖先（body）继承下来。
   下面 .p-anchor__list / __link 的高度和锚点补偿都读它，改一处就够。 */
body {
  --plan-anchor-h: 56px;
}

.p-anchor {
  position: sticky;
  top: var(--navheight, 62px);
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid #edf0f5;
  /* 阴影往下投，进入滚动时才明显；不写死 box-shadow 会更像「一条分割线」 */
  box-shadow: 0 8px 14px -10px rgba(16, 36, 76, 0.28);
}

/* 窄屏放不下 5 项时横向滚动。
   ★ 滚动条挂在列表上而不是 .p-anchor 上：挂在 .p-anchor 会让整条白色底
     跟着一起滚，左侧圆角/边框在滚动后错位。 */
.p-anchor__list {
  display: flex;
  align-items: center;
  gap: 48px;
  height: var(--plan-anchor-h);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.p-anchor__list::-webkit-scrollbar {
  display: none;
}

.p-anchor__item {
  flex: 0 0 auto;
}

.p-anchor__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--plan-anchor-h);
  font-size: 15px;
  line-height: 1;
  color: var(--txtcl);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease-out;
}

.p-anchor__link:hover {
  color: var(--Original);
}

/* 当前所在区块：只换色 + 加粗，不做下划线（源站也没有）。
   加粗会引起 1px 以内的字宽变化，但因为是行内文字整体居中偏左的定宽项，
   看不出来；换行风险由 white-space:nowrap 挡住。 */
.p-anchor__item.is-active .p-anchor__link {
  color: var(--Original);
  font-weight: 600;
}

/* 锚点落位补偿：固定导航 + 吸顶条 + 12px 余量。
   与 plan-anchor.js 里点击跳转的算法取的是同一组值，两边不会打偏。 */
.plan-main [id] {
  scroll-margin-top: calc(var(--navheight, 62px) + var(--plan-anchor-h) + 12px);
}

/* ============================================================
   2. 我们的优势（.p-adv）
   ------------------------------------------------------------
   源站是「插图上 / 标题 / 描述」居中的三列卡片，1px 边框、无阴影。
   ============================================================ */
.p-adv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.p-adv__item {
  background: #fff;
  border: 1px solid #e6e9ec;
  border-radius: var(--radius);
  padding: 34px 30px 36px;
  text-align: center;
  transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

/* 悬浮规则与 .p-stage__item 保持一致，避免同一站点两种手感 */
.p-adv__item:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
  transform: translateY(-2px);
}

/* ★ 图标位给固定高度而不是固定宽高：这批插画是 292×184，
   按 110×70 摆进去正好，但用 max-width/max-height 双约束才能在
   换成别的比例的图时不把卡片撑变形。 */
.p-adv__icon {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.p-adv__icon img {
  max-width: 116px;
  max-height: 76px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.p-adv__title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 0 0 12px;
}

.p-adv__desc {
  font-size: 14px;
  line-height: 26px;
  color: var(--txtdesc);
  margin: 0;
}

/* ============================================================
   3. 面临的问题（.p-problem）
   ------------------------------------------------------------
   源站：一整块浅蓝渐变面板，头部左边标题+描述、右边两个按钮，
   下面 2×2 白卡。标签行（带勾选方块）夹在描述和卡片之间。
   ============================================================ */
.p-problem {
  background: linear-gradient(112deg, #f4f7fe 0%, #eff4fe 52%, #fbfcff 100%);
  border-radius: var(--radius);
  padding: 46px 48px 44px;
}

.p-problem__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.p-problem__title {
  font-size: 26px;
  line-height: 36px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 0;
}

.p-problem__desc {
  max-width: 780px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 26px;
  color: var(--txtdesc);
}

/* 按钮组跟着标题区顶部走（源站是与标题同一行、贴右）。
   加 padding-top 让它和 26px 标题的视觉中线对齐，而不是顶到最上面。 */
.p-problem__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  padding-top: 2px;
}

.p-problem__actions .p-btn {
  height: 42px;
  padding: 0 26px;
  font-size: 14px;
}

/* 标签行：蓝底圆角方块 + 白色对勾 + 深色文字。
   对勾用文字字形实现，避免为一个 10px 的图标再引一张图或 data URI。 */
.p-problem__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.p-problem__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--txtcl);
}

.p-problem__tag::before {
  content: "✓";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--Original);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
}

.p-problem__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  /* 与头部之间的距离挂在这里，而不是标签行的 margin-bottom：
     992 以下头部变成纵向排列、按钮组挪到标签行下面，标签的下边距
     就落在头部内部了，按钮和卡片会贴在一起。挂到 grid 上，
     两种排列下间距都是这一条。 */
  margin-top: 30px;
}

/* 卡片高度随内容，但同一行要等高 —— grid 的 stretch 默认就是等高，
   这里靠 flex 纵向排布把「标题恒在顶部」定住，描述长短不会挪标题。 */
.p-problem__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e9ec;
  border-radius: var(--radius);
  padding: 24px 28px 26px;
  transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

.p-problem__card:hover {
  border-color: var(--Original);
  box-shadow: 0 8px 18px 0 rgba(192, 205, 232, 0.28);
}

.p-problem__card h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 0 0 10px;
}

.p-problem__card p {
  font-size: 14px;
  line-height: 26px;
  color: var(--txtdesc);
  margin: 0;
}

/* ============================================================
   4. 解决方案架构（.p-arch）
   ------------------------------------------------------------
   源站：浅蓝面板，左侧「方案架构 + 描述 + 架构优势清单 + 服务咨询按钮」，
   右侧一张架构图（宽高比 1.2:1 ~ 1.6:1 不等，四种方案各不相同）。
   ============================================================ */
.p-arch {
  display: flex;
  align-items: center;
  gap: 48px;
  background: linear-gradient(135deg, #f6f9fe 0%, #eef3fd 100%);
  border-radius: var(--radius);
  padding: 48px;
}

.p-arch__body {
  flex: 0 0 400px;
  max-width: 400px;
}

.p-arch__title {
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 0;
}

.p-arch__desc {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 26px;
  color: var(--txtdesc);
}

.p-arch__sub {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 30px 0 16px;
}

/* 架构优势清单：与问题区的标签同一套勾选语言，但纵向排列 */
.p-arch__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-arch__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 22px;
  color: var(--txtcl);
}

.p-arch__list li + li {
  margin-top: 10px;
}

.p-arch__list li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 3px;
  background: var(--Original);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
}

.p-arch__btn {
  margin-top: 30px;
}

.p-arch__btn .p-btn {
  height: 42px;
  padding: 0 26px;
}

.p-arch__media {
  flex: 1 1 auto;
  min-width: 0;
}

/* 架构图本身是白底浅线稿，直接摆进面板会「白块套浅蓝底」显得很硬。
   加圆角 + 白底 + 一点内边距，让它看起来像贴在面板上的一张图。 */
.p-arch__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: #fff;
}

/* ============================================================
   5. 更多方案（.p-more）
   ------------------------------------------------------------
   源站是一条五格横带：浅底 + 白缝，每格插图上、标题下。
   ============================================================ */
/* ★ 用 flex 均分而不是 grid 定列数：
   源站这里固定 5 格，但本主题只移植了 4 个方案页（第 5 个「移动云」还是桩，
   见 plan/*.html 的说明）。写死 repeat(5,1fr) 会让第 5 列空在那儿，
   整条横带只铺到 4/5 宽、右边缺一块。flex: 1 1 0 是「有几个就均分几份」，
   以后补回第 5 个方案也不用再改 CSS。 */
.p-more {
  display: flex;
  gap: 12px;
}

.p-more__item {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  background: #f4f8fd;
  border-radius: var(--radius);
  padding: 30px 16px 26px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease-out, transform 0.3s ease-out;
}

.p-more__item:hover {
  background: #eef4ff;
  transform: translateY(-2px);
}

.p-more__icon {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.p-more__icon img {
  max-width: 96px;
  max-height: 62px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.p-more__title {
  font-size: 15px;
  line-height: 24px;
  color: var(--txtcl);
  margin: 0;
}

.p-more__item:hover .p-more__title {
  color: var(--Original);
}


/* ============================================================
   响应式：992 / 768 两档（与 product-blocks.css 的断点一致）
   ------------------------------------------------------------
   1200 那一档管的是壳层（导航 / 页脚），内容块用 992 / 768。
   ============================================================ */
@media screen and (max-width: 992px) {
  .p-anchor__list {
    gap: 28px;
  }

  .p-adv {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 优势是 3 个，两列会剩一个在第二行独占左半 —— 让它跨两列，
     比留个空洞好看 */
  .p-adv__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .p-problem {
    padding: 36px 32px 34px;
  }

  .p-problem__head {
    flex-direction: column;
    gap: 22px;
  }

  .p-problem__actions {
    padding-top: 0;
  }

  .p-arch {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 36px 32px;
  }

  .p-arch__body {
    flex: 1 1 auto;
    max-width: none;
  }

  .p-more {
    flex-wrap: wrap;
  }

  .p-more__item {
    flex: 0 0 calc((100% - 24px) / 3);
  }
}

@media screen and (max-width: 768px) {
  body {
    --plan-anchor-h: 48px;
  }

  .p-anchor__list {
    gap: 22px;
  }

  .p-anchor__link {
    font-size: 14px;
  }

  .p-anchor__item.is-active .p-anchor__link {
    font-weight: 500;
  }

  .p-adv {
    grid-template-columns: 1fr;
  }

  .p-adv__item:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .p-problem {
    padding: 28px 20px 26px;
  }

  .p-problem__title {
    font-size: 22px;
    line-height: 32px;
  }

  /* 单列：两个按钮并排仍然放得下（各 ~110px），不要折成上下 */
  .p-problem__grid {
    grid-template-columns: 1fr;
  }

  .p-arch {
    padding: 26px 20px;
  }

  .p-arch__title {
    font-size: 20px;
    line-height: 30px;
  }

  .p-arch__sub {
    font-size: 18px;
  }

  .p-more__item {
    flex: 0 0 calc((100% - 12px) / 2);
  }
}