/* ============================================================
   移动端适配补丁 (mobile-fix.css)
   原模板 responsive.css 缺少「桌面导航 / 响应式导航」两块在
   窄屏下的显隐切换，导致手机上只显示 logo、没有汉堡菜单；
   另外修正 flickity fade 在窄屏下的位移（内容右移）问题。
   ============================================================ */

/* 防止任何子元素造成横向滚动条 */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ===== 窄屏(≤991px)：隐藏桌面导航，启用响应式导航(汉堡菜单) ===== */
@media (max-width: 991px) {
  .inspire-nav {
    display: none !important;
  }
  .inspire-responsive-nav {
    display: block !important;
  }

  /* 导航条：logo 居左 + 汉堡按钮居右 */
  .inspire-responsive-nav .inspire-responsive-menu.mean-container {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
  }

  /* logo 左侧（原响应式 logo 无高度约束，399x100 会溢出，需限制） */
  .inspire-responsive-nav .logo {
    order: 1;
    flex: 0 0 auto;
    margin: 0 !important;
    display: flex;
    align-items: center;
    max-width: 72%;
  }
  .inspire-responsive-nav .logo img {
    height: 38px;
    width: auto;
    max-width: 100%;
    display: block;
  }

  /* mean-bar 只放汉堡按钮，推到最右侧 */
  .inspire-responsive-nav .mean-container .mean-bar {
    order: 2;
    position: static !important;
    float: none !important;
    width: auto !important;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    background: transparent;
    margin-left: auto;
  }

  /* 汉堡按钮本体：覆盖 meanmenu 的 absolute / text-indent 干扰 */
  .inspire-responsive-nav .mean-container a.meanmenu-reveal {
    position: static !important;
    right: auto !important;
    left: auto !important;
    display: block !important;
    width: 30px !important;
    height: 24px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer;
    box-sizing: border-box !important;
  }
  .inspire-responsive-nav .mean-container a.meanmenu-reveal span {
    display: block !important;
    width: 26px !important;
    height: 3px !important;
    background: #333333 !important;
    margin: 4px 0 !important;
    border-radius: 2px;
  }

  /* 展开的菜单整块贴在导航条下方（脱离文档流，不挤压汉堡按钮） */
  .inspire-responsive-nav .mean-container .mean-nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    float: none !important;
    background: #ffffff;
    z-index: 1000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
  .inspire-responsive-nav .mean-nav ul li a {
    color: #333333;
    padding: 12px 16px;
  }
}

/* ===== 首页大标题 / flickity fade 位移修正 ===== */
@media (max-width: 991px) {
  /* flickity fade 会设 slider translateX(50%) + cell left:-50%，窄屏下两者
     不抵消导致整块内容右移；这里改为标准 fade：slider 不位移、单元格铺满 */
  .home-slider.is-fade .flickity-slider {
    transform: none !important;
    left: 0 !important;
  }
  .home-slider.is-fade .flickity-slider > .home-slider-single-item {
    left: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .home-slider-area,
  .home-slider,
  .flickity-viewport {
    overflow: hidden;
    max-width: 100vw;
  }
  .home-slider-single-item .container {
    max-width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  .home-slider-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
  }
  .home-slider-title {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-size: 22px !important;
    line-height: 1.45;
  }
  .home-slider-description {
    white-space: normal !important;
    font-size: 15px !important;
  }
}