/* ==========================================================================
   快捷入口条（Quick Navigation）—— 紧凑居中版
   教师教育学院官网 dist/css/index.css

   问题：原样式 .quick-nav-item { padding: 20px 28px } + flex-shrink: 0，
        6 个入口的内容总宽 1289px，而 .container 最大只有 1280px，
        导致横向溢出（overflow-x: auto 隐藏滚动条 → 用户"看不全"）。
        且容器无 justify-content，溢出时内容从左起排，不居中。

   方案：项目改为等分伸缩（flex: 1 1 0），容器居中（justify-content: center），
        压缩左右内边距与图标尺寸，小屏逐级降级。

   用法：把本段追加到 dist/css/index.css 末尾（或替换原 233-280 行区块）。
   ========================================================================== */

/* ===== 桌面端：紧凑 + 等分 + 居中 ===== */
.quick-nav .container {
  justify-content: center;
}

.quick-nav-item {
  flex: 1 1 0;          /* 等分剩余空间，不再靠固定内边距撑宽 */
  min-width: 0;         /* 允许项目收缩到内容以下，避免撑破容器 */
  padding: 18px 10px;   /* 左右内边距由 28px 收到 10px */
  gap: 9px;             /* 图标与文字间距 12px → 9px */
}

.quick-nav-item .icon {
  width: 32px;          /* 图标 36px → 32px */
  height: 32px;
}

.quick-nav-item .text {
  min-width: 0;         /* 允许文字块收缩，触发省略号而非溢出 */
}

.quick-nav-item .text .title {
  font-size: 13px;      /* 14px → 13px */
  white-space: nowrap;
}

.quick-nav-item .text .desc {
  font-size: 11px;      /* 12px → 11px */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 平板（≤1024px）：隐藏描述文字，压缩为图标+标题 ===== */
@media (max-width: 1024px) {
  .quick-nav-item {
    padding: 14px 8px;
    gap: 8px;
  }
  .quick-nav-item .icon {
    width: 28px;
    height: 28px;
  }
  .quick-nav-item .text .desc {
    display: none;
  }
}

/* ===== 手机（≤760px）：图标在上、文字在下 ===== */
@media (max-width: 760px) {
  .quick-nav-item {
    flex-direction: column;
    gap: 6px;
    padding: 12px 4px;
    text-align: center;
  }
  .quick-nav-item .text .title {
    font-size: 12px;
  }
}