/*
 * Download 页 —— 1:1 对应设计稿 Astra 6月 / 1054:2368（1920×3442）
 *
 *   首屏 1054:2510   整幅 1920×960：标题 56/56 白 + 红线 100×4 →96→ 搜索框
 *                    搜索框 706×58 圆角胶囊，白底 px32，占位 14/20 #999；右端红色按钮 116×58、图标 32
 *   内容区 1054:2520 #F9F9F9 上下 120、左右 240（内容 1440）
 *     左栏 1054:2521  340 宽：每条 92 高、px20、上边 1px #DEDFE0
 *                     名称 18/25 Bold（选中主题色、常态 #333），右端 20 的折角箭头
 *     中缝 1054:2554  20 的空档（设计稿里那条 Divider Line 不画线）
 *     右栏 1054:2555  1080 宽，卡片之间 32
 *       卡片白底 p28：标题行 61（24/32 Semi 黑）+ 右端 30 的圈箭头
 *         收起态 117：标题行无下边线，圈箭头灰、转 -90°（朝右）
 *         展开态 555：标题行带 1px #DEDFE0 下边线，圈箭头红、归位（朝下）
 *                     →24→ 文件表（#F8F8F8、px28、行距 10）→24→ 分页 448×68
 *       文件行 73：py24、下边 1px #DEDFE0，内容 16/20 Bold #808080
 *                  文件名占满 → 日期 px20 → Preview（24 图标 + 12 + 文字）→ download 同款
 *       分页：36 圆点，当前页 1px 主题色描边 + 主题色字
 *   页尾 CTA 1054:2423 沿用全站那条
 *
 * 尺寸字号一律走 CSS 变量，由组件的响应式控制项按断点写入；
 * 这里的媒体查询只翻转排布方向，绝不写死尺寸（写死会盖掉控制项，见记忆里那条坑）。
 */

.astra-dl {
  --dl-primary: #e60012;
  --dl-text: #333333;
  --dl-strong: #000000;
  --dl-muted: #808080;
  --dl-subtle: #999999;
  --dl-border: #dedfe0;
  --dl-surface: #ffffff;
  --dl-table-bg: #f8f8f8;

  font-family: inherit;
  color: var(--dl-text);
}

.astra-dl-center {
  padding: var(--dl-padding, 120px) 0;
}

.astra-dl__layout {
  display: flex;
  align-items: flex-start;
  gap: var(--dl-gap, 20px);
  width: 100%;
  max-width: calc(var(--dl-width, 1440px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

/* ======================================================= 左栏 1054:2521 */
.astra-dl__nav {
  flex: 0 0 var(--dl-nav-width, 340px);
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.astra-dl__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--dl-cat-height, 92px);
  margin: 0;
  padding: var(--dl-cat-pad-y, 12px) var(--dl-cat-pad-x, 20px);
  border: 0;
  border-top: 1px solid var(--dl-border);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--dl-cat-size, 18px);
  line-height: var(--dl-cat-line, 25px);
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--dl-text);
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}

.astra-dl__cat:last-child {
  border-bottom: 1px solid var(--dl-border);
}

.astra-dl__cat:hover,
.astra-dl__cat.is-active {
  color: var(--dl-primary);
}

.astra-dl__cat-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.astra-dl__cat-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dl-cat-icon, 20px);
  height: var(--dl-cat-icon, 20px);
  color: currentColor;
}

.astra-dl__cat-icon svg,
.astra-dl__acc-icon svg,
.astra-dl__act-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ======================================================= 右栏 1054:2555 */
.astra-dl__panels {
  flex: 1 1 0;
  min-width: 0;
}

.astra-dl__group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--dl-card-gap, 32px);
}

.astra-dl__group.is-hidden,
.astra-dl__acc.is-hidden,
.astra-dl__row.is-hidden {
  display: none;
}

.astra-dl__acc {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--dl-card-pad, 28px);
  background: var(--dl-surface);
}

.astra-dl__acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--dl-head-height, 61px);
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.astra-dl__acc.is-open .astra-dl__acc-head {
  border-bottom-color: var(--dl-border);
}

.astra-dl__acc-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--dl-acc-size, 24px);
  line-height: var(--dl-acc-line, 32px);
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--dl-strong);
  overflow-wrap: break-word;
}

/* 圈箭头：收起转 -90°（朝右）、展开归位（朝下），跟设计稿一致 */
.astra-dl__acc-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dl-acc-icon, 30px);
  height: var(--dl-acc-icon, 30px);
  color: var(--dl-subtle);
  transform: rotate(var(--dl-acc-icon-rotate, -90deg));
}

