/* ============================================================
   Product Page V2 — 共享页面层（Phase 11B-A 建立，Phase 12A 抽出）

   Product Page wraps the Workspace. It does not redesign the Workspace.
   本文件只负责 Workspace **外面**的页面构成：Hero、正文容器、格式 chips、卡片、步骤、FAQ。
   Image Converter 与 PDF Workspace 两个 Product 页共用它；各自的 Workspace 外壳规则与
   产品专属模块在 image-product-page.css / pdf-product-page.css。
   - 不写任何 .yqw- / .iw- / .pw 组件选择器（Workspace 视觉归 workspace-ui.css 与各自的 workbench 样式）
   - 只在 Product 页加载（generator 的 productHead 占位符），Intent 页从不引用
   - 颜色 / 圆角 / 字体一律来自 tokens.css
   ⚠️ 12A 抽取时逐条原样搬运（顺序不变），Image Product 页像素 0 漂移有逐视口截图比对。

   对齐关系：内容宽度上限与左右内边距跟 .tool-shell + .yqw-surface 同一组数值，
   所以 Hero、Workspace 与下方每个模块的左右边缘落在同一条线上（g55 / g59 实测断言）。
   ============================================================ */

:root {
  /* 与模板里 .tool-shell 的 padding-inline 同值；≤640 那一档同样同值 */
  --pp-inline: clamp(68px, calc(4vw + 40px), 96px);
  /* 与 workspace-ui.css 的 --yqw-max-width 同值 */
  --pp-max: 1200px;
  --pp-section-gap: 56px;
  --pp-card-pad: 16px 18px;
}
@media (max-width: 640px) {
  :root {
    --pp-inline: clamp(20px, 5vw, 28px);
    --pp-section-gap: 40px;
  }
}

/* ---------- 共享容器 ---------- */
.pp-wrap,
html.is-standalone main[data-product-page] {
  width: 100%;
  max-width: calc(var(--pp-max) + 2 * var(--pp-inline));
  margin-inline: auto;
  padding-inline: var(--pp-inline);
}

/* ---------- 1. Hero ---------- */
/* 11B-A spacing refinement（Founder 视觉判断）：H1 → 一句说明 → trust 三层各占一行，
   层级之间留足呼吸，trust 退成辅助信息。不靠缩小字体换空间。 */
html.is-standalone .pp-hero { display: block; }
.pp-hero { padding-top: 40px; }
.pp-h1 {
  font-size: clamp(28px, 1.2vw + 14px, 32px);
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--yq-text-1);
}
.pp-lede {
  margin-top: 12px;
  /* 不人为限宽：用 Hero 的整条内容宽度，空间不够时自然换行（Founder 决定，禁止 nowrap） */
  font-size: 15px;
  line-height: 1.6;
  color: var(--yq-text-2);
}
.pp-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--yq-text-3);
}
.pp-trust li { display: inline-flex; align-items: center; gap: 7px; }
.pp-trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yq-success);
}

@media (max-width: 640px) {
  .pp-hero { padding-top: 28px; }
  .pp-lede { margin-top: 10px; }
  .pp-trust { margin-top: 14px; }
}

/* 页脚跟正文同一条边（tool-landing 的 760 居中在这一页会与 1200 的模块错位） */
html.is-standalone main[data-product-page] ~ .tl-footer {
  max-width: calc(var(--pp-max) + 2 * var(--pp-inline));
  padding-inline: var(--pp-inline);
}

/* ---------- 正文容器：覆盖 .tl-content 的 760 长文排版 ---------- */
/* 顶部只补一小段：Workspace 外壳自己的 padding-bottom 已经留出了一大半间距 */
html.is-standalone main[data-product-page] {
  padding-top: 20px;
  padding-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
}
main[data-product-page] section + section { margin-top: var(--pp-section-gap); }
main[data-product-page] h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 16px;
}
main[data-product-page] ul,
main[data-product-page] ol { list-style: none; padding-left: 0; margin: 0; }
main[data-product-page] li { margin-bottom: 0; }
main[data-product-page] strong { color: var(--yq-text-1); }
/* ⚠️ 必须挂在 main[data-product-page] 下：.tl-content p（0,1,1）比单个 class 更特异，
   只写 .pp-section-note 时 margin 会被它盖成 0 0 10px，说明行贴着卡片 */
