@charset "utf-8";
/*!
 * index.css —— 首页（index.html）独有样式
 * 设计稿：设计稿/index.png（1500 x 4426，即 375 x 1106.5 CSS px）
 * ---------------------------------------------------------------------------
 * 实测关键尺寸（CSS px，均来自设计稿像素 ÷ 4）：
 *   卡片左右内缩 12.5 → 卡片宽 350.5
 *   首页标题切图 341 x 85.5（居中）
 *   章节徽章切图 188 x 34（居中，纵向压在卡片上边缘）
 *   日程表 313 x 194，5 行，单行高 38.8
 *   报名按钮切图 199 x 53（居中）
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
   页面底色：切图 背景.png 未使用（单张 2.2MB），此处用 CSS 渐变近似复刻
   星轨弧线 / 右上深空 / 右下彩色光晕
   =========================================================================== */
body.page-index {
  background-color: #050E39;
  /*background-image:
    radial-gradient(46% 20% at 97% 92%, rgba(255, 120, 210, .42), transparent 70%),
    radial-gradient(36% 17% at 84% 99%, rgba(148, 92, 255, .42), transparent 72%),
    radial-gradient(60% 22% at 62% 100%, rgba(40, 150, 255, .40), transparent 74%),
    radial-gradient(125% 26% at 50% 41%, transparent 68.5%, rgba(70, 175, 255, .30) 69.4%, transparent 70.4%),
    radial-gradient(120% 24% at 50% 19%, transparent 68.5%, rgba(70, 175, 255, .22) 69.4%, transparent 70.4%),
    linear-gradient(180deg, #050E39 0%, #061346 50%, #0A1C74 82%, #0B1E80 100%);*/
  background-repeat: no-repeat;
  background-image: url('../img/bg.png');
  background-position: center bottom;
  background-size: cover;
}

/* ===========================================================================
   1. 头部标题区
   设计稿实测：导航栏底 88.2 → 标题切图顶 143.8（间距 55.6）
              标题切图 341 x 85.5 → 底 229.3（设计稿原图含 iOS 状态栏，
              需整体减掉状态栏高度后换算，换算后标题底 ≈ 185）
              标题底 → 首个徽章顶 201（间距 21.7）
   顶部导航栏已移除：原「导航栏底 88.2」这一段改由刘海屏安全区承担，
   标题顶 = 安全区 + 55.6（真机状态栏 44px 时 ≈ 99.6）。
   写法上先给不支持 env() 的浏览器一个固定值兜底，再覆盖为 calc()。
   =========================================================================== */
.hero {
  padding: .556rem .1rem .217rem;
  padding-top: calc(env(safe-area-inset-top, 0px) + .556rem);
  text-align: center;
}

/* 主标题切图：一张图含四行文字（英文标题行 / 中文主标题 / 中文副标题 / 底部英文小字） */
.hero__title {
  width: 3.41rem;
  height: auto;
  margin: 0 auto;
}

/* ===========================================================================
   2. 章节通用
   设计稿实测：卡片底 551.5 → 下一徽章顶 568.9（间距 17.4）
   =========================================================================== */
.sec {
  padding: 0 .125rem;
}
.sec + .sec {
  margin-top: .17rem;
}
/* 首页徽章切图 188 x 34。
   与报名页不同：设计稿首页的徽章是「悬在卡片上方」的（徽章底 241.8 →
   卡片顶 262.25，留 20.5 的间距），所以这里的负边距只用来抵消
   .sec__head 的高度，再由 .intro-card 的 margin-top 补出这段间距。 */
.sec__badge {
  width: 1.88rem;
}
.sec__head {
  margin-bottom: -.17rem;
}

/* ===========================================================================
   3. 大会简介
   设计稿实测：卡片 306.8 → 551.5（高 244.7）
              正文 9 行，行距 24，字形高 11.9（字号 14），卡片内边距约 14
              换算到页面坐标：卡片顶 262.25，即徽章底 → 卡片顶间距 20.5
   =========================================================================== */