.astra-dl__acc.is-open .astra-dl__acc-icon {
  color: var(--dl-primary);
  transform: rotate(0deg);
}

/* 展开面板：只动 grid 的行高，内容不用量高度 */
.astra-dl__acc-panel {
  display: grid;
  grid-template-rows: 0fr;
}

.astra-dl__acc.is-open .astra-dl__acc-panel {
  grid-template-rows: 1fr;
}

/* 裁切层自己不能带 padding：它的 padding 不受自身 overflow 约束，
   收起时会把卡片撑高（设计稿的 117 会变大），留白得放到里面这层 */
.astra-dl__acc-panel > .astra-dl__acc-inner {
  overflow: hidden;
  min-height: 0;
}

.astra-dl__acc-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dl-body-gap, 24px);
  padding-top: var(--dl-body-gap, 24px);
}

/* ====================================================== 文件表 1054:2563 */
.astra-dl__table {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--dl-row-gap, 10px);
  width: 100%;
  padding: 0 var(--dl-table-pad, 28px);
  background: var(--dl-table-bg);
}

.astra-dl__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--dl-row-pad, 24px) 0;
  border-bottom: 1px solid var(--dl-border);
  font-size: var(--dl-row-size, 16px);
  line-height: var(--dl-row-line, 20px);
  font-weight: 700;
  letter-spacing: -0.16px;
  color: var(--dl-muted);
}

.astra-dl__file {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.astra-dl__date {
  flex: 0 0 auto;
  padding: 0 var(--dl-cell-pad, 20px);
  white-space: nowrap;
}

.astra-dl__act {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--dl-act-gap, 12px);
  padding: 0 var(--dl-cell-pad, 20px);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.astra-dl__act:hover {
  color: var(--dl-primary);
}

.astra-dl__act-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dl-act-icon, 24px);
  height: var(--dl-act-icon, 24px);
  color: currentColor;
}

/* 没传文件时保留同样的排布，但不给可点的假象 */
.astra-dl__act--off {
  opacity: 0.45;
  cursor: not-allowed;
}

.astra-dl__act--off:hover {
  color: inherit;
}

/* ====================================================== 分页 1054:2616 */
.astra-dl__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dl-pager-gap, 9.78px);
  padding: var(--dl-pager-pad, 16px) 0;
}

.astra-dl__pager:empty {
  display: none;
}

.astra-dl__page {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--dl-page-size, 36px);
  height: var(--dl-page-size, 36px);
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: var(--dl-row-size, 16px);
  line-height: var(--dl-row-line, 20px);
  font-weight: 700;
  letter-spacing: -0.16px;
  color: var(--dl-muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.astra-dl__page:hover {
  color: var(--dl-primary);
}

.astra-dl__page.is-current {
  border-color: var(--dl-primary);
  color: var(--dl-primary);
}

.astra-dl__page[disabled] {
  opacity: 0.4;
  cursor: default;
}

.astra-dl__page[disabled]:hover {
  color: var(--dl-muted);
}

/* 首帧就是最终态（默认展开那张卡由 PHP 直接标 is-open），
   过渡等 JS 挂上 is-ready 之后再开，免得进页面先看到一次展开动画 */
.astra-dl.is-ready .astra-dl__acc-panel {
  transition: grid-template-rows 0.32s ease;
}

.astra-dl.is-ready .astra-dl__acc-icon {
  transition: transform 0.3s ease, color 0.25s ease;
}

.astra-dl__empty {
  margin: 0;
  padding: 48px 0;
  width: 100%;
  font-size: 18px;
  color: var(--dl-subtle);
  text-align: center;
}

/* 搜索反馈条：结果区在首屏外面，这行字让人知道搜到了没有。
   脚本会把首屏那个搜索表单和这行字一起套进 __search-wrap，
   这样 banner 的 96 间距落在外层，表单与提示之间只留 12。 */
.astra-dl__search-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 绝对定位：这行字出现/消失都不该把首屏的构图顶上去 */
.astra-dl__search-note {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}

/* ======================================================== 窄屏：只翻方向 */
@media (max-width: 1200px) {
  .astra-dl__layout {
    flex-direction: column;
  }

  /* 一列排布后 flex 的基准落到高度轴上，这里必须换成 auto */
  .astra-dl__nav {
    flex: 0 0 auto;
    width: 100%;
  }

  .astra-dl__panels {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 990px) {
  .astra-dl__row {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .astra-dl__file {
    flex: 1 1 100%;
  }

  .astra-dl__date {
    padding-left: 0;
  }
}