/* ============================================================
   下载中心 - 列表样式
   布局：每行 2 列（横向卡片：左图标 + 右内容）
   说明：复用站点 CSS 变量与设计规范
   ============================================================ */

/* 外部节区间距 */
.page .download-s2 {
  padding-top: 0.4rem;
  padding-bottom: 0.8rem;
}

/* 下载列表网格：每行 2 列 */
.page .download-s2 .download-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-column-gap: 0.3rem;
     -moz-column-gap: 0.3rem;
          column-gap: 0.3rem;
  row-gap: 0.3rem;
  margin-top: 0.32rem;
}

/* 下载卡片：横向布局（图标 + 内容） */
.page .download-s2 .download-grid .download-item {
  display: -moz-box;
  display: flex;
  -moz-box-align: center;
       align-items: center;
  gap: 0.28rem;
  position: relative;
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: var(--all-border-radius);
  padding: 0.34rem 0.36rem;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  overflow: hidden;
  text-decoration: none;
}

/* 左侧文件夹图标 */
.page .download-s2 .download-grid .download-item .download-icon {
  -moz-box-flex: 0;
       flex: 0 0 auto;
  width: max(0.9rem, 72px);
  height: max(0.9rem, 72px);
  border-radius: max(0.2rem, 14px);
  background-color: #e6f4f6;
  display: -moz-box;
  display: flex;
  -moz-box-align: center;
       align-items: center;
  -moz-box-pack: center;
       justify-content: center;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.page .download-s2 .download-grid .download-item .download-icon i {
  font-size: var(--font-size-36);
  color: var(--primary-color);
  -moz-transition: color 0.4s;
  transition: color 0.4s;
}

/* 右侧内容区 */
.page .download-s2 .download-grid .download-item .download-content {
  -moz-box-flex: 1;
       flex: 1;
  min-width: 0;
  display: -moz-box;
  display: flex;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
       flex-direction: column;
  gap: 0.18rem;
}

/* 标题行 */
.page .download-s2 .download-grid .download-item .download-content .download-title {
  display: -moz-box;
  display: flex;
  -moz-box-align: center;
       align-items: center;
}

.page .download-s2 .download-grid .download-item .download-content .download-title h3 {
  -moz-box-flex: 1;
       flex: 1;
  min-width: 0;
  font-size: var(--font-size-22);
  font-weight: bold;
  color: #222;
  line-height: 1.4;
  -moz-transition: color 0.4s;
  transition: color 0.4s;
}

/* 底部行：日期 + 文件大小（左） + 下载按钮（右） */
.page .download-s2 .download-grid .download-item .download-foot {
  display: -moz-box;
  display: flex;
  -moz-box-align: center;
       align-items: center;
  -moz-box-pack: justify;
       justify-content: space-between;
  gap: 0.2rem;
}

/* 元信息组：日期 + 文件大小 */
.page .download-s2 .download-grid .download-item .download-foot .download-meta {
  display: -moz-box;
  display: flex;
  -moz-box-align: center;
       align-items: center;
  flex-wrap: wrap;
  gap: 0.16rem;
  min-width: 0;
}

/* 上传日期 */
.page .download-s2 .download-grid .download-item .download-foot .download-date {
  display: -moz-inline-box;
  display: inline-flex;
  -moz-box-align: center;
       align-items: center;
  gap: 0.06rem;
  font-size: var(--font-size-16);
  color: #999;
  white-space: nowrap;
}

.page .download-s2 .download-grid .download-item .download-foot .download-date i {
  font-size: var(--font-size-18);
}

/* 文件大小 */
.page .download-s2 .download-grid .download-item .download-foot .download-size {
  font-size: var(--font-size-16);
  color: #999;
  white-space: nowrap;
}

/* 下载按钮（无背景，仅图标） */
.page .download-s2 .download-grid .download-item .download-foot .download-btn {
  display: -moz-inline-box;
  display: inline-flex;
  -moz-box-align: center;
       align-items: center;
  -moz-box-pack: center;
       justify-content: center;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.page .download-s2 .download-grid .download-item .download-foot .download-btn i {
  font-size: var(--font-size-26);
  color: #666;
  -moz-transition: color 0.4s;
  transition: color 0.4s;
}

/* 悬停效果：浅蓝高亮，所有文字与图标统一为同一主题色 */
.page .download-s2 .download-grid .download-item:hover {
  border-color: var(--primary-color);
  background-color: #eaf8fa;
  box-shadow: 0 6px 20px rgba(102, 209, 218, 0.15);
}

.page .download-s2 .download-grid .download-item:hover .download-icon {
  background-color: var(--primary-color);
}

.page .download-s2 .download-grid .download-item:hover .download-icon i {
  color: #fff;
}

/* 标题、日期、文件大小、下载图标统一为主题色 */
.page .download-s2 .download-grid .download-item:hover .download-content .download-title h3,
.page .download-s2 .download-grid .download-item:hover .download-foot .download-date,
.page .download-s2 .download-grid .download-item:hover .download-foot .download-date i,
.page .download-s2 .download-grid .download-item:hover .download-foot .download-size,
.page .download-s2 .download-grid .download-item:hover .download-foot .download-btn i {
  color: var(--primary-color);
}

/* ============================================================
   响应式布局
   ============================================================ */
/* 平板：每行 2 列保持，加小内边距 */
@media screen and (max-width: 879px) {
  .page .download-s2 .download-grid .download-item {
    padding: 0.28rem 0.3rem;
    gap: 0.22rem;
  }
  .page .download-s2 .download-grid .download-item .download-icon {
    width: max(0.74rem, 60px);
    height: max(0.74rem, 60px);
  }
}

/* 手机：每行 1 列 */
@media screen and (max-width: 600px) {
  .page .download-s2 .download-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .page .download-s2 .download-grid .download-item {
    padding: 0.26rem 0.28rem;
    gap: 0.2rem;
  }
  .page .download-s2 .download-grid .download-item .download-icon {
    width: max(0.66rem, 54px);
    height: max(0.66rem, 54px);
  }
  .page .download-s2 .download-grid .download-item .download-icon i {
    font-size: var(--font-size-28);
  }
}