/* ==========================================================================
   mingcui.cn 工具详情页专属样式（pages/tool_detail，仅该页模板引入）。
   设计 token 见 static/css/portal/base.css；工具列表卡（.tool-card）是共享
   组件，在 base.css。
   ========================================================================== */

/* 整页留白：这一页没有 page-head，之前面包屑直接贴到 sticky header 底部（间距 0） */
.tool-detail { padding-top: var(--s-xl); padding-bottom: var(--s-xxl); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--s-lg); font-size: 14px; color: var(--ink-faint); }
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { opacity: .5; }

.tool-hero { display: flex; gap: var(--s-lg); align-items: flex-start; padding-bottom: var(--s-lg); border-bottom: 1px solid var(--hairline); }
.tool-hero-icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sticker-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tool-hero-icon img { width: 100%; height: 100%; object-fit: contain; }
.tool-hero-icon[data-broken] img { display: none; }
.tool-hero-icon[data-broken] {
  background: var(--canvas-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / 32px no-repeat;
}
.tool-hero-info { min-width: 0; }
.tool-hero-name { font-size: clamp(26px, 3.5vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -.8px; color: var(--ink); }
.tool-hero-desc { margin-top: var(--s-xs); font-size: 16px; line-height: 1.6; color: var(--ink-secondary); }
.tool-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-md); }

.tool-section { margin-top: var(--s-xxl); }
.tool-section h2 {
  margin-bottom: var(--s-sm);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.25px;
  color: var(--ink);
}
.prose { font-size: 16px; line-height: 1.8; color: var(--ink-secondary); white-space: pre-wrap; }
.tool-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xl);
  margin-top: var(--s-xxl);
  padding: var(--s-md) var(--s-lg);
  background: var(--canvas-soft);
  border-radius: var(--r-md);
}
.fact { font-size: 14px; color: var(--ink-muted); }
.fact dt { font-size: 11px; font-weight: 600; letter-spacing: .125px; color: var(--ink-faint); margin-bottom: 2px; }
.fact dd { margin: 0; }
.fact a { color: var(--primary); }
.fact a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .tool-hero { flex-direction: column; gap: var(--s-md); }
  .tool-hero-icon { width: 56px; height: 56px; }
  .tool-facts { gap: var(--s-md); padding: var(--s-md); }
  .tool-detail { padding-top: var(--s-lg); padding-bottom: var(--s-xl); }
}