/* 首页 Hero 信息区(方案 A:无框叠层)
   logo 下方不再有盒子:标语 → 按钮 → 一条细线 → 赞助者行,全部居中。
   ⚠ 刻意不用卡片:等宽大盒子(或任何盒子)在 logo 下面会变成第二个大色块,
   内容却只有几个按钮,屏幕上就多出一个空容器跟主视觉抢位置(踩过)。
   依赖 index.CvfE_tWG.css 之后加载。 */

/* 图片区宽度:比站点内容列再小一圈。图片是 height 驱动的自适应元素,
   必须卡在图片/框自身,只给父容器加 max-width 会被它直接溢出。 */
.hero-slider .slide-heading {
  width: min(calc(var(--container-max, 1280px) - 100px), 92vw, 100%);
}

/* 信息区:完全不画框,宽度略窄于图片,让细线不至于拉太长 */
.slide-card {
  width: min(900px, 92vw, 100%);
  position: relative;
  z-index: 2;
  margin-top: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* 上排:标语 + 按钮组,居中竖排 */
.slide-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.slide-card-main .slide-desc {
  font-size: 1.0625rem;
}

/* 按钮不需要主题给的外上边距(36px 会把间距撑散) */
.slide-card .slide-actions {
  margin-top: 0;
  justify-content: center;
  gap: 14px;
  flex: none;
}

/* 赞助者行:移到屏幕底部,做成通栏细线条——不是胶囊、不是卡片,只有一条顶部分割线
   加极轻的底色,像网站的地基;内容仍然对齐站点内容列。
   ⚠ 必须用 position:fixed:它最近的定位祖先 .slide-inner 是 relative,而 .slide-inner
   的底边跟着内容走(不是屏底),用 absolute 会贴在信息区下面而不是屏幕底部。
   首页整屏就是视口高、不滚动,所以 fixed 不会出现"滚动时脱节"的问题。 */
.slide-card-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 16px max(22px, calc((100% - var(--container-max, 1280px)) / 2)) 18px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

/* 条子不铺底色:铺了在 ClearSky 那种亮底图上就是一条压暗的横带。
   改为在文字上垫投影撑对比(和左右箭头同一套做法)。 */
.slide-card-foot .slide-sponsors-label,
.slide-card-foot .slide-sponsors-total,
.slide-card-foot .slide-sponsor-chip {
  text-shadow: 0 1px 4px color-mix(in srgb, var(--color-shadow-tint) 55%, transparent);
}

/* 赞助条在主题里是「绝对定位贴 slide 底部」的独立小胶囊(黑底 + 999px 圆角 + 毛玻璃),
   回到文档流后要把它彻底清掉。
   ⚠ 特异性必须凑到 (0,5,0):主题那条是
   `.slide[data-astro-cid].has-image .slide-sponsors[data-astro-cid]`——3 个类 + 2 个
   作用域属性,只写 4 个类(0,4,0)会被压掉,表现就是切到 ClearSky 那屏
   赞助条突然套上一个黑色胶囊(踩过)。这里补同一个作用域属性与之打平,
   靠加载顺序(hero-bar 在 Layout 之后)取胜。 */
.slide .slide-inner .slide-card .slide-sponsors[data-astro-cid-5auvlcfn] {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  flex: 1;
  min-width: 0;
}

/* 圆点同理:主题里是绝对定位在 slide 底部居中 */
.slide .slide-inner .slide-card .slider-dots {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  flex: none;
}

/* 左右切换箭头:静止时只剩图标——去掉胶囊底、描边和毛玻璃,悬停才出底色
   (悬停态沿用主题的强调色:橙底白图标)。
   ⚠ 图标要留一层投影兜底:slide 2 是亮底图,纯白图标直接压上去会发虚。 */
.hero-slider .slider-arrow {
  background: none;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 1.25rem;
  filter: drop-shadow(0 2px 12px color-mix(in srgb, var(--color-shadow-tint) 70%, transparent));
}

/* 手机:信息区离图片近一点(上排本来就是竖排,不用改结构) */
@media (max-width: 720px) {
  .slide-card {
    margin-top: 22px;
  }
}

/* 手机:底部赞助条改两行。
   ⚠ 单行在窄屏是真的挤:滚动区的宽度约等于「屏宽 - 256px」,360 宽只剩 104px、
   390 宽只剩 134px(实测),4 个赞助者名号塞在放不下 2 个的宽度里,
   名字被从中间切掉。第一行放「标签 + 总数 + 圆点」,第二行把滚动区整行铺开
   (390 下 346px,是原来的 2.6 倍)。
   实现要点:把 .slide-sponsors 设成 display:contents,让它的三个子元素直接参与
   .slide-card-foot 的排布,再用 order 把滚动区压到最后一行——它在 DOM 里夹在
   标签和总数中间,不重排的话总数会跟着跑到第二行去。 */
@media (max-width: 560px) {
  .slide .slide-inner .slide-card .slide-card-foot {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 12px 22px 14px;
  }
  .slide .slide-inner .slide-card .slide-card-foot .slide-sponsors {
    display: contents;
  }
  .slide .slide-inner .slide-card .slide-card-foot .slide-sponsors-label {
    order: 1;
  }
  .slide .slide-inner .slide-card .slide-card-foot .slide-sponsors-total {
    order: 2;
  }
  .slide .slide-inner .slide-card .slide-card-foot .slider-dots {
    order: 3;
    margin-left: auto;
  }
  .slide .slide-inner .slide-card .slide-card-foot .slide-sponsors-mask {
    order: 4;
    flex: 0 0 100%;
  }
}

/* 手机:主视觉框高度跟着图片走。
   ⚠ 主题在窄屏把 .slide-heading 写死成 clamp(180px,34vh,280px),而图片是按宽度
   缩放的(高度 ≈ 0.37×屏宽),390 宽下图片只有约 145px 高,框却留 280px,
   图片和信息区之间会空出 135px。改成跟屏宽挂钩,框高才和图片匹配。 */
@media (max-width: 640px) {
  .hero-slider .slide-heading {
    height: clamp(140px, 38vw, 300px);
  }
}

/* 通栏导航是 fixed 覆盖层(.slide 是绝对定位,给父级加 padding 无效),
   所以要抬 .slide 的上内边距,让整屏内容在导航下方的区域里重新居中 */
.site-header.nav-flat ~ main .slide {
  padding-top: calc(64px + var(--nav-height-solid, 76px));
}
/* 首页通栏导航:彻底透明,什么底都不留。
   ⚠ 选择器必须凑到 (0,5,0):主题里 `.site-header[data-astro-cid] .solid
   .nav-bar[data-astro-cid]` 自带两个作用域属性,特异性刚好 (0,5,0),
   普通写法(0,3,0)会被它压掉,透明根本不生效(踩过)。
   这里补一个 .solid 和同一个属性选择器与之打平,靠加载顺序(hero-bar 在
   Layout 之后)取胜。
   ⚠ backdrop-filter 也必须一起清掉:只要它还在,栏体覆盖的那 76px 就会比背景
   本身更亮更饱和,屏幕上能看到一条和下方对不上的横带(实测顶部 45,39,42
   vs 其下 47,44,45)。不加模糊就没有这条带,但那半吊子毛玻璃反而更明显。
   ⚠ 栏体必须保持通栏:要限制的是「内容」宽度(padding),不是栏体本身。 */
.site-header.solid.nav-flat .nav-bar[data-astro-cid-fzpbxy5g] {
  background: transparent;
  /* ⚠ 这里只把颜色调透明,不能写 border-bottom:0:那样连 border-style 也变成 none,
     而 style 不参与插值,文档页↔首页那条"分隔线淡入淡出"就播不出来(踩过)。 */
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* 主视觉与卡片收窄后,标题/图片都别再自己撑破这个框。
    ⚠ 图片必须保留 100% 封顶:它是 width:auto 的自适应元素,主题只给了
    min(1400px,92vw),放进收窄后的框里会直接横向溢出。 */
.hero-slider .slide-heading .slide-title,
.hero-slider .slide-heading .slide-logo,
.hero-slider .slide-heading .slide-logo-dark {
  max-width: 100%;
}