/* 产品介绍"怎么用"—— 首页帮助页 与 个人中心 共用这一份
 *
 * ★为什么抽出来(07-27):原来这段样式在 projects.css 里,只有登录后能看到。
 * 但没注册的人才最需要看"这是什么、怎么用",所以首页也要放一份。
 * 样式各存一份必然改一处漏一处(本项目吃过这个亏,见 cases_data.js 的注释),
 * 所以 CSS 抽到这里、HTML 由 intro_view.js 生成,两个页面都引同一份。
 *
 * 依赖 app.css 的设计变量(--accent / --ink / --line …),必须在它之后引入。
 */

/* 首页那份要自己撑出留白;个人中心那份由 .pjs-intro 控制外框 */
.pjs-intro { padding: 40px 44px 80px; max-width: 900px; }
.intro-page { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; }
.intro-page .in-head h1 { margin: 0 0 6px; font-size: 27px; font-weight: 800; color: var(--ink); }
.intro-page .in-head > p { margin: 0; font-size: 14px; color: var(--text-dim); }

.in-lead {
  margin: 18px 0 8px; padding: 20px 24px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(111,102,230,.09), rgba(138,128,240,.04));
  border: 1px solid rgba(111,102,230,.18);
  /* 左边一道粗竖线,让这段"像一句开场白"而不是又一张卡 */
  border-left: 3px solid var(--accent);
}
.in-lead p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--text); }
.in-lead p + p { margin-top: 8px; }
.in-lead b { font-size: 16px; color: var(--ink); }

/* 一行 = 文字 + 图。.rev 把图挪到左边,读起来有节奏,不是三段一样的 */
.in-row {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 30px;
  align-items: center; margin-top: 34px;
}
.in-row.rev .in-txt { order: 2; }
.in-row.rev .in-img { order: 1; }
.in-txt h3 { margin: 9px 0 8px; font-size: 18px; font-weight: 800; color: var(--ink); }
.in-txt p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.8; color: var(--text); }
.in-txt p.in-dim { font-size: 12.5px; color: var(--text-faint); }
.in-step {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--accent-ink); background: var(--accent-soft);
}

.in-img {
  position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 20px 44px -24px rgba(30,26,70,.34);
  /* 轻微歪一点点。正正方方三张摞下来太像产品截图墙 */
  transform: rotate(-.5deg);
  transition: transform .25s;
}
.in-row.rev .in-img { transform: rotate(.6deg); }
.in-img:hover, .in-row.rev .in-img:hover { transform: rotate(0deg) scale(1.012); }
.in-img img { display: block; width: 100%; height: auto; }
.ig-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 12px 8px; font-size: 11.5px; color: #fff;
  background: linear-gradient(transparent, rgba(18,15,40,.72));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 界面截图的说明条。
   ★成品图那种压在图上的黑色渐变条不能用在界面截图上:
     界面底部本来就有按钮和小字,盖上去等于把界面切了一半(自测当场看到)。
     所以 .shot 的条改成【图下方独立一行】,不覆盖。 */
.in-img.shot { background: var(--bg-2); }
.in-img.shot .ig-cap {
  position: static; color: var(--text-dim); background: rgba(255,255,255,.72);
  border-top: 1px solid var(--line); padding: 8px 12px;
  display: block; white-space: normal;
}

.in-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line);
}
.in-fact {
  display: grid; gap: 5px; align-content: start;
  padding: 16px 16px 18px; border-radius: 13px;
  background: rgba(255,255,255,.66); border: 1px solid var(--line);
}
.in-fact .iconify { font-size: 21px; color: var(--accent); }
.in-fact b { font-size: 13.5px; color: var(--ink); }
.in-fact span:not(.iconify) { font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }

/* 成品图一排:三步讲操作,这排讲"能出成什么样" */
.in-shelf { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.in-shelf h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--ink); }
.in-shelf > p { margin: 0 0 14px; font-size: 12.5px; color: var(--text-dim); }
/* 3 列 × 3 张 = 填满,不留空格(纪律:张数必须是列数的整数倍) */
.in-shelf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.in-sh {
  position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 12px 30px -18px rgba(30,26,70,.3);
  transition: transform .18s, box-shadow .18s;
}
.in-sh:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(30,26,70,.4); }
.in-sh img { display: block; width: 100%; height: 132px; object-fit: cover; }

