/* web/download/download.css
   下载中心 - 样式（.download__ 前缀，令牌驱动）

   职责：组件根容器只管内部布局。限宽/居中/占多大区域由宿主层 Layer 2 的
   .layer-2-content 负责；这里做标题区 + 产品列表（一行一个：图 | 文 | 按钮）。
   颜色/字号/间距全走 var(--bp-*)，不写死字面量。 */

.download {
  display: flex;
  flex-direction: column;
  /* 页头与产品列表拉开一档（48px），让标题区自成一块，不跟列表粘连 */
  gap: var(--bp-space-7);
  color: var(--bp-color-text);
}

/* ─── 页头组：标题横幅 + 下方分类标签 ─── */
.download__masthead {
  display: flex;
  flex-direction: column;
  /* 横幅与分类标签拉开一档（24px），两块各自呼吸 */
  gap: var(--bp-space-5);
}

/* 标题横幅：给标题一块自己的底色，让它从页面里"跳"出来成为页首
   淡橙渐变 + 左侧主色竖条（工程图标题栏的栏线感），不喧宾夺主 */
.download__head {
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-3);
  padding: var(--bp-space-5) var(--bp-space-6);
  border-radius: var(--bp-radius-lg);
  border-left: 4px solid var(--bp-color-primary);
  background: linear-gradient(120deg,
      var(--bp-color-primary-tint) 0%,
      var(--bp-color-bg-warm-soft) 100%);
}

/* 图标 + 大标题 横排 */
.download__heading-row {
  display: flex;
  align-items: center;
  gap: var(--bp-space-3);
}

/* 页头图标：主色实心方块 + 白色描线图标，压住标题的视觉分量 */
.download__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--bp-radius-md);
  background: var(--bp-color-primary);
  color: var(--bp-color-on-primary);
  box-shadow: var(--bp-shadow-sm);
}

.download__heading {
  margin: 0;
  font-size: var(--bp-font-2xl);
  font-weight: var(--bp-font-extrabold);
  line-height: var(--bp-leading-tight);
  letter-spacing: 0.02em;
  color: var(--bp-color-text);
}

/* 副标题：上边一条虚线与标题分隔（工程图虚线线型，轻但有界） */
.download__sub {
  margin: 0;
  padding-top: var(--bp-space-3);
  border-top: 1px dashed var(--bp-color-border-strong);
  font-size: var(--bp-font-sm);
  line-height: var(--bp-leading-relaxed);
  color: var(--bp-color-text-muted);
}

/* ─── 分类筛选标签一排（全部 | 软件 | 插件 | 模型 | 资料） ─── */
.download__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-space-2);
}

.download__tab {
  padding: var(--bp-space-1) var(--bp-space-4);
  border: 1px solid var(--bp-color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--bp-color-text-muted);
  font-family: inherit;
  font-size: var(--bp-font-sm);
  font-weight: var(--bp-font-medium);
  cursor: pointer;
  transition: background var(--bp-dur-fast) var(--bp-ease),
    border-color var(--bp-dur-fast) var(--bp-ease),
    color var(--bp-dur-fast) var(--bp-ease);
}

.download__tab:hover {
  border-color: var(--bp-color-border-strong);
  color: var(--bp-color-text);
}

/* 选中态：主色实心胶囊 */
.download__tab--active {
  background: var(--bp-color-primary);
  border-color: var(--bp-color-primary);
  color: var(--bp-color-on-primary);
}

.download__tab--active:hover {
  background: var(--bp-color-primary-strong);
  border-color: var(--bp-color-primary-strong);
  color: var(--bp-color-on-primary);
}

/* ─── 产品列表（一行一个，纵向堆叠） ─── */
.download__list {
  display: flex;
  flex-direction: column;
  /* 行与行拉开一档（24px），产品各自成块不粘连 */
  gap: var(--bp-space-5);
}

