/* =====================================================================
 * blog-override.css — 博客页面布局优化
 * 
 * 优化技术系列卡片布局，从横版滚动改为网格布局
 * ===================================================================== */

/* ===== 1. 系列卡片区域 ===== */
.series-cards-section {
  margin: 4rem 0 !important;
  padding: 0 !important;
}

.series-cards-section .section-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted, #7A756E) !important;
  margin-bottom: 2rem !important;
  text-align: center !important;
}

/* ===== 2. 系列卡片网格 — 改为响应式网格 ===== */
.series-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

/* ===== 3. 系列卡片样式优化 ===== */
.series-card {
  position: relative !important;
  padding: 1.5rem !important;
  background: var(--color-bg-card, rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius-md, 12px) !important;
  transition: all 0.35s var(--ease-out-quart) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  min-width: auto !important;
  flex: none !important;
}

.series-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--card-accent, var(--color-primary, #7BA7A6)) !important;
  opacity: 0 !important;
  transition: opacity 0.35s var(--ease-out-quart) !important;
}

.series-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-card-hover, 0 20px 50px -10px rgba(0, 0, 0, 0.5)) !important;
  border-color: var(--color-border-hover, rgba(255, 255, 255, 0.15)) !important;
}

.series-card:hover::before {
  opacity: 1 !important;
}

/* 系列卡片内容 */
.series-card-accent {
  display: none !important;
}

.series-card-emoji {
  font-size: 2rem !important;
  margin-bottom: 1rem !important;
}

.series-card-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.series-card-name {
  font-family: 'Syne', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--ink, #E8E6E1) !important;
  line-height: 1.3 !important;
}

.series-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  color: var(--ink-muted, #7A756E) !important;
}

.series-card-count {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.series-card-progress {
  display: flex !important;
  gap: 3px !important;
  margin-top: 0.5rem !important;
}

.series-card-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--color-border, rgba(255, 255, 255, 0.1)) !important;
  transition: background 0.2s var(--ease-out-quart) !important;
}

.series-card-dot.read {
  background: var(--color-success, #2A9D8F) !important;
}

/* ===== 4. 系列过滤标签优化 ===== */
.series-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin: 2rem 0 !important;
  padding: 0 !important;
}

.series-filter {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
  padding: 0.5rem 1rem !important;
  background: var(--color-bg-card, rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius-full, 75px) !important;
  color: var(--ink-muted, #7A756E) !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease-out-quart) !important;
}

.series-filter:hover {
  border-color: var(--color-primary, #7BA7A6) !important;
  color: var(--color-primary, #7BA7A6) !important;
  background: rgba(123, 167, 166, 0.08) !important;
}

.series-filter.active {
  background: var(--color-primary, #7BA7A6) !important;
  border-color: var(--color-primary, #7BA7A6) !important;
  color: #fff !important;
}

/* ===== 5. 文章列表优化 ===== */
.post-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 1.5rem !important;
}

.post-item {
  position: relative !important;
  padding: 1.5rem !important;
  background: var(--color-bg-card, rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius-md, 12px) !important;
  transition: all 0.35s var(--ease-out-quart) !important;
  text-decoration: none !important;
  display: block !important;
  color: inherit !important;
}

.post-item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--color-primary, #7BA7A6), var(--monet-iris, #9B7CB6)) !important;
  opacity: 0 !important;
  transition: opacity 0.35s var(--ease-out-quart) !important;
}

.post-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-card-hover) !important;
  border-color: var(--color-border-hover) !important;
}

.post-item:hover::before {
  opacity: 1 !important;
}

.post-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ink, #E8E6E1) !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.4 !important;
}

.post-item:hover .post-title {
  color: var(--color-primary, #7BA7A6) !important;
}

.post-excerpt {
  font-size: 0.85rem !important;
  color: var(--ink-muted, #7A756E) !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.post-meta {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important;
  color: var(--ink-faint, #5A5550) !important;
}

.post-series {
  padding: 2px 8px !important;
  background: rgba(123, 167, 166, 0.08) !important;
  border: 1px solid rgba(123, 167, 166, 0.15) !important;
  border-radius: 4px !important;
  color: var(--color-primary, #7BA7A6) !important;
}

/* ===== 6. 精选文章优化 ===== */
.featured-section {
  margin: 4rem 0 !important;
}

.featured-card-horizontal {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
  padding: 2rem !important;
  background: var(--color-bg-card, rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius-lg, 16px) !important;
  transition: all 0.35s var(--ease-out-quart) !important;
  text-decoration: none !important;
  color: inherit !important;
}

.featured-card-horizontal:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--color-border-hover) !important;
}

.featured-accent-icon {
  font-size: 3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-bg-glass, rgba(255, 255, 255, 0.04)) !important;
  border-radius: var(--radius-md, 12px) !important;
  padding: 2rem !important;
}

.featured-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0.75rem !important;
}

.featured-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--ink, #E8E6E1) !important;
  line-height: 1.3 !important;
}

.featured-card-horizontal:hover .featured-title {
  color: var(--color-primary, #7BA7A6) !important;
}

.featured-summary {
  font-size: 0.9rem !important;
  color: var(--ink-muted, #7A756E) !important;
  line-height: 1.7 !important;
}

.featured-meta {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important;
  color: var(--ink-faint, #5A5550) !important;
}

/* ===== 7. 排序按钮优化 ===== */
.sort-bar {
  display: flex !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin: 2rem 0 !important;
}

.sort-btn {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
  padding: 0.5rem 1rem !important;
  background: transparent !important;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius-sm, 8px) !important;
  color: var(--ink-muted, #7A756E) !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease-out-quart) !important;
}

.sort-btn:hover {
  border-color: var(--color-primary, #7BA7A6) !important;
  color: var(--color-primary, #7BA7A6) !important;
}

.sort-btn.active {
  background: var(--color-primary, #7BA7A6) !important;
  border-color: var(--color-primary, #7BA7A6) !important;
  color: #fff !important;
}

/* ===== 8. 响应式 ===== */
@media (max-width: 768px) {
  .series-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .post-list {
    grid-template-columns: 1fr !important;
  }
  
  .featured-card-horizontal {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .series-cards-grid {
    grid-template-columns: 1fr !important;
  }
  
  .series-filters {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 0.5rem !important;
  }
  
  .series-filter {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ===== 9. 减少动效 ===== */
@media (prefers-reduced-motion: reduce) {
  .series-card,
  .post-item,
  .featured-card-horizontal,
  .series-filter,
  .sort-btn {
    transition: none !important;
  }
  
  .series-card:hover,
  .post-item:hover,
  .featured-card-horizontal:hover {
    transform: none !important;
  }
  
  .series-card::before,
  .post-item::before {
    transition: none !important;
  }
}