/* 快捷导航模块整体样式 - 精准还原Tailwind */
.background-overlay1 {
  padding: 2rem /* py-8 */ 1rem /* px-4 */;
}
/* Tailwind默认sm断点：640px */
@media (min-width: 640px) {
  .background-overlay1 {
    padding: 3rem /* sm:py-12 */ 1.5rem /* sm:px-6 */;
  }
}
/* Tailwind默认lg断点：1024px */
@media (min-width: 1024px) {
  .background-overlay1 {
    padding: 3rem 2rem /* lg:px-8 */;
  }
}

.max-w-5xl {
  max-width: 64rem /* max-w-5xl原生值 */;
  margin: 0 auto;
  position: relative;
  z-index: 10; /* z-10 */
}

/* 快捷导航容器 - 网格布局精准还原 */
.quick-links-container1 {
  display: grid;
  /* 复刻Tailwind的auto-fit + minmax */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem /* 原gap值，可调整：比如1.5rem=24px，2rem=32px */;
  width: 100%;
}

/* 快捷导航项卡片 - 1:1还原Tailwind样式 */
.quick-link-item1 {
  background: rgba(255, 255, 255, 0.9) /* bg-white/90 */;
  backdrop-filter: blur(12px) /* backdrop-blur-md */;
  border-radius: 0.75rem /* rounded-xl */;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) /* shadow-lg */;
  padding: 0.5rem /* p-2 */ 0.5rem /* p-2 */;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(240 249 255 / 1) /* border-blue-100 */;
  transition: all 200ms ease /* transition-all duration-200 */;
  text-decoration: none; /* 去掉a标签默认下划线 */
}

/* sm断点下的卡片样式 */
@media (min-width: 640px) {
  .quick-link-item1 {
    border-radius: 1rem /* sm:rounded-2xl */;
    padding: 1.25rem /* sm:p-5 */;
  }
}

/* 各导航项的hover效果 - 精准匹配Tailwind颜色 */
/* 第1个：工作动态 - blue */
.quick-link-item1:nth-child(1):hover {
  background: rgba(239, 246, 255, 0.8) /* hover:bg-blue-50/80 */;
  border-color: rgb(219, 234, 254) /* border-blue-100 */;
}
/* 第2个：学习园地 - green */
.quick-link-item1:nth-child(2):hover {
  background: rgba(240, 253, 244, 0.8) /* hover:bg-green-50/80 */;
  border-color: rgb(220, 252, 231) /* border-green-100 */;
}
/* 第3个：青教赛 - purple */
.quick-link-item1:nth-child(3):hover {
  background: rgba(245, 243, 255, 0.8) /* hover:bg-purple-50/80 */;
  border-color: rgb(233, 213, 255) /* border-purple-100 */;
}
/* 第4个：榜样的力量 - yellow */
.quick-link-item1:nth-child(4):hover {
  background: rgba(254, 249, 195, 0.8) /* hover:bg-yellow-50/80 */;
  border-color: rgb(252, 241, 188) /* border-yellow-100 */;
}
/* 第5个：协会活动 - red */
.quick-link-item1:nth-child(5):hover {
  background: rgba(254, 242, 242, 0.8) /* hover:bg-red-50/80 */;
  border-color: rgb(254, 226, 226) /* border-red-100 */;
}

/* 图标样式 */
.quick-link-icon1 {
  margin-bottom: 0.25rem /* mb-1 */;
  color: rgb(37, 99, 235) /* text-blue-600 */;
  font-size: 0.875rem /* text-sm */;
}
@media (min-width: 640px) {
  .quick-link-icon1 {
    margin-bottom: 0.75rem /* sm:mb-3 */;
    font-size: 1.25rem /* sm:text-xl */;
  }
}
/* 单独给每个图标设置对应颜色 */
.quick-link-item1:nth-child(2) .quick-link-icon1 { color: rgb(22, 163, 74) /* text-green-600 */; }
.quick-link-item1:nth-child(3) .quick-link-icon1 { color: rgb(147, 51, 234) /* text-purple-600 */; }
.quick-link-item1:nth-child(4) .quick-link-icon1 { color: rgb(202, 138, 4) /* text-yellow-600 */; }
.quick-link-item1:nth-child(5) .quick-link-icon1 { color: rgb(220, 38, 38) /* text-red-600 */; }

/* 标题样式 */
.quick-link-title1 {
  font-size: 0.75rem /* text-xs */;
  font-weight: 600 /* font-semibold */;
  color: rgb(30, 64, 175) /* text-blue-800 */;
}
@media (min-width: 640px) {
  .quick-link-title1 {
    font-size: 1.125rem /* sm:text-lg */;
  }
}
/* 单独给每个标题设置对应颜色 */
.quick-link-item1:nth-child(2) .quick-link-title1 { color: rgb(21, 128, 61) /* text-green-800 */; }
.quick-link-item1:nth-child(3) .quick-link-title1 { color: rgb(107, 33, 168) /* text-purple-800 */; }
.quick-link-item1:nth-child(4) .quick-link-title1 { color: rgb(146, 64, 14) /* text-yellow-800 */; }
.quick-link-item1:nth-child(5) .quick-link-title1 { color: rgb(153, 27, 27) /* text-red-800 */; }

/* 描述文字样式 */
.quick-link-item1 p {
  font-size: 0.6rem /* text-[0.6rem] */;
  color: rgba(37, 99, 235, 0.8) /* text-blue-600/80 */;
  margin-top: 0.125rem /* mt-0.5 */;
  display: none /* hidden */;
}
@media (min-width: 640px) {
  .quick-link-item1 p {
    font-size: 0.875rem /* sm:text-sm */;
    margin-top: 0.25rem /* sm:mt-1 */;
    display: block /* sm:block */;
  }
}
/* 单独给每个描述文字设置对应颜色 */
.quick-link-item1:nth-child(2) p { color: rgba(22, 163, 74, 0.8) /* text-green-600/80 */; }
.quick-link-item1:nth-child(3) p { color: rgba(147, 51, 234, 0.8) /* text-purple-600/80 */; }
.quick-link-item1:nth-child(4) p { color: rgba(202, 138, 4, 0.8) /* text-yellow-600/80 */; }
.quick-link-item1:nth-child(5) p { color: rgba(220, 38, 38, 0.8) /* text-red-600/80 */; }