/* 大梦想成长中心 — 视觉微调覆盖层
   说明：本文件只覆盖原 Tailwind 产物的少量变量，不改动原 CSS。
   如需完全还原，删除 index.html 中引用本文件的 <link> 即可。 */

/* 1. 中文字体栈：英文走系统 UI 字体，中文优先苹方 / 鸿蒙 / 思源，零加载成本 */
html,
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Noto Sans CJK SC",
    "Microsoft YaHei", "Hiragino Sans GB", ui-sans-serif, system-ui, sans-serif !important;
}

/* 2. 字体渲染优化：让文字更细腻（Mac / iOS 上效果最明显） */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 3. 阴影收敛：原来的 5 档压缩为 3 档，最重档由 25% 黑降至 18%，更通透高级 */
.shadow-sm {
  --tw-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.shadow-md,
.shadow-lg,
.shadow-xl {
  --tw-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.1);
}
.shadow-2xl {
  --tw-shadow: 0 20px 48px -12px rgb(0 0 0 / 0.18);
}

/* 4. 内容宽度 1200 → 1280，大屏两侧留白更舒展 */
.container-max {
  max-width: 1280px;
}

/* 5. 中文排版微调：正文行高加高，标题略加字距 */
body {
  line-height: 1.75;
}
h1,
h2,
h3 {
  letter-spacing: 0.01em;
}

/* 6. 首屏轮播：内容块整体上移（top 30vh → 24vh）
   说明：内容块是 absolute top-[30vh] 定位，按钮加 margin 不会移动按钮本身，
   必须调小 top 才能让按钮离开底部。需同时覆盖 base / md: / lg: 三个变体。 */
.max-w-2xl.top-\[30vh\],
.max-w-2xl.md\:top-\[30vh\],
.max-w-2xl.lg\:top-\[30vh\] {
  top: 24vh;
}
@media (min-width: 768px) {
  .max-w-2xl.top-\[30vh\],
  .max-w-2xl.md\:top-\[30vh\],
  .max-w-2xl.lg\:top-\[30vh\] {
    top: 24vh;
  }
}
@media (min-width: 1024px) {
  .max-w-2xl.top-\[30vh\],
  .max-w-2xl.md\:top-\[30vh\],
  .max-w-2xl.lg\:top-\[30vh\] {
    top: 24vh;
  }
}

/* 7. 发展历程时间线：卡片内容统一左对齐 */
/* 7a. 左列文字由右对齐改为左对齐 */
.w-1\/2.pr-8.text-right {
  text-align: left !important;
}
/* 7b（修订版）. 图标改为卡片右上角装饰。
   必须用 :has() 限定为「直接子元素是 w-12 h-12 圆形图标」的容器（时间线专属）。
   之前裸写 .flex.items-center.mb-4 误伤了底部三个圆形图标
   （它们自身也同时具有 flex/items-center/mb-4 三个类），
   导致 display:block 破坏居中、padding 撑成椭圆。 */
.flex.items-center.mb-4:has(> .w-12.h-12.rounded-full) {
  display: block;
  position: relative;
  padding-right: 60px;
}
.flex.items-center.mb-4:has(> .w-12.h-12.rounded-full) > .w-12.h-12.rounded-full {
  position: absolute;
  top: -4px;
  right: 0;
  margin: 0;
}