/* ==========================================================================
   hero-fit-v0916.css  ·  首屏 KV 竖屏自适应（附加样式，可整行删除回滚）

   背景 —— 为什么不是代码能"修好"的问题
   十周年 KV 素材是 1440x2560，比例 9:16 = 0.5625。
   现役手机视口比例从 iPhone SE 的 0.562 一直到 16 Pro Max 的 0.46。
   「铺满整屏」和「一个像素都不裁」在数学上只有当两个比例相等时才同时成立，
   而机型比例没有统一值。所以代码只能二选一：
     · 不裁切 → 必然有上下留白（当前取向，因为文案「哈啰十年国民之选」是
                 烘在图片里的，距下沿仅约 53px，一裁就有可能切字）
     · 满屏   → 必然裁掉画面上下两段
   要两者兼得，只能由设计侧出一版带「可裁切延展边」的素材，见 Handoff 第十五节。

   本文件做的三件事（都只解决代码侧的不一致，不改变上面的物理限制）
   1 · hero 高度：max(82vh, 700px) 的死值 → 100dvh，跟随真实视口。
       原来 700px 在 852 高的机型上只占 82%，下一段会露出来；在 667 高的
       SE 上又比屏幕还高，两种机型两种毛病。
   2 · 留白对称：hero 等于整屏后，上下留白由居中算式自然对半分。
   3 · 顶栏遮挡：SE 这类比例几乎正好 9:16 的机型，上方留白算出来接近 0，
       画面顶部会被 66px 高的不透明白 header 整段盖住。这里把图框下界夹在
       header 下沿，并同步缩掉 header 那段高度 + object-fit:contain，
       保证画面完整可见（代价是 SE 上左右各留约 18px，由色带填充）。

   仅在 (orientation: portrait) 生效；横屏与桌面端完全不受影响。
   ========================================================================== */

@media (orientation: portrait) {

  /* 1 · 首屏跟随真实视口高度。
     用 100dvh 而不是 100vh —— 移动端浏览器地址栏收起/展开时 vh 不变，
     会导致首屏比可视区高出一条，dvh 是动态视口高度，跟着变。 */
  .page-home-v0723 .hero {
    min-height: 100dvh;
    height: 100dvh;
  }

  @supports not (height: 100dvh) {
    .page-home-v0723 .hero {
      min-height: 100vh;
      height: 100vh;
    }
  }

  /* 3 · 十周年帧：图框夹在 header 之下，且不裁切。
     覆盖 hero-apple-v0915.css 中 (max-aspect-ratio: 9/16) 的同名规则，
     靠加载顺序在其之后生效 —— index.html 里本文件必须排在它后面。 */
  @media (max-aspect-ratio: 9 / 16) {
    .page-home-v0723 #heroSlide3 > picture {
      /* 上沿永远不高于 header 下沿；有余量时仍按居中 */
      inset: max(var(--hero-header-h, 66px), calc(50% - 50vw * 16 / 9)) 0 auto 0;
      /* 高度同步让出 header，否则底部会溢出被 overflow:hidden 裁掉，
         而烘死的文案就在那里 */
      height: min(calc(100% - var(--hero-header-h, 66px)), calc(100vw * 16 / 9));
      transform: none;
    }

    /* contain 而非 cover：图框在窄屏上会被压成比 9:16 更宽的盒子，
       cover 会纵向裁切画面（可能切到底部文案），contain 只留左右空隙，
       空隙由 #heroSlide3 的上蓝下白色带填充，不会露死色。
       正常机型上图框就是精确 9:16，此时 contain 与 cover 结果一致。 */
    .page-home-v0723 #heroSlide3 .hero-slide-img {
      object-fit: contain;
      object-position: center;
    }
  }
}