/* ============================================================
   index.css — 院级成果公开展示页专属样式
   职责：定义成果列表容器、成果卡片（圆角 / 左侧 accent 色条 /
         置顶标签 / 摘要两行截断）、骨架屏占位与空态相关样式。
   引入顺序：在 theme.css、common.css、Vant CSS 之后引入。
   注意：卡片圆角单独覆盖为 10px，不污染全局 --van-radius-md。
   ============================================================ */

/* --- 顶部搜索栏：移动端 Logo + 菜单按钮，PC 端 Logo + 搜索 + 操作按钮 --- */
/**
 * 搜索栏容器
 * 粘性定位（sticky）在视口顶部，滚动时始终可见
 * z-index: 10 确保覆盖列表内容
 * 固定高度 50px
 */
.search-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--van-background, #F8FAFB);
  padding: 0 16px;
  height: 50px;
  padding-top: env(safe-area-inset-top);
  box-shadow: var(--shadow-raised);
  display: flex;
  align-items: center;
}

/* 覆盖 Vant Search 组件默认内边距 */
.search-bar .van-search {
  padding: 0;
  background: transparent;
}

/* 覆盖 action slot 默认右侧内边距，使按钮右侧与卡片右边框对齐 */
.search-bar .van-search__action {
  padding: 0 0 0 8px;
}

