/* ==========================================================================
   hero.css — 首页上半：首屏 / 书架展示卡 / 核心功能六宫格
   组件级断点紧跟各自的组件定义，别搬到 layout.css 去（会被后加载的同名规则盖掉）
   ========================================================================== */

/* ── 首屏 ──────────────────────────────────────────────────────────────── */
.hero {
  background: var(--brand-tint);
}

.hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 76px;
  padding-block: 74px 86px;
}

.hero__body {
  display: flex;
  flex: 0 0 528px;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.hero__title {
  font-size: var(--f-display);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -1.5px;
  color: var(--text);
}

.hero__lead {
  font-size: var(--f-lead);
  line-height: 1.94;
  color: var(--text-body);
}

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

.hero__aside {
  flex: 1 1 auto;
  min-width: 0;
}

/* 左列一旦窄到主标题快贴边，就切竖排 —— 门槛对齐内容宽而不是拍脑袋 */
@media (max-width: 1140px) {
  .hero__inner {
    flex-direction: column;
    gap: var(--sp-8);
    padding-block: 48px 56px;
  }

  .hero__body,
  .hero__aside {
    flex: none;
    width: 100%;
    max-width: var(--w-prose);
  }
}

@media (max-width: 560px) {
  .hero__title {
    letter-spacing: -0.6px;
  }
}

/* 书架展示卡 ------------------------------------------------------------- */
.shelf {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card);
}

.shelf__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.shelf__title {
  font-size: 15px;
  font-weight: 600;
}

.shelf__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r-md);
}

.shelf__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  overflow: hidden;
  padding: 16px;
  border-radius: var(--r-md);
  aspect-ratio: 199 / 258;
}

.shelf__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 压暗幕只负责把三张不同画面收成同一调性，文字才是常量 */
.shelf__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(18, 10, 14, 0.84) 0%,
    rgba(18, 10, 14, 0.5) 34%,
    rgba(18, 10, 14, 0) 66%
  );
}

.shelf__tag,
.shelf__name {
  position: relative;
  z-index: 1;
  color: #fff;
}

.shelf__tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.86);
}

.shelf__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.shelf__progress {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.shelf__progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--f-xs);
  color: var(--text-muted);
}

.shelf__progress-top b {
  font-weight: 500;
  color: var(--text);
}

.shelf__track {
  height: 5px;
  border-radius: 3px;
  background: var(--line);
}

.shelf__bar {
  width: 62%;
  height: 100%;
  border-radius: 3px;
  background: var(--brand);
}

@media (max-width: 560px) {
  .shelf {
    padding: 18px;
    gap: var(--sp-4);
  }

  .shelf__row {
    gap: var(--sp-2);
  }

  .shelf__item {
    padding: 11px;
  }

  .shelf__name {
    font-size: 15px;
  }
}

/* ── 核心功能六宫格 ────────────────────────────────────────────────────── */
.features__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: 46px;
}

.features__title {
  font-size: var(--f-h2);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.8px;
  color: var(--text);
}

.features__lead {
  font-size: var(--f-lead);
  line-height: 1.9;
  color: var(--text-body);
}

.feature-grid {
  gap: 25px;
}

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

.feature__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* 装饰性序号：顺序由卡片排列本身表达，读屏不用念它 */
.feature__no {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  color: #dcc2cb;
}

.feature__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.feature__title {
  font-size: var(--f-h5);
  font-weight: 600;
  color: var(--text);
}

.feature__desc {
  font-size: 14px;
  line-height: 1.86;
  color: var(--text-body);
}

.feature--dark {
  background: var(--surface-dark-2);
  box-shadow: none;
}

.feature--dark .feature__no {
  color: #56495c;
}

.feature--dark .feature__title {
  color: #fff;
}

.feature--dark .feature__desc {
  color: #a99fad;
}

@media (max-width: 560px) {
  .feature {
    padding: 22px;
    gap: var(--sp-4);
  }
}

/* ==========================================================================
   真机界面（首页第三块）—— 外壳 + 屏幕 + 说明
   截图宽 308 时正好是输出的一半（616），1x 下像素精确，不会被重采样糊掉。
   ========================================================================== */
.appshots__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: 56px;
}

.appshots__title {
  font-size: var(--f-h3);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.4px;
  color: var(--text);
}

.appshots__lead {
  font-size: var(--f-lead);
  line-height: 1.9;
  color: var(--text-body);
}

.appshots__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.phone {
  flex: 0 0 330px;
  width: 330px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.phone__body {
  padding: 10px;
  border-radius: 36px;
  background: linear-gradient(160deg, #241f27, #141116);
  box-shadow:
    0 44px 70px -36px rgba(26, 23, 28, 0.5),
    0 3px 8px -3px rgba(26, 23, 28, 0.3);
}

.phone__screen {
  border-radius: 26px;
  overflow: hidden;
  background: var(--surface);
  /* 圆角裁切时底部会露 1px 亚像素白边，line-height:0 把图片的行内空间压掉 */
  line-height: 0;
}

.phone__screen img {
  display: block;
  width: 100%;
  height: auto;
}

.phone__cap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-muted);
  /* 三台图注行数不同会让底边参差，撑到「标题 + 两行描述」的高度对齐 */
  min-height: 68px;
}

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

.phone__cap span {
  text-wrap: pretty;
}

@media (max-width: 1100px) {
  .appshots__row {
    gap: 28px;
  }
  .phone {
    flex: 0 0 280px;
    width: 280px;
  }
}

@media (max-width: 860px) {
  .appshots__row {
    flex-wrap: wrap;
    gap: 36px 24px;
  }
  .phone {
    flex: 0 0 260px;
    width: 260px;
  }
}

@media (max-width: 560px) {
  .appshots__head {
    margin-bottom: 36px;
  }
  /* 单列时一台手机独占一行，别再被 flex-basis 卡住 */
  .appshots__row {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .phone {
    flex: none;
    width: min(300px, 100%);
  }
  .phone__cap {
    min-height: 0;
  }
}