/* 信息列表容器 */
.messages-container {
  min-height: auto;
  padding: var(--spacing-xl) 0 !important;
  background: var(--theme-gradient-background) !important;
}

/* 分类头部区域 */
.category-header {
  margin-bottom: var(--spacing-xl) !important;
  text-align: center !important;
}

/* 分类标题 */
.category-title {
  color: var(--theme-gray-800) !important;
  margin: 0 0 var(--spacing-lg) 0 !important;
  padding-bottom: var(--spacing-sm) !important;
  border-bottom: 2px solid var(--theme-gray-300) !important;
  font-size: var(--font-size-4xl) !important;
  font-weight: var(--font-weight-bold) !important;
  display: inline-block !important;
  min-width: 200px !important;
}

/* 信息数量显示 */
.messages-count {
  color: var(--theme-gray-600) !important;
  font-size: var(--font-size-xl) !important;
  margin-top: var(--spacing-sm) !important;
  font-weight: var(--font-weight-medium) !important;
}

.count-number {
  color: var(--theme-primary) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-size: 1.1em !important;
}

/* 错误提示页面样式 */
.category-redirect-notice,
.category-not-found {
  max-width: 600px !important;
  margin: var(--spacing-2xl) auto !important;
  padding: var(--spacing-xl) !important;
  background: var(--card-bg) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  text-align: center !important;
  border: 1px solid var(--theme-gray-300) !important;
}

.notice-icon {
  font-size: 3rem !important;
  margin-bottom: var(--spacing-lg) !important;
}

.notice-title {
  color: var(--theme-gray-800) !important;
  font-size: var(--font-size-2xl) !important;
  font-weight: var(--font-weight-semibold) !important;
  margin: 0 0 var(--spacing-lg) 0 !important;
}

.notice-message {
  color: var(--theme-gray-600) !important;
  font-size: var(--font-size-base) !important;
  line-height: 1.6 !important;
  margin-bottom: var(--spacing-xl) !important;
}

.category-list {
  margin: var(--spacing-xl) 0 !important;
  text-align: left !important;
}

.category-list h3 {
  color: var(--theme-gray-800) !important;
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-semibold) !important;
  margin: 0 0 var(--spacing-lg) 0 !important;
  text-align: center !important;
}

.category-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: var(--spacing-sm) !important;
}

.category-links li {
  margin: 0 !important;
}

.back-to-home {
  margin-top: var(--spacing-xl) !important;
  padding-top: var(--spacing-lg) !important;
  border-top: 1px solid var(--theme-gray-300) !important;
}

/* 信息网格布局 */
.messages-grid {
  display: grid !important;
  grid-template-columns: var(--card-grid-columns) !important;
  gap: var(--card-grid-gap) !important;
  margin-bottom: var(--spacing-2xl) !important;
}

/* 信息项目 */
.message-item {
  background: var(--card-bg) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
  overflow: hidden !important;
}

.message-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* 信息链接 */
.message-link {
  display: block !important;
  color: inherit !important;
  text-decoration: none !important;
}

.message-link:hover {
  color: inherit !important;
  text-decoration: none !important;
}

/* 信息卡片 */
.message-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* 图片容器 */
.message-image-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: var(--image-aspect-ratio) !important;
  overflow: hidden !important;
  background-color: var(--theme-gray-100) !important;
}

/* 现代浏览器的 aspect-ratio 支持 */
@supports (aspect-ratio: 1) {
  .message-image-wrapper {
    height: auto !important;
    padding-bottom: 0 !important;
    aspect-ratio: 900 / 383 !important;
  }
}

/* 信息特色图片 */
.message-feature-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

.message-item:hover .message-feature-image {
  transform: scale(1.05) !important;
}

