/**
 * 滑动导航组件样式 (AeroCore)
 *
 * 100% 像素级复刻 X8XX/SOTMS 原图高颜值网格导航：
 * - 5卡片移动端 3+2 智能对称平衡美化算法 (解决单独1块尴尬不美观痛点)
 * - 3大移动端智能适配模式 (手势横向滑动切卡、智能折行、微缩平挤)
 * - 单排 3-6 块导航卡片
 * - 文字与图标间距、字体大小随卡片宽度自适应伸缩调节
 * - 鼠标离开全自动平滑恢复等宽 (绝不锁死，无需点击别处)
 * - 纯透明无边框网格 (隐藏外侧白色背景框)
 * - 独立亮丽悬浮流光扫光特效 (Shimmer Light Sweep)
 * - 白点点阵纹理 (Dot Matrix Overlay)
 * - 右侧柔和半透明高光圆弧 (Radial Glow Overlay)
 * - 粗线条文字下划线修饰 (Thick Underline Accent)
 * - 右侧半透明水印图标 (Subtle Translucent Icon)
 * @version 3.5.0
 */

/* ============================================================
   1. 外层容器 (支持隐藏外侧白色卡片边框)
   ============================================================ */

.wifilu-com-huadong-nav-wrapper {
  margin-bottom: 16px;
  box-sizing: border-box;
}

.wifilu-com-huadong-nav-wrapper:last-child {
  margin-bottom: 0;
}

/* 1.1 纯透明无框网格模式 (默认) */
.wifilu-com-huadong-nav-wrapper--clean {
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 1.2 白色卡片外框模式 */
.wifilu-com-huadong-nav-wrapper--card {
  padding: 14px 16px;
  background: var(--bg-card, #ffffff);
  border-radius: var(--border-radius, 16px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}

/* 跟随滚动固定类 */
.wifilu-com-huadong-nav-wrapper--sticky {
  position: sticky;
  top: 76px;
  z-index: 10;
}

/* 开启 CSS 容器查询支持 */
.wifilu-com-huadong-nav {
  container-type: inline-size;
}

/* ============================================================
   2. 导航卡片网格 (.sotms-quick-links-grid)
   ============================================================ */

.sotms-quick-links-grid,
.wifilu-com-huadong-nav__grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100%;
  box-sizing: border-box;
}

/* 强制单排 3, 4, 5, 6 个导航块平铺 */
.wifilu-com-huadong-nav__grid--cols-3 .sotms-quick-link-card {
  flex: 1 1 33.333%;
}

.wifilu-com-huadong-nav__grid--cols-4 .sotms-quick-link-card {
  flex: 1 1 25%;
}

.wifilu-com-huadong-nav__grid--cols-5 .sotms-quick-link-card {
  flex: 1 1 20%;
}

.wifilu-com-huadong-nav__grid--cols-6 .sotms-quick-link-card {
  flex: 1 1 16.666%;
  padding: 8px 10px;
}

/* ============================================================
   3. 移动端 3 大手机适配模式与 5 卡片对称算法 (@media max-width: 600px)
   ============================================================ */

/* 3.1 移动端手势横向滑动模式 (mobile-scroll - 推荐极客方案) */
@media (max-width: 600px) {
  .wifilu-com-huadong-nav__grid--mobile-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    margin-bottom: -4px;
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
  }

  .wifilu-com-huadong-nav__grid--mobile-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隐藏滚动条 */
  }

  .wifilu-com-huadong-nav__grid--mobile-scroll .sotms-quick-link-card {
    flex: 0 0 clamp(95px, 28vw, 120px) !important;
    min-width: 90px !important;
    scroll-snap-align: start;
  }
}

/* 3.2 移动端智能折行模式 (mobile-wrap) */
@media (max-width: 480px) {
  .wifilu-com-huadong-nav__grid--mobile-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* 默认 4块/6块 在手机端 2 列均匀平铺 (每块 50%) */
  .wifilu-com-huadong-nav__grid--mobile-wrap .sotms-quick-link-card {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 120px;
  }

  /* 🔥 特殊 5 卡片 3+2 完美对称布局算法 (解决单独 1 块落单不美观痛点) */
  .wifilu-com-huadong-nav__grid--cols-5.wifilu-com-huadong-nav__grid--mobile-wrap .sotms-quick-link-card:nth-child(-n+3) {
    flex: 1 1 calc(33.333% - 6px) !important; /* 第一排 3 块等宽平分 */
    min-width: 80px;
  }

  .wifilu-com-huadong-nav__grid--cols-5.wifilu-com-huadong-nav__grid--mobile-wrap .sotms-quick-link-card:nth-child(n+4) {
    flex: 1 1 calc(50% - 6px) !important; /* 第二排 2 块大气平分 */
  }

  /* 3 卡片在手机端上第一排 2 块，第二排第 3 块 100% 满宽通栏 */
  .wifilu-com-huadong-nav__grid--cols-3.wifilu-com-huadong-nav__grid--mobile-wrap .sotms-quick-link-card:nth-child(3) {
    flex: 1 1 100% !important;
  }
}