/* ─── 单行产品：图 | 文 | 按钮 三区横排 ─── */
.download__row {
  display: flex;
  align-items: center;
  gap: var(--bp-space-5);
  padding: var(--bp-space-5);
  border: 1px solid var(--bp-color-border);
  border-radius: var(--bp-radius-md);
  background: var(--bp-color-bg-elevated);
  transition: border-color var(--bp-dur-md) var(--bp-ease),
    box-shadow var(--bp-dur-md) var(--bp-ease);
}

.download__row:hover {
  border-color: var(--bp-color-border-strong);
  box-shadow: var(--bp-shadow-md);
}

/* 封面图（左）：固定方形小图，等比裁切 */
.download__thumb {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: var(--bp-radius-sm);
  background: var(--bp-color-bg-warm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.download__thumb-empty {
  font-size: var(--bp-font-xs);
  color: var(--bp-color-text-faint);
  text-align: center;
}

/* 封面图加载失败兜底：JS 在 img error 时移除裂图并给容器加此态，
   由 ::after 接管占位文案——路径写错/文件被删时页面不裂图 */
.download__thumb--broken::after {
  content: '暂无封面';
  font-size: var(--bp-font-xs);
  color: var(--bp-color-text-faint);
  text-align: center;
}

/* 信息区（中）：名字 + 一段介绍，占满剩余宽度 */
.download__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-2);
}

/* 标题行：标题 + 文件格式标签 横排 */
.download__title-row {
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  min-width: 0;
}

.download__title {
  margin: 0;
  font-size: var(--bp-font-md);
  font-weight: var(--bp-font-semibold);
  color: var(--bp-color-text);
  /* 产品名限一行，超长截断省略号——保证各行标题基线齐平 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文件格式小标签：让访客一眼看到是什么格式（.exe/.stl/.pdf…）。
   描边胶囊，主色文字，不喧宾夺主；随标题同行不折行 */
.download__format {
  flex-shrink: 0;
  padding: 1px var(--bp-space-2);
  border: 1px solid var(--bp-color-border-strong);
  border-radius: 999px;
  font-size: var(--bp-font-2xs);
  font-weight: var(--bp-font-semibold);
  letter-spacing: 0.03em;
  color: var(--bp-color-primary-deep);
  background: var(--bp-color-primary-tint);
  white-space: nowrap;
}

.download__desc {
  margin: 0;
  font-size: var(--bp-font-xs);
  line-height: var(--bp-leading-relaxed);
  color: var(--bp-color-text-muted);
  /* 介绍句限两行（items.js 里各产品长短不一，截断后行高才整齐） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 操作区（右）：下载按钮，主色胶囊，不显示价格 */
.download__action {
  flex-shrink: 0;
  padding: var(--bp-space-2) var(--bp-space-5);
  border-radius: var(--bp-radius-md);
  background: var(--bp-color-primary);
  color: var(--bp-color-on-primary);
  font-size: var(--bp-font-sm);
  font-weight: var(--bp-font-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--bp-dur-fast) var(--bp-ease);
}

.download__action:hover {
  background: var(--bp-color-primary-strong);
}

/* ─── 详情展开 ───
   有 detail 的产品：信息区整块可点击展开一段富文本介绍。
   可点区给"C"手型提示；右侧"详情/收起"小标签作为视觉线索。 */

/* 信息区可点击态：整块可点（hover 才有手型，键盘用户另有入口） */
.download__body--clickable {
  cursor: pointer;
}

/* "详情/收起"小标签：标题行末尾紧跟格式标签的入口，提示可点开看详情。
   它是 button，需重置浏览器默认样式（背景/边框/字号），与标题行同基线。 */
.download__detail-toggle {
  flex-shrink: 0;
  margin: 0;
  padding: 1px var(--bp-space-2);
  border: 1px solid var(--bp-color-primary);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: var(--bp-font-2xs);
  font-weight: var(--bp-font-semibold);
  line-height: 1.4;
  color: var(--bp-color-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bp-dur-fast) var(--bp-ease),
    color var(--bp-dur-fast) var(--bp-ease);
}

.download__detail-toggle:hover {
  background: var(--bp-color-primary-tint);
}

/* 展开的详情区：贴在产品行下方，占满整行宽（三区横排之外另起一行） */
.download__row--expanded {
  flex-wrap: wrap;
}

.download__detail {
  flex-basis: 100%;
  margin-top: var(--bp-space-4);
  padding: var(--bp-space-5);
  border-top: 1px dashed var(--bp-color-border-strong);
  background: var(--bp-color-bg-warm-soft);
  border-radius: var(--bp-radius-sm);
}

/* 详情富文本排版（Markdown 渲染结果）：
   段落/标题/列表/引用/加粗都给出排版，别挤在一起。 */
.download__detail-content {
  font-size: var(--bp-font-sm);
  line-height: var(--bp-leading-relaxed);
  color: var(--bp-color-text);
  word-break: break-word;
}

.download__detail-content> :first-child {
  margin-top: 0;
}

.download__detail-content> :last-child {
  margin-bottom: 0;
}

.download__detail-content p {
  margin: 0 0 var(--bp-space-3);
}

.download__detail-content h1,
.download__detail-content h2,
.download__detail-content h3 {
  margin: var(--bp-space-5) 0 var(--bp-space-2);
  font-size: var(--bp-font-md);
  font-weight: var(--bp-font-semibold);
  color: var(--bp-color-text-strong);
}

.download__detail-content ul,
.download__detail-content ol {
  margin: 0 0 var(--bp-space-3);
  padding-left: var(--bp-space-5);
}

.download__detail-content li {
  margin: var(--bp-space-1) 0;
}

.download__detail-content strong {
  font-weight: var(--bp-font-bold);
  color: var(--bp-color-text-strong);
}

/* 引用块：左侧主色竖线 + 弱底（提示/补充说明用） */
.download__detail-content blockquote {
  margin: var(--bp-space-4) 0;
  padding: var(--bp-space-3) var(--bp-space-4);
  border-left: 3px solid var(--bp-color-primary);
  background: var(--bp-color-bg-warm);
  color: var(--bp-color-text-muted);
  border-radius: 0 var(--bp-radius-sm) var(--bp-radius-sm) 0;
}

.download__detail-content blockquote p {
  margin: 0;
}

/* 手机端详情：字号略降，收窄内边距，避免撑破窄屏 */
#stage[data-breakpoint="mobile"] .download__detail {
  margin-top: var(--bp-space-3);
  padding: var(--bp-space-4);
}

#stage[data-breakpoint="mobile"] .download__detail-content {
  font-size: var(--bp-font-xs);
}