/* 信息内容 */
.message-content {
  padding: var(--card-content-padding) !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 信息标题 */
.message-title {
  font-size: var(--font-size-2xl) !important;
  font-weight: var(--font-weight-bold) !important; /* 与诗歌列表统一使用 bold */
  color: var(--theme-gray-800) !important;
  margin: 0 0 var(--card-title-margin) 0 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 信息元数据容器 */
.message-meta {
  margin-bottom: var(--card-meta-margin) !important;
}

/* 信息作者 */
.message-author {
  display: flex !important; /* 与诗歌列表的meta样式统一 */
  align-items: center !important;
  margin-bottom: var(--spacing-xs) !important; /* 更紧凑 */
  font-size: var(--font-size-base) !important;
  color: var(--theme-gray-600) !important;
  font-weight: var(--font-weight-normal) !important; /* 移除 italic，统一样式 */
}

/* 信息日期样式 - 与诗歌列表统一 */
.message-date {
  color: var(--theme-gray-400) !important;
  font-size: var(--font-size-xs) !important;
  padding-top: var(--spacing-xs) !important;
  border-top: 1px solid var(--theme-gray-100) !important;
  margin-top: auto !important; /* 推到底部 */
}

/* 无信息提示 */
.no-messages {
  text-align: center !important;
  color: var(--theme-gray-600) !important;
  font-size: var(--font-size-lg) !important;
  margin: var(--spacing-2xl) 0 !important;
  padding: var(--spacing-xl) !important;
  background: var(--theme-gray-50) !important;
  border-radius: var(--card-radius) !important;
}

/* 分页导航 */
.messages-pagination {
  margin-top: var(--spacing-2xl) !important;
  display: flex !important;
  justify-content: center !important;
}

.pagination-list {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: var(--spacing-sm) !important;
}

.pagination-list li {
  margin: 0 !important;
}

.pagination-link {
  display: block !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  color: var(--theme-primary) !important;
  text-decoration: none !important;
  border: 1px solid var(--theme-gray-300) !important;
  border-radius: var(--border-radius-sm) !important;
  transition: all 0.3s ease !important;
  font-weight: var(--font-weight-medium) !important;
}

.pagination-link:hover {
  background-color: var(--theme-primary) !important;
  color: var(--card-bg) !important;
  text-decoration: none !important;
}

.pagination-link.current {
  background-color: var(--theme-primary) !important;
  color: var(--card-bg) !important;
  border-color: var(--theme-primary) !important;
}

.pagination-link.prev,
.pagination-link.next {
  font-weight: var(--font-weight-semibold) !important;
}

/* 响应式设计 - 平板设备 */
@media (max-width: 1024px) {
  .messages-container {
    padding: var(--spacing-lg) var(--spacing-lg) !important;
  }

  .messages-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: var(--spacing-lg) !important;
  }

  .category-title {
    font-size: var(--font-size-3xl) !important;
  }

  .category-redirect-notice,
  .category-not-found {
    margin: var(--spacing-xl) var(--spacing-lg) !important;
  }
}

/* 响应式设计 - 手机设备 */
@media (max-width: 768px) {
  .messages-container {
    padding: var(--spacing-lg) !important;
  }

  .category-header {
    margin-bottom: var(--spacing-lg) !important;
  }

  .category-title {
    font-size: var(--font-size-2xl) !important;
    min-width: auto !important;
  }

  .messages-count {
    font-size: var(--font-size-lg) !important;
  }

  .messages-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-lg) !important;
    margin: 0 var(--spacing-lg) !important;
  }

  /* 保持响应式长宽比 */

  .message-content {
    padding: var(--spacing-lg) !important;
  }

  .message-title {
    font-size: var(--font-size-lg) !important;
  }

  .pagination-link {
    padding: var(--spacing-sm) var(--spacing-sm) !important;
    font-size: var(--font-size-sm) !important;
  }

  .messages-pagination {
    margin: var(--spacing-xl) var(--spacing-lg) 0 var(--spacing-lg) !important;
  }

  /* 错误页面手机端优化 */
  .category-redirect-notice,
  .category-not-found {
    margin: var(--spacing-lg) var(--spacing-sm) !important;
    padding: var(--spacing-lg) !important;
  }

  .notice-title {
    font-size: var(--font-size-xl) !important;
  }

  .category-links {
    grid-template-columns: 1fr !important;
  }
}

/* 响应式设计 - 小屏手机 */
@media (max-width: 480px) {
  .messages-container {
    padding: var(--spacing-sm) !important;
  }

  .category-title {
    font-size: var(--font-size-xl) !important;
  }

  .messages-count {
    font-size: var(--font-size-xs) !important;
  }

  .messages-grid {
    margin: 0 var(--spacing-sm) !important;
    gap: var(--spacing-lg) !important;
  }

  .message-content {
    padding: var(--spacing-sm) !important;
  }

  .message-title {
    font-size: var(--font-size-base) !important;
  }

  .message-author {
    font-size: var(--font-size-xs) !important;
  }

  .pagination-list {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .pagination-link.prev,
  .pagination-link.next {
    flex-basis: 100% !important;
    text-align: center !important;
    margin-bottom: var(--spacing-sm) !important;
  }

  .messages-pagination {
    margin: var(--spacing-lg) var(--spacing-sm) 0 var(--spacing-sm) !important;
  }

  .category-redirect-notice,
  .category-not-found {
    margin: var(--spacing-sm) var(--spacing-xs) !important;
    padding: var(--spacing-lg) !important;
  }

  .notice-icon {
    font-size: 2rem !important;
  }

  .notice-title {
    font-size: var(--font-size-lg) !important;
  }
}

/* 超小屏设备优化 */
@media (max-width: 360px) {
  .category-title {
    font-size: var(--font-size-lg) !important;
  }

  .messages-count {
    font-size: var(--font-size-base) !important;
  }

  .messages-grid {
    margin: 0 var(--spacing-xs) !important;
  }

  .message-content {
    padding: var(--spacing-sm) !important;
  }

  .category-header {
    margin: 0 var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) !important;
  }
}

/* ==========================================================================
   深色模式适配 - 使用主题变量自动适配
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  /* 分类标题在深色模式下使用主题变量自动适配 */
  .category-title {
    color: var(--theme-gray-800) !important;
    border-bottom-color: var(--theme-gray-600) !important;
  }

  /* 信息数量显示 */
  .messages-count {
    color: var(--theme-gray-600) !important;
  }

  .count-number {
    color: var(--theme-primary-light) !important;
  }

  /* 其他文字元素 */
  .notice-title {
    color: var(--theme-gray-800) !important;
  }

  .notice-message {
    color: var(--theme-gray-600) !important;
  }

  .category-list h3 {
    color: var(--theme-gray-700) !important;
  }

  /* 信息卡片 - 使用主题变量，与诗歌列表保持一致 */
  .message-title {
    color: var(--theme-gray-800) !important;
  }

  .message-author {
    color: var(--theme-gray-400) !important;
  }

  .message-date {
    color: var(--theme-gray-400) !important;
    border-top-color: var(--theme-gray-600) !important;
  }
}