/* ==========================================================================
   pages.css — 其余页面：社区广场 / 客户端下载 / 版本更新志
   组件级断点紧跟各自的组件定义，别搬到 layout.css 去（会被后加载的同名规则盖掉）
   ========================================================================== */

/* ── 社区广场 ──────────────────────────────────────────────────────────── */
.community {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  padding-block: 40px 56px;
}

.posts {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.post {
  display: flex;
  flex-direction: column;
  gap: var(--r-md);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.post__head {
  display: flex;
  align-items: center;
  gap: var(--r-md);
}

.post__author {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.post__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.post__when {
  font-size: var(--f-2xs);
  color: var(--text-muted);
}

.post__text {
  font-size: 14.5px;
  line-height: 1.95;
  color: #3a343e;
}

.post__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.post__media img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.post__media--single {
  grid-template-columns: minmax(0, 300px);
}

.post__media--single img {
  height: 190px;
}

.post__actions {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: var(--f-xs);
  color: var(--text-muted);
}

.sidebar {
  display: flex;
  flex: 0 0 330px;
  flex-direction: column;
  gap: 18px;
}

.side-card {
  display: flex;
  flex-direction: column;
  gap: var(--r-md);
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.side-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.side-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--f-sm);
  color: #3a343e;
}

.side-row__value {
  font-family: var(--font-num);
  font-size: var(--f-2xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .community {
    flex-direction: column;
    gap: var(--sp-7);
  }

  .sidebar {
    flex: none;
    width: min(420px, 100%);
  }
}

@media (max-width: 560px) {
  .post {
    padding: 18px;
  }

  .post__media img {
    height: 120px;
  }
}

/* ── 客户端下载 ────────────────────────────────────────────────────────── */
.download-hero {
  background: var(--brand-tint);
}

.download-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  padding-block: 58px 62px;
}

.download-hero__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  min-width: 0;
}

.download-hero__title {
  font-size: var(--f-h1);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -1.4px;
  color: var(--text);
}

.download-hero__lead {
  font-size: 15.5px;
  line-height: 1.94;
  color: var(--text-body);
}

.dl-card {
  display: flex;
  flex: 0 0 460px;
  flex-direction: column;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card);
}

.dl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-block: 15px;
  text-align: left;
}

.dl-row + .dl-row {
  border-top: 1px solid var(--line-soft);
}

.dl-row__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dl-row__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.dl-row__meta {
  font-size: var(--f-2xs);
  color: var(--text-muted);
}

.dl-row__arrow {
  flex: 0 0 14px;
}

/* 下载行现在是链接，给一点悬停反馈；原来是按钮时靠 cursor 就够 */
a.dl-row {
  border-radius: var(--r-sm);
  transition: background-color 0.18s var(--ease);
}

a.dl-row:hover {
  background: var(--brand-tint);
}

/* 安装包规格 —— 只剩安卓一个平台后，用这张小表把卡片的高度和信息量撑起来，
   否则右侧只剩孤零零一行，跟左边三行文案对不上。 */
.dl-spec {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--f-2xs);
}

.dl-spec > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 5px;
}

.dl-spec dt {
  color: var(--text-muted);
}

.dl-spec dd {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dl-card__hint {
  margin-top: var(--sp-3);
  font-size: var(--f-2xs);
  color: var(--text-muted);
}

@media (max-width: 940px) {
  .download-hero__inner {
    flex-direction: column;
    gap: var(--sp-7);
    padding-block: 44px 48px;
  }

  .dl-card {
    flex: none;
    width: min(460px, 100%);
  }
}

/* 三步装好 -------------------------------------------------------------- */
.steps {
  padding-block: 54px 56px;
}

.steps__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}

.steps__title {
  font-size: var(--f-h3);
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--text);
}

.steps__lead {
  font-size: 14px;
  color: var(--text-body);
}

.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step__no {
  font-family: var(--font-num);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  color: #dcc2cb;
}

.step__title {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text);
}

.step__desc {
  font-size: var(--f-sm);
  line-height: 1.92;
  color: var(--text-body);
}

/* ── 版本更新志 ────────────────────────────────────────────────────────── */
.releases {
  padding-block: 36px 56px;
}

.release {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--sp-8);
  padding-block: var(--sp-6);
}

.release + .release {
  border-top: 1px solid var(--line-soft);
}

.release__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.release__ver {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text);
}

.release--current .release__ver {
  color: var(--brand-ink);
}

.release__date {
  font-size: var(--f-2xs);
  color: var(--text-muted);
}

.release__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.release__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.release__desc {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text-body);
}

@media (max-width: 720px) {
  .release {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding-block: var(--sp-5);
  }

  .release__meta {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-3);
  }
}