.intro-card {
  margin-top: .3845rem;
  /* 卡片 1px 边框也占内容宽，padding 左右取 14 后文本容器 = 350-2-28 = 320，
     与设计稿实测的文本容器（x 25.75 ~ 345.75）一致；
     上下内边距设计稿实测约 10 / 18.25（合计 28.25，与左右对称时的 28 等值） */
  padding: .10rem .14rem .1825rem;
}
/* 正文：两端对齐 + 首行缩进两字符，行距 24px，匹配设计稿排版。
   字号换算说明：设计稿正文每行最多 24 字、首行 22 字，按 320px 宽的
   文本容器反推单字步进 ≈ 13.3px（14px 会多断一行，导致卡片高 24px）。
   即设计稿正文实际字号约 13.2px，不是 14px。 */
.intro-card__text {
  font-size: .132rem;
  line-height: .24rem;
  color: #E8EDFA;
  text-align: justify;
  text-indent: 2em;
}

/* ===========================================================================
   4. 大会安排
   设计稿实测：徽章底 602.9 → 引导文字首行 626.2（间距 23.3，含半行距）
              引导文字 4 行，行距 24
              引导文字底 722.2 → 日程表顶 744.2（间距 22）
              日程表 313 x 190，5 行，单行 37
   =========================================================================== */
/* 该区块不套卡片：徽章下方直接是引导文字，再往下是自带描边的日程表 */
.agenda {
  padding-top: .4rem;
}

/* 徽章下方的引导文字：文本容器宽 318（设计稿实测 x 26.75 ~ 344.75），居中 */
.agenda-lead {
  width: 3.2rem;
  margin: 0 auto;
  font-size: .132rem;
  line-height: .24rem;
  color: #E8EDFA;
  text-align: justify;
  text-indent: 2em;
}

/* 日程表
   列对齐规则：日期 / 时间 / 名称三列都是「定宽 + 左对齐」，
   设计稿实测三列的文字起点分别为 x 51 / 149 / 233（页面坐标），
   即表格左内边距 19、日期列 98、时间列 84，名称列占满剩余宽度。
   这样每一行的时间都从同一 x 起排，不会因日期文字长短（10月20日 /
   10月20-22日）而左右浮动。 */
.schedule {
  width: 3.13rem;
  margin: .22rem auto 0;
  border: 1px solid rgba(60, 190, 255, .45);
  border-radius: .04rem;
  overflow: hidden;
}
.schedule__row {
  display: flex;
  align-items: center;
  height: .37rem;
  padding: 0 .19rem;
  background: rgba(50, 96, 195, .30);
}
.schedule__row + .schedule__row {
  border-top: 1px solid rgba(60, 190, 255, .28);
}
/* 高亮行（设计稿中「10月20日 开幕式及主论坛」为亮蓝渐变底） */
.schedule__row.is-active {
  background: linear-gradient(90deg, #0F85D3 0%, #3160C3 100%);
}
/* 日期列：定宽（最长的「10月20-22日」也不会撑开），左对齐 */
.schedule__date {
  flex: 0 0 .98rem;
  font-size: .14rem;
  font-weight: 700;
  color: #2FD8F5;
  white-space: nowrap;
}
/* 时间列：定宽 + 左对齐 → 各行时间起始位置严格一致 */
.schedule__time {
  flex: 0 0 .84rem;
  font-size: .13rem;
  color: #D6E4FF;
  text-align: left;
  white-space: nowrap;
}
/* 名称列：占满剩余宽度，左对齐 */
.schedule__name {
  flex: 1;
  font-size: .13rem;
  font-weight: 700;
  color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
}

/* ===========================================================================
   5. 报名按钮
   设计稿：日程表底 935 → 按钮图顶 957（间距 22），按钮图底 1010 → 页面底 1106.5
   =========================================================================== */
.hero-btn {
  padding: .22rem 0 .6rem;
}