/*
 * 首页（index）小屏：顶栏 Logo/菜单与主栏按钮群分层；主栏贴底区与版权/安全区对齐。
 * 仅作用于 #hero-container，避免影响其他城市/内页。
 */
@media screen and (max-width: 479px) {
  #hero-container .header-wrap {
    z-index: 40;
    pointer-events: none;
  }

  #hero-container .header-wrap .grdd_logo {
    pointer-events: auto;
  }

  #hero-container .c-nav.w-nav {
    z-index: 50;
  }

  /*
   * Webflow 原先用 height:88svh + justify-content:center，主栏在视口里垂直居中，按钮会顶到 Logo；
   * 改为上沿在顶栏之下、下沿在版权之上，内容自上而下排列，幻灯片自然靠近底部区域。
   */
  #hero-container .c-container-2 {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10.5svh) !important;
    bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 88vw !important;
    height: auto !important;
    max-height: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  #hero-container .tagline-wrapper {
    margin-top: 0 !important;
    margin-bottom: 1.5svh !important;
    flex: 0 0 auto !important;
  }

  #hero-container .button-wrapper {
    flex: 0 0 auto !important;
  }

  #hero-container .divider {
    flex: 0 0 auto !important;
  }

  #hero-container .slider.w-slider {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    top: 0 !important;
  }

  #hero-container .footer-wrap-2 {
    z-index: 45;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    padding-top: 0.5svh !important;
  }

  #hero-container.section-2 {
    min-height: 100dvh;
    min-height: 100svh;
  }
}