.in-qa { margin-top: 40px; }
.in-qa h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--ink); }
.in-q {
  border-bottom: 1px solid var(--line); padding: 2px 0;
}
.in-q summary {
  cursor: pointer; padding: 13px 26px 13px 2px; position: relative;
  font-size: 13.5px; font-weight: 700; color: var(--ink); list-style: none;
}
.in-q summary::-webkit-details-marker { display: none; }
.in-q summary::after {
  content: "+"; position: absolute; right: 4px; top: 11px;
  font-size: 17px; font-weight: 400; color: var(--text-faint);
  transition: transform .2s;
}
.in-q[open] summary::after { content: "−"; }
.in-q summary:hover { color: var(--accent); }
.in-q p {
  margin: 0 0 14px; padding-right: 26px;
  font-size: 13px; line-height: 1.85; color: var(--text-dim);
}

.in-cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 40px; padding: 22px 24px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(111,102,230,.1), rgba(138,128,240,.04));
  border: 1px solid rgba(111,102,230,.2);
}
.in-cta button, .in-cta a.in-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 13px 24px; border: none; border-radius: 12px; text-decoration: none;
  font-family: var(--font); font-size: 14.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 28px -14px rgba(111,102,230,.66);
  transition: transform .16s;
}
.in-cta button:hover, .in-cta a.in-btn:hover { transform: translateY(-2px); }
.in-cta > span { font-size: 12.5px; color: var(--text-dim); }
/* 次要链接(已登录时的"看看我的项目"):不能和主按钮抢 */
.in-cta a.in-lnk {
  font-size: 13px; font-weight: 700; color: var(--accent-ink); text-decoration: none;
  border-bottom: 1px solid rgba(111,102,230,.4);
}

@media (max-width: 900px) {
  .in-row, .in-row.rev { grid-template-columns: 1fr; gap: 16px; }
  .in-row.rev .in-txt, .in-row.rev .in-img { order: 0; }
  .in-facts, .in-shelf-grid { grid-template-columns: 1fr; }
  .pjs-intro { padding-left: 22px; padding-right: 22px; }
}

/* 真机档(560px 以下)—— 08-03 加
   排版没问题:900 档已经改成单列,375 屏上实测没有横向溢出、没有夹窄、
   浮层说明也没被截(逐条量过 scrollWidth 都等于 clientWidth)。
   只有字号偏小 —— 这一页是【教人怎么用】的,字看不清就等于没写。
   ★不动 .in-step(「第 1 步」那个小圆角标签):它是标记不是正文,
     11.5px 配 59px 的胶囊正好,放大反而撑破。 */
@media (max-width: 560px) {
  .in-lead p { font-size: 14.5px; line-height: 1.8; }
  .in-txt h3 { font-size: 17px; }
  .in-txt p { font-size: 14px; line-height: 1.75; }
  .in-txt p.in-dim { font-size: 13px; line-height: 1.7; }
  /* 图上那行白字压在渐变上,比正文更难认,给到 12.5 */
  .ig-cap { font-size: 12.5px; padding: 18px 12px 9px; }

  /* 「已经有账号」实测 22×65 —— 它是文字链(带下边框那种),不是按钮,
     默认没有 padding。手指点 22px 高的目标点不准。
     ★选择器必须带 .in-cta 前缀:原规则是 .in-cta a.in-lnk(优先级 0,2,1),
       这里只写 .in-lnk 压不过去。同首页 .eyebrow 那个坑。
     用上下 padding 撑到 44,再用等值负 margin 抵掉,视觉位置一点不变。
     ★同时要把 border-bottom 换成 text-decoration:下边框画在【盒子】底边,
       加了 11px 下内边距后那道线会掉到文字下面 11px,看着像脱开了;
       text-decoration 画在【文字基线】上,padding 加多少都不动。 */
  .in-cta a.in-lnk {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 11px 2px; margin: -11px 0;
    border-bottom: none;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(111,102,230,.4);
  }
  .pjs-intro { padding-left: 16px; padding-right: 16px; }
}