/* ==========================================================================
   p-download.css — 关于我们 · 下载中心（几何数值取自 06_下载中心.psd）
   1rem = 100 设计 px；内容区 1442（x 239→1681）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. banner：PSD 已把压暗层合进图里，去掉 CSS 叠加遮罩；标题 80px，红块压在字后
   -------------------------------------------------------------------------- */
/* banner 压暗交给 sub.css 的统一遮罩（30.2% 纯黑），素材本身不含压暗与文字 *//* banner 标题块（80px + 红斜块压在字后）统一由 sub.css 定义，本页不再覆写 */

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   3. 内容区
   -------------------------------------------------------------------------- */
.dl {
  width: min(14.42rem, calc(100% - 0.4rem));
  margin-inline: auto;
  padding-block: 1.2rem 1.19rem;
}
.dl-title {
  position: relative;
  top: -0.02rem;
  font-size: 0.48rem;
  line-height: 0.48rem;
  font-weight: 500;
  text-align: center;
  color: var(--c-ink);
}

/* 列表：2 列 683，列距 77，行距 70，行高 111 + 底线 */
.dl-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.77rem;
  row-gap: 0.7rem;
  margin-top: 0.76rem;
}
.dl-item {
  position: relative;
  display: grid;
  grid-template-columns: 0.65rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.5rem;
  align-content: start;
  height: 1.11rem;
  padding-left: 0.02rem;
  border-bottom: 1px solid #eaeaea;
  transition: border-color 0.2s ease;
}
.dl-item__icon {
  position: relative;
  grid-row: span 2;
  align-self: start;
  display: block;
  width: 0.65rem;
  height: 0.69rem;
}
/* 灰/蓝两版图标叠放，hover 时交叉淡入（PSD 的蓝色行即 hover 态） */
.dl-ico {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease;
}
.dl-ico--on { opacity: 0; }
.dl-item__name {
  grid-column: 2;
  font-size: 0.24rem;
  line-height: 0.27rem;
  font-weight: 500;
  color: var(--c-ink);
  transition: color 0.2s ease;
}
.dl-item__meta {
  grid-column: 2;
  display: flex;
  gap: 0.25rem;
  margin-top: 0.24rem;
  font-size: 0.18rem;
  line-height: 0.18rem;
  color: var(--c-ink-2);
}
.dl-item__view {
  position: absolute;
  left: 3.62rem;
  top: 0.51rem;
  font-size: 0.18rem;
  line-height: 0.18rem;
  color: var(--c-ink-2);
  transition: color 0.2s ease;
}
/* hover：底线、标题、日期大小、立即阅览、图标一起转蓝（即 PSD 里那一行的表现） */
.dl-item:hover { border-bottom-color: var(--c-primary); }
.dl-item:hover .dl-item__name,
.dl-item:hover .dl-item__meta,
.dl-item:hover .dl-item__size,
.dl-item:hover .dl-item__view { color: var(--c-primary); }
.dl-item:hover .dl-ico--gray { opacity: 0; }
.dl-item:hover .dl-ico--on { opacity: 1; }
.dl-item:focus-visible {
  outline: 0.02rem solid var(--c-primary);
  outline-offset: 0.04rem;
}
.dl-item:focus-visible .dl-item__name,
.dl-item:focus-visible .dl-item__meta,
.dl-item:focus-visible .dl-item__view { color: var(--c-primary); }
.dl-item:focus-visible .dl-ico--gray { opacity: 0; }
.dl-item:focus-visible .dl-ico--on { opacity: 1; }

/* --------------------------------------------------------------------------
   4. 分页：58 圆形，浅灰底；当前页红描边红字；下一页红底白箭头
   -------------------------------------------------------------------------- */
.pager {
  gap: 0.16rem;
  margin-top: 0.8rem;
}
.pager button,
.pager a {width: 0.58rem;height: 0.58rem;border: 0;background: var(--c-card);font-size: 0.16rem;color: var(--c-ink-2);position: relative;}
/* .pager .pager-prev:before{position: absolute;width: 100%;height: 100%;content: '';background: url(../images/ico-chevron-left.svg) no-repeat center;background-size: 15px auto;left: 50%;top: 50%;transform: translate(-50%, -50%); filter:brightness(0);opacity:.28;}
.pager .pager-prev {background-color: var(--c-white); border: 1px solid var(--c-line);}
.pager .pager-prev:hover { background-color: var(--c-primary);}
.pager .pager-prev:hover:before{filter:none;opacity:1; }
.pager .pager-dots {display: grid;place-items: center;width: 0.58rem;height: 0.58rem;border-radius: 50%;background: var(--c-card);font-size: 0.16rem;color: var(--c-ink-2);}
.pager .pager-dots:hover { background-color: var(--c-card); color: var(--c-ink-2); }
.pager .a_cur {background: var(--c-white);box-shadow: inset 0 0 0 2px var(--c-accent);color: var(--c-accent);}
.pager .a_cur:hover { background-color: var(--c-white); color: var(--c-accent); }
.pager .pager-next { background-color: var(--c-accent); background-image: url(../images/ico-chevron-right.svg);background-position: center;background-repeat: no-repeat;background-size: 15px auto;}
.pager .pager-next:hover { background-color: #b8080e; } */

/* --------------------------------------------------------------------------
   5. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .dl { padding-block: 0.8rem 0.9rem; }
  .dl-list { column-gap: 0.4rem; row-gap: 0.5rem; margin-top: 0.5rem; }
  .dl-item { height: 1.3rem; }
  .dl-item__view { position: static; grid-column: 2; margin-top: 0.12rem; }
}

@media (max-width: 768px) {
  .dl { padding-block: 0.6rem 0.7rem; }
  .dl-title { font-size: 0.4rem; line-height: 0.44rem; }
  .dl-list {
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
    margin-top: 0.44rem;
  }
  .dl-item {
    grid-template-columns: 0.9rem 1fr;
    column-gap: 0.24rem;
    height: auto;
    padding-bottom: 0.26rem;
  }
  .dl-item__icon { width: 0.9rem; height: 0.96rem; }
  .dl-item__name {
    font-size: 0.26rem;
    line-height: 0.38rem;
    overflow-wrap: anywhere;
  }
  .dl-item__meta {
    flex-wrap: wrap;
    gap: 0.12rem 0.18rem;
    margin-top: 0.12rem;
    font-size: 0.22rem;
    line-height: 0.3rem;
  }
  .dl-item__view { font-size: 0.22rem; line-height: 0.3rem; margin-top: 0.08rem; }
  .pager { margin-top: 0.5rem; gap: 0.12rem; }
  .pager button,
  .pager a,
  .pager .pager-dots { width: 0.6rem; height: 0.6rem; font-size: 0.22rem; }
}