/* assets/css/sections/download.css — 下载中心：产品选项卡 + 下载卡 + 安装步骤 + 系统要求。
   原站下载按钮有 60 秒冷却（同一安装包），冷却态的排版在这里；
   倒计时逻辑在 main.js，本文件只负责它长什么样。 */

/* ============ 下载卡：一份安装包一张 ============ */
/* 卡片铺满版心，内部左右两栏：左是产品信息（标题 / 定位 / 能力要点），
   右是下载区（版本元信息 / 按钮 / 提示），中间一条细线分隔。
   单张卡居中收窄会留下整幅空白，所以这里让卡直接吃掉版心宽度。 */
.dl-grid{ display:grid; gap:24px; }
.dl-card{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  padding:32px 36px 30px; background:var(--surface); border:1px solid var(--line);
}
.dl-card-main{ min-width:0; padding-right:56px; }
.dl-card-side{ min-width:0; padding-left:56px; border-left:1px solid var(--line); }
.dl-card-head{ display:flex; align-items:center; gap:12px; }
.dl-os{
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  border:1px solid var(--line-dark); color:var(--ink);
}
.dl-card h3{ font-size:19px; font-weight:700; }
.dl-card .dl-sub{ font-size:13px; color:var(--muted); margin-top:3px; }
.dl-desc{ margin-top:18px; font-size:15px; color:var(--muted); }

/* 能力要点：两列排布，沿用全站 .pts 的朱砂方块（间距由网格给，清掉 .pts 的 margin-top） */
.dl-points{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 28px; margin-top:24px; }
.dl-points li{ margin-top:0; font-size:14.5px; color:var(--ink); }

/* 元信息：版本 / 大小 / 更新日期，行间细线做成轻表格 */
.dl-meta-list li{ display:flex; gap:14px; padding:7px 0; font-size:13.5px; }
.dl-meta-list li + li{ border-top:1px solid var(--line); }
.dl-meta-list .k{ flex:none; width:6.5em; color:var(--muted); }
.dl-meta-list .v{ color:var(--ink); font-variant-numeric:tabular-nums; }

.dl-card-side .btn{ margin-top:22px; width:100%; }
.dl-hint{ margin-top:12px; font-size:12.5px; color:var(--muted); }

/* 冷却态：按钮保持不可点，但外形不变，只换文案与底色 */
.btn.is-cooldown{
  background:var(--line); border-color:var(--line); color:var(--muted);
  cursor:not-allowed; pointer-events:auto;
}
.dl-cooldown{ font-variant-numeric:tabular-nums; }

/* ============ 安装步骤 ============ */
/* 步骤号直接写在 HTML 里（<div class="step-no">1</div>），不用 CSS counter：
   counter 在 ::before 里递增时各浏览器表现不一致，而且显式数字对读屏更友好。
   列数由 steps--4 修饰类决定，跟着该面板实际的步骤数走。 */

/* ============ 系统要求：两列定义列表 ============ */
.req-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.req{ padding:22px 24px; background:var(--surface); }
.req h3{ padding-bottom:10px; border-bottom:1px solid var(--line); font-size:15.5px; font-weight:700; }
.req dl{ margin-top:14px; }
.req dt{ margin-top:10px; font-size:13px; color:var(--muted); }
.req dd{ margin:3px 0 0; font-size:14.5px; }

/* ============ 平台提示条：下载页顶部的兼容说明 ============ */
.dl-notice{
  display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
  padding:16px 20px; margin-bottom:32px;
  background:var(--surface); border:1px solid var(--line); font-size:13.5px; color:var(--muted);
}
.dl-notice .ico{ color:var(--cinnabar); }

@media (max-width:1020px){
  .dl-grid,.req-grid{ grid-template-columns:1fr; }
  .dl-card{ grid-template-columns:1fr; padding:28px 28px 26px; }
  .dl-card-main{ padding-right:0; }
  .dl-card-side{ margin-top:26px; padding-top:24px; padding-left:0; border-left:0; border-top:1px solid var(--line); }
}
@media (max-width:680px){
  .dl-card{ padding:22px 20px; }
  .dl-points{ grid-template-columns:1fr; }
}