/* ─── 断点降档 ───
   手机端：保持横向长条（图 | 文 | 按钮一行，同电脑），只收小尺寸——
   旧版改上下堆叠（全宽大图+文字+按钮竖向排），每条占一屏多、列表显得很长。
   手机窄屏下把封面收成 64px 小方块、文字收紧、按钮紧凑，一行仍放得下。 */
#stage[data-breakpoint="mobile"] .download__row {
  /* 保留横排，不换上下堆叠 */
  gap: var(--bp-space-3);
  padding: var(--bp-space-3);
}

#stage[data-breakpoint="mobile"] .download__thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  /* 不被缩小/换行 */
}

/* 文字区收窄：标题一行截断，描述最多两行，防撑高卡片 */
#stage[data-breakpoint="mobile"] .download__title {
  font-size: var(--bp-font-sm);
}

#stage[data-breakpoint="mobile"] .download__desc {
  font-size: var(--bp-font-xs);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 下载按钮：收小内边距、缩字号，避免挤占文字行 */
#stage[data-breakpoint="mobile"] .download__action {
  padding: var(--bp-space-2) var(--bp-space-3);
  font-size: var(--bp-font-xs);
}

#stage[data-breakpoint="mobile"] .download__heading {
  font-size: var(--bp-font-xl);
}

#stage[data-breakpoint="mobile"] .download__head {
  padding: var(--bp-space-4);
}

#stage[data-breakpoint="mobile"] .download__icon {
  width: 36px;
  height: 36px;
}

#stage[data-breakpoint="mobile"] .download__icon svg {
  width: 22px;
  height: 22px;
}