/* 搜索输入框背景改为白色圆角 */
.search-bar .van-search__content {
  background-color: var(--van-background-2, #FFFFFF);
  border-radius: 24px;
}

/**
 * 搜索栏右侧筛选按钮
 * 使用 Tabler Icons + 文字，垂直居中排列
 */
.filter-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 8px;
  color: var(--van-primary-color, #1989FA);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.filter-btn .ti {
  font-size: 18px;
}

/* 搜索栏内联重置按钮：激活时以主题色高亮 */
.filter-btn--inline-reset {
  color: var(--van-primary-color, #1989FA);
}

/* 禁用状态：无筛选条件时置灰且不可点击 */
.filter-btn--inline-reset.is-disabled {
  color: var(--van-text-color-3, #C8C9CC);
  cursor: not-allowed;
}

/**
 * 手机端头部：Logo + 汉堡菜单
 * Logo 和 汉堡菜单 两端对齐
 */
.search-bar__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: transparent;
}

/**
 * 手机端 Logo
 */
.search-bar__logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

/**
 * 手机端汉堡菜单按钮
 */
.search-bar__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--van-primary-color, #1989FA);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.search-bar__menu-btn:active {
  opacity: 0.7;
}

.search-bar__menu-btn .ti-filter-2-search {
  font-size: 28px;
}

/**
 * PC端内容区：Logo + 搜索栏
 * 默认隐藏，仅在 PC 端显示
 */
.search-bar__desktop-content {
  display: none;
  align-items: center;
  gap: 16px;
}

/**
 * PC端 Logo
 */
.search-bar__logo--desktop {
  height: 32px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* --- 响应式：PC 端（≥768px）显示 desktop-content，隐藏移动端 header 和独立搜索栏 --- */
@media (min-width: 768px) {
  /* 隐藏手机端头部 */
  .search-bar__mobile-header {
    display: none;
  }

  /* 显示 PC 端内容 */
  .search-bar__desktop-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
  }

  /* PC 端搜索栏容器样式调整 */
  .search-bar {
    padding: 0 24px;
    background-color: var(--van-background, #F8FAFB);
  }

  /* PC 端搜索栏宽度 */
  .search-bar .van-search {
    flex: 1;
    max-width: 600px;
  }
}

/* --- 排序切换胶囊 --- */
/* 胶囊容器：横向排列，左对齐 */
.sort-pills {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
}

/* 单个排序胶囊：圆角 999px，未选中透明背景 */
.sort-pill {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background-color: transparent;
  color: var(--van-text-color-2, #5A6B7A);
  font-size: 13px;
  cursor: pointer;
}

/* 选中态：accent-light 背景 + accent 文字 */
.sort-pill--active {
  background-color: var(--van-active-color, #EAF2FF);
  color: var(--van-primary-color, #1989FA);
  font-weight: 600;
}

/* --- 已筛选标签条 --- */
/* 标签容器：横向折行排列 */
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* 单个筛选标签：圆角小药丸 */
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px 0 10px;
  border-radius: 999px;
  background-color: var(--van-active-color, #EAF2FF);
  color: var(--van-primary-color, #1989FA);
  font-size: 12px;
}

/* 标签内关闭图标 */
.filter-tag .ti-x {
  font-size: 13px;
  cursor: pointer;
}

/* 清除全部链接 */
.filter-tags__clear {
  font-size: 12px;
  color: var(--van-text-color-3, #8A9AAA);
  cursor: pointer;
}

/* --- 底部筛选面板（参照 tmp.html 结构：拖拽条 + 标题 + 关键词 + 选项行 + 底部按钮） --- */
/* 面板容器：白色背景，顶部 16px 圆角 */
.filter-panel {
  padding: 0 16px 16px;
  background-color: var(--van-background-2, #FFFFFF);
  max-height: 75vh;
  overflow-y: auto;
}

/* 顶部拖拽指示条 */
.filter-panel__drag-bar {
  width: 36px;
  height: 4px;
  background-color: var(--van-gray-5, #C8C9CC);
  border-radius: 2px;
  margin: 8px auto 12px;
}

/* 面板头部：标题 + 关闭 */
.filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* 面板标题 */
.filter-panel__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--van-text-color, #1A2B3C);
}

/* 关闭图标 */
.filter-panel__header .ti-x {
  font-size: 20px;
  color: var(--van-text-color-2, #5A6B7A);
  cursor: pointer;
}

/* 关键词输入框（van-field 样式微调） */
.filter-field.van-field {
  --van-cell-horizontal-padding: 0px;
  min-height: 48px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--van-border-color, #EBEDF0);
  border-radius: 8px;
  background-color: #FFFFFF;
}

.filter-field.van-field .van-field__label {
  width: 80px;
  margin-right: 0;
  color: var(--van-text-color-2, #5A6B7A);
}

.filter-field.van-field .van-field__control {
  color: var(--van-text-color, #1A2B3C);
}

/* 选项行：标签 + 当前值 + 下拉箭头 */
.filter-row {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--van-border-color, #EBEDF0);
  border-radius: 8px;
  background-color: #FFFFFF;
  cursor: pointer;
}

/* 选项行标签 */
.filter-row__label {
  width: 80px;
  font-size: 14px;
  color: var(--van-text-color-2, #5A6B7A);
  flex-shrink: 0;
}

/* 选项行当前值 */
.filter-row__value {
  flex: 1;
  font-size: 14px;
  color: var(--van-text-color, #1A2B3C);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 选项行下拉箭头 */
.filter-row__icon {
  margin-left: 4px;
  font-size: 16px;
  color: var(--van-text-color-3, #8A9AAA);
  flex-shrink: 0;
}

/* 面板底部操作区：重置 + 确认 */
.filter-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

/* 重置按钮 */
.filter-btn--reset {
  flex: 1;
  height: 48px;
  border-radius: 8px;
  border-color: var(--van-border-color, #EBEDF0);
  color: var(--van-text-color-2, #5A6B7A);
}

/* 确认按钮 */
.filter-btn--confirm {
  flex: 1;
  height: 48px;
  border-radius: 8px;
}

/* --- Banner 轮播区 --- */
/* 轮播容器：圆角卡片，固定 3:1 比例；左右留 16px 与列表对齐，不占满屏 */
.banner-section {
  margin: 12px 16px 0;
  border-radius: 10px;
  overflow: hidden;
}

/* 轮播主体 */
.banner-swipe {
  width: 100%;
  aspect-ratio: 3 / 1;
  background: var(--van-gray-2, #f2f3f5);
}

/* 单张轮播图：铺满容器 */
.banner-image {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

/* 轮播指示器：底部右侧，主色 #1989FA（与主题强调色一致） */
.banner-swipe .van-swipe__indicators {
  bottom: 8px;
  left: auto;
  right: 12px;
  transform: none;
}

.banner-swipe .van-swipe__indicator {
  background-color: rgba(255, 255, 255, 0.5);
}

.banner-swipe .van-swipe__indicator--active {
  background-color: #1989FA;
}

/* --- 成果列表容器（同时是 van-list 元素，承载卡片间距） --- */
.achievement-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- 成果卡片 --- */
.achievement-card {
  position: relative;
  /* 单独覆盖圆角，不污染全局 --van-radius-md */
  border-radius: 10px;
  padding: 14px 16px;
  overflow: hidden;
}

/* 下方内容区：左侧色条 + 文字（flex 横向排列） */
.achievement-card__body {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

/* 文字内容区：占据剩余空间 */
.achievement-card__content {
  flex: 1;
  min-width: 0;
}

/* 封面图容器：相对定位，承载叠加在封面上的置顶标签 */
.achievement-card__cover-wrap {
  position: relative;
  margin: -14px -16px 12px -16px;
  overflow: hidden;
}

/* 封面图（顶部通栏，与卡片圆角上缘对齐） */
.achievement-card__cover {
  display: block;
  width: 100%;
}

/* 卡片标题行 */
.achievement-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 标题（subtitle 级） */
.achievement-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--van-text-color, #1A2B3C);
  line-height: 1.4;
}

/* 置顶标签（Pinned：明亮红 #E91E63），叠加在封面图左上角 */
.pinned-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 12px;
  line-height: 1;
  color: #FFFFFF;
  background-color: #E91E63;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* 学院 + 时间（meta 级） */
.achievement-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--van-text-color-2, #5A6B7A);
}

.achievement-card__meta .dot {
  color: var(--van-text-color-3, #8A9AAA);
}

/* 活动主题标签（tag 级） */
.achievement-card__tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-accent, #0066CC);
  background-color: rgba(0, 102, 204, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

/* 互动数据条（点赞 / 收藏 / 评论） */
.achievement-card__stats {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

/* 单个互动项 */
.stat-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--van-text-color-2, #5A6B7A);
}

/* 互动项图标 */
.stat-item .ti {
  font-size: 15px;
  line-height: 1;
}

/* --- 骨架屏卡片占位 --- */
.achievement-card--skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.skeleton-line {
  height: 14px;
  border-radius: 4px;
}

/* 骨架屏列表整体间距 */
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- 滚动通知条（参照 temp/index.css：notice-section / notice-bar） --- */

/**
 * 通知栏区域容器
 * 位于 Banner 下方、活动列表上方
 */
.notice-section {
  margin: 12px 16px;
}

/**
 * 通知条本体
 * accent-light 背景，圆角，flex 横向排列
 */
.notice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  background-color: var(--van-active-color, #EAF2FF);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  cursor: pointer;
}

/* 左侧 accent 竖线标识 */
.notice-bar__indicator {
  width: 3px;
  height: 16px;
  background-color: var(--van-primary-color, #1989FA);
  border-radius: 2px;
  flex-shrink: 0;
}

/* 通知文字内容区：占据剩余空间，单行省略 */
.notice-bar__content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* 通知文字 */
.notice-bar__text {
  display: block;
  font-size: 14px;
  color: var(--van-text-color, #1A2B3C);
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧箭头图标 */
.notice-bar__arrow {
  font-size: 16px;
  color: var(--van-text-color-3, #8A9AAA);
  flex-shrink: 0;
}