/* 3.3 移动端微缩挤平模式 (mobile-compact) */
@media (max-width: 480px) {
  .wifilu-com-huadong-nav__grid--mobile-compact .sotms-quick-link-card {
    padding: 6px 4px;
  }

  .wifilu-com-huadong-nav__grid--mobile-compact .sotms-quick-link-text {
    font-size: 11.5px;
  }

  .wifilu-com-huadong-nav__grid--mobile-compact .sotms-quick-link-icon {
    width: 16px;
    height: 16px;
    margin-left: 2px;
  }
}

/* ============================================================
   4. 动态滑动伸缩与全自动恢复 (.wifilu-com-huadong-nav__grid--sliding)
   ============================================================ */

.wifilu-com-huadong-nav__grid--sliding .sotms-quick-link-card {
  flex: 1 1 0%;
  min-width: 0;
  /* 0.5s 超平滑 cubic-bezier 曲线，保证鼠标离开后全自动缓缓变回默认等宽，绝不残存锁定 */
  transition: flex 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              filter 0.3s ease,
              opacity 0.3s ease,
              padding 0.3s ease;
}

/* 鼠标移入容器时：未处于悬浮/点击的卡片平滑微缩小 */
.wifilu-com-huadong-nav__grid--sliding:hover .sotms-quick-link-card {
  flex: 0.72 1 0%;
  opacity: 0.88;
}

/* 仅在鼠标当前处于 :hover 或 :active 按下状态时变长 (鼠标离开即自然失效恢复) */
.wifilu-com-huadong-nav__grid--sliding .sotms-quick-link-card:hover,
.wifilu-com-huadong-nav__grid--sliding .sotms-quick-link-card:active {
  flex: 1.85 1 0% !important;
  opacity: 1 !important;
}

/* 悬停变长时，卡片内边距与图标间距自动拓展 */
.wifilu-com-huadong-nav__grid--sliding .sotms-quick-link-card:hover .sotms-quick-link-icon {
  margin-left: 10px;
  transform: scale(1.12);
  opacity: 0.88;
}

/* ============================================================
   5. 导航卡片基础样式 (.sotms-quick-link-card)
   ============================================================ */

.sotms-quick-link-card,
.wifilu-com-huadong-nav__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px clamp(6px, 2.5cqw, 14px);
  border-radius: 14px;
  color: #ffffff !important;
  text-decoration: none !important;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 5.1 点阵网格纹理层 (Dot Matrix Texture) */
.sotms-quick-link-card::before,
.wifilu-com-huadong-nav__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1.2px, transparent 1.2px);
  background-size: 7px 7px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