main[data-product-page] .pp-section-lede { margin: -8px 0 16px; color: var(--yq-text-2); }
main[data-product-page] .pp-section-note { margin: 14px 0 0; font-size: 13px; color: var(--yq-text-3); }

/* ---------- 3. Supported formats ---------- */
.pp-format-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pp-format-group {
  padding: var(--pp-card-pad);
  background: var(--yq-bg-page);
  border: 1px solid var(--yq-border);
  border-radius: var(--yq-r-card);
}
main[data-product-page] .pp-format-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yq-text-3);
}
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 静态信息，不是控件：没有边框、没有 hover、没有指针 */
.pp-chip {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--yq-bg-quiet);
  color: var(--yq-text-1);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
main[data-product-page] .pp-note { margin: 12px 0 0; font-size: 13px; color: var(--yq-text-3); }

/* ---------- 卡片网格（Why / Popular / Guide / More） ---------- */
.pp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pp-card {
  padding: var(--pp-card-pad);
  background: var(--yq-bg-page);
  border: 1px solid var(--yq-border);
  border-radius: var(--yq-r-card);
  color: var(--yq-text-2);
  font-size: 13px;
  line-height: 1.55;
}
.pp-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

/* 整张卡可点：没有默认蓝色下划线，hover 只动边框 */
.pp-cards--links li { display: flex; }
.pp-link-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: var(--pp-card-pad);
  background: var(--yq-bg-page);
  border: 1px solid var(--yq-border);
  border-radius: var(--yq-r-card);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--yq-dur) var(--yq-ease), box-shadow var(--yq-dur) var(--yq-ease);
}
.pp-link-card:hover { border-color: var(--yq-border-strong); box-shadow: var(--yq-shadow-raise); }
.pp-link-card:focus-visible { outline: 2px solid var(--yq-focus-ring); outline-offset: 2px; }
.pp-link-title { font-size: 14px; font-weight: 600; color: var(--yq-text-1); }
.pp-link-desc { font-size: 13px; line-height: 1.5; color: var(--yq-text-3); }

/* ---------- 6. How it works ---------- */
.pp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  counter-reset: pp-step;
}
.pp-step {
  position: relative;
  padding: var(--pp-card-pad);
  padding-left: 54px;
  background: var(--yq-bg-page);
  border: 1px solid var(--yq-border);
  border-radius: var(--yq-r-card);
  color: var(--yq-text-2);
  font-size: 13px;
  line-height: 1.55;
  counter-increment: pp-step;
}
.pp-step::before {
  content: counter(pp-step);
  position: absolute;
  left: 18px;
  top: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yq-primary-weak);
  color: var(--yq-primary);
  font-size: 12px;
  font-weight: 600;
}
.pp-step strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; }

/* ---------- 8. FAQ（原生 details：一次最多展开一条由 name 属性保证） ---------- */
.pp-faq {
  background: var(--yq-bg-page);
  border: 1px solid var(--yq-border);
  border-radius: var(--yq-r-card);
  overflow: hidden;
}
.pp-faq-item + .pp-faq-item { border-top: 1px solid var(--yq-border); }
.pp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--yq-text-1);
  cursor: pointer;
  list-style: none;
}
.pp-faq-q::-webkit-details-marker { display: none; }
.pp-faq-q::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid var(--yq-text-3);
  border-bottom: 1.5px solid var(--yq-text-3);
  transform: rotate(45deg);
  transition: transform var(--yq-dur) var(--yq-ease);
}
.pp-faq-item[open] > .pp-faq-q::after { transform: rotate(-135deg); margin-top: 4px; }
.pp-faq-q:hover { background: var(--yq-bg-quiet); }
.pp-faq-q:focus-visible { outline: 2px solid var(--yq-focus-ring); outline-offset: -2px; }
.pp-faq-a { padding: 0 18px 14px; color: var(--yq-text-2); font-size: 14px; line-height: 1.65; }
main[data-product-page] .pp-faq-a p { margin: 0; }
main[data-product-page] .pp-faq-a p + p { margin-top: 8px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1023px) {
  .pp-cards--links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pp-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pp-format-groups,
  .pp-cards,
  .pp-cards--links { grid-template-columns: minmax(0, 1fr); }
  main[data-product-page] h2 { font-size: 18px; }
}