/* 5.2 右侧柔和半透明高光圆弧 (Radial Glow) */
.sotms-quick-link-card::after,
.wifilu-com-huadong-nav__card::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 75%;
  height: 140%;
  background: radial-gradient(circle at 65% 50%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* ============================================================
   6. 独立悬浮流光扫光特效 (.wifilu-com-huadong-nav__shimmer)
   ============================================================ */

.wifilu-com-huadong-nav__shimmer {
  position: absolute;
  top: -60%;
  left: -90%;
  width: 60%;
  height: 220%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

/* 悬浮或点击按下时触发闪耀流光划过卡片 */
.wifilu-com-huadong-nav__grid--shimmer .sotms-quick-link-card:hover .wifilu-com-huadong-nav__shimmer,
.wifilu-com-huadong-nav__grid--shimmer .sotms-quick-link-card:active .wifilu-com-huadong-nav__shimmer {
  opacity: 1;
  left: 140%;
}

/* ============================================================
   7. 卡片内部文本与粗下划线（文字图标自适应调节）
   ============================================================ */

.sotms-quick-link-content,
.wifilu-com-huadong-nav__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}

/* 卡片标题文字 (白字加粗, 随卡片宽度智能缩放) */
.sotms-quick-link-text,
.wifilu-com-huadong-nav__text {
  font-size: clamp(12px, 3.2cqw, 14.5px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 粗线条下划线修饰 (自适应长度) */
.sotms-quick-link-decoration,
.wifilu-com-huadong-nav__decoration {
  display: block;
  width: clamp(14px, 4cqw, 22px);
  height: 3.5px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 2px;
  margin-top: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* ============================================================
   8. 右侧水印图标 (间距随卡片大小自动调整)
   ============================================================ */

.sotms-quick-link-icon,
.wifilu-com-huadong-nav__icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(18px, 4.5cqw, 24px);
  height: clamp(18px, 4.5cqw, 24px);
  flex-shrink: 0;
  color: #ffffff;
  opacity: 0.55;
  margin-left: clamp(3px, 1.8cqw, 8px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.3s ease;
}

.sotms-quick-icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

.sotms-quick-icon path {
  fill: currentColor;
}

.sotms-quick-link-icon i {
  font-size: clamp(16px, 4.2cqw, 20px);
  line-height: 1;
}

/* ============================================================
   9. 热门角标 (.wifilu-com-huadong-nav__badge)
   ============================================================ */

.wifilu-com-huadong-nav__badge {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-bottom-left-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 4;
}

/* ============================================================
   10. 外观圆角变体 (card_shape)
   ============================================================ */

/* 优雅圆角 (14px - 默认复刻) */
.wifilu-com-huadong-nav__grid--shape-rounded .sotms-quick-link-card {
  border-radius: 14px;
}

/* 胶囊大圆角 (20px) */
.wifilu-com-huadong-nav__grid--shape-pill .sotms-quick-link-card {
  border-radius: 20px;
}

/* 极简小圆角 (6px) */
.wifilu-com-huadong-nav__grid--shape-flat .sotms-quick-link-card {
  border-radius: 6px;
}

/* 硬朗徽章 (3px) */
.wifilu-com-huadong-nav__grid--shape-badge .sotms-quick-link-card {
  border-radius: 3px;
}

/* ============================================================
   11. 悬浮与按压交互动效 (hover_effect - 鼠标离开自然复原)
   ============================================================ */

/* 向上轻微浮动 (lift - 推荐) */
.wifilu-com-huadong-nav__grid--hover-lift .sotms-quick-link-card:hover,
.wifilu-com-huadong-nav__grid--hover-lift .sotms-quick-link-card:active {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.wifilu-com-huadong-nav__grid--hover-lift .sotms-quick-link-card:hover .sotms-quick-link-decoration,
.wifilu-com-huadong-nav__grid--hover-lift .sotms-quick-link-card:active .sotms-quick-link-decoration {
  width: clamp(20px, 6cqw, 30px);
}

.wifilu-com-huadong-nav__grid--hover-lift .sotms-quick-link-card:hover::after,
.wifilu-com-huadong-nav__grid--hover-lift .sotms-quick-link-card:active::after {
  transform: scale(1.2);
  opacity: 0.9;
}

/* 微放大 (scale) */
.wifilu-com-huadong-nav__grid--hover-scale .sotms-quick-link-card:hover,
.wifilu-com-huadong-nav__grid--hover-scale .sotms-quick-link-card:active {
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

/* 霓虹发光 (glow) */
.wifilu-com-huadong-nav__grid--hover-glow .sotms-quick-link-card:hover,
.wifilu-com-huadong-nav__grid--hover-glow .sotms-quick-link-card:active {
  filter: brightness(1.08);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.45);
}

/* 3D 浮雕倾斜 (tilt) */
.wifilu-com-huadong-nav__grid--hover-tilt .sotms-quick-link-card:hover,
.wifilu-com-huadong-nav__grid--hover-tilt .sotms-quick-link-card:active {
  transform: perspective(400px) rotateX(4deg) rotateY(-4deg) translateY(-2px);
  box-shadow: -4px 8px 20px rgba(0, 0, 0, 0.2);
}

/* 保持静止 (none) */
.wifilu-com-huadong-nav__grid--hover-none .sotms-quick-link-card:hover {
  opacity: 0.92;
}

/* 键盘焦点可访问性 */
.sotms-quick-link-card:focus-visible {
  outline: 2px solid var(--theme-color, #4f46e5);
  outline-offset: 2px;
}

/* ============================================================
   12. 响应式与 Container Queries 补强
   ============================================================ */

@container (max-width: 260px) {
  .wifilu-com-huadong-nav__grid:not(.wifilu-com-huadong-nav__grid--mobile-scroll) {
    flex-wrap: wrap !important;
  }

  .wifilu-com-huadong-nav__grid:not(.wifilu-com-huadong-nav__grid--mobile-scroll) .sotms-quick-link-card {
    flex: 1 1 45% !important;
  }

  .sotms-quick-link-card {
    padding: 6px 8px;
    height: 46px;
    min-height: 46px;
  }

  .sotms-quick-link-text {
    font-size: 12px;
  }

  .sotms-quick-link-decoration {
    width: 14px;
    height: 3px;
  }

  .sotms-quick-link-icon {
    width: 18px;
    height: 18px;
    margin-left: 3px;
  }
}

/* ============================================================
   13. 暗黑模式对比度优化
   ============================================================ */

[data-theme="dark"] .sotms-quick-link-card,
.dark .sotms-quick-link-card {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .wifilu-com-huadong-nav-wrapper--card,
.dark .wifilu-com-huadong-nav-wrapper--card {
  background: var(--bg-card, #1e293b);
  border-color: var(--border-primary, #334155);
}