/* ==========================================================================

   skin-4.css · 系列·专题

   适用：系列专题页

   强调色：--color-accent-500

   配图风格：时间线

   列表布局：顺序列表

   生成者：Crystal Yifei Liu · 2026-09-25

   ========================================================================== */



.skin-4 {

  --skin-accent: var(--color-accent-500);

  --skin-accent-light: var(--color-accent-50);

  --skin-accent-dark: var(--color-accent-700);

}



/* ==========================================================================

   系列头部

   ========================================================================== */



.skin-4 .series-header {

  padding: var(--rhythm-loose) 0;

  border-bottom: 2px solid var(--skin-accent-light);

  margin-bottom: var(--rhythm-loose);

}



.skin-4 .series-badge {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-1) var(--space-3);

  margin-bottom: var(--rhythm-normal);

  background-color: var(--skin-accent);

  color: hsl(0, 0%, 100%);

  font-size: var(--text-xs);

  font-weight: var(--font-bold);

  text-transform: uppercase;

  letter-spacing: var(--tracking-wider);

  border-radius: var(--radius-full);

}



.skin-4 .series-badge::before {

  content: '📚 ';

}



.skin-4 .series-header h1 {

  font-size: var(--text-4xl);

  margin-bottom: var(--rhythm-normal);

}



.skin-4 .series-intro {

  font-size: var(--text-lg);

  color: var(--color-text-secondary);

  line-height: var(--leading-relaxed);

  margin-bottom: var(--rhythm-normal);

}



/* ==========================================================================

   阅读顺序说明

   ========================================================================== */



.skin-4 .reading-order-note {

  display: flex;

  align-items: flex-start;

  gap: var(--space-3);

  padding: var(--space-4);

  margin-bottom: var(--rhythm-loose);

  background-color: var(--skin-accent-light);

  border-radius: var(--radius-md);

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  line-height: var(--leading-relaxed);

}



.skin-4 .reading-order-note::before {

  content: '👉 ';

  font-size: var(--text-lg);

  flex-shrink: 0;

}



/* ==========================================================================

   系列文章列表（顺序列表+时间线）

   ========================================================================== */



.skin-4 .series-list {

  margin: var(--rhythm-loose) 0;

  position: relative;

}



.skin-4 .series-list::before {

  content: '';

  position: absolute;

  left: 24px;

  top: 30px;

  bottom: 30px;

  width: 2px;

  background-color: var(--skin-accent-light);

}



.skin-4 .series-item {

  display: flex;

  align-items: flex-start;

  gap: var(--space-4);

  padding: var(--space-5) 0;

  position: relative;

}



.skin-4 .series-item-number {

  flex-shrink: 0;

  width: 48px;

  height: 48px;

  background-color: var(--skin-accent);

  color: hsl(0, 0%, 100%);

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: var(--font-bold);

  font-size: var(--text-lg);

  z-index: 1;

  box-shadow: 0 0 0 4px var(--color-bg);

}



.skin-4 .series-item-content {

  flex: 1;

  min-width: 0;

  padding-top: var(--space-2);

}



.skin-4 .series-item-role {

  display: inline-block;

  padding: var(--space-1) var(--space-2);

  margin-bottom: var(--space-2);

  background-color: var(--color-neutral-100);

  color: var(--color-text-tertiary);

  font-size: var(--text-xs);

  font-weight: var(--font-semibold);

  text-transform: uppercase;

  letter-spacing: var(--tracking-wide);

  border-radius: var(--radius-sm);

}



.skin-4 .series-item-title {

  font-size: var(--text-xl);

  font-weight: var(--font-semibold);

  color: var(--color-text-primary);

  margin-bottom: var(--space-2);

  text-decoration: none;

}



.skin-4 .series-item-title:hover {

  color: var(--skin-accent-dark);

  text-decoration: underline;

}



.skin-4 .series-item-summary {

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  line-height: var(--leading-relaxed);

}



.skin-4 .series-item-meta {

  margin-top: var(--space-2);

  font-size: var(--text-xs);

  color: var(--color-text-tertiary);

}



/* ==========================================================================

   系列进度指示

   ========================================================================== */



.skin-4 .series-progress {

  margin: var(--rhythm-loose) 0;

  padding: var(--rhythm-normal);

  background-color: var(--color-surface);

  border-radius: var(--radius-lg);

}



.skin-4 .series-progress-label {

  font-size: var(--text-sm);

  font-weight: var(--font-semibold);

  color: var(--color-text-secondary);

  margin-bottom: var(--space-3);

}



.skin-4 .series-progress-bar {

  height: 8px;

  background-color: var(--color-neutral-200);

  border-radius: var(--radius-full);

  overflow: hidden;

}



.skin-4 .series-progress-fill {

  height: 100%;

  background-color: var(--skin-accent);

  border-radius: var(--radius-full);

}



/* ==========================================================================

   系列导航（前后章）

   ========================================================================== */



.skin-4 .series-nav {

  display: flex;

  justify-content: space-between;

  gap: var(--space-3);

  margin: var(--rhythm-loose) 0;

  padding-top: var(--rhythm-normal);

  border-top: 1px solid var(--color-border);

}



.skin-4 .series-nav a {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-3) var(--space-4);

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  font-size: var(--text-sm);

  font-weight: var(--font-medium);

  color: var(--color-text-primary);

  text-decoration: none;

  transition: all var(--duration-fast) var(--ease-out);

  max-width: 45%;

}



.skin-4 .series-nav a:hover {

  border-color: var(--skin-accent);

  color: var(--skin-accent-dark);

  text-decoration: none;

}



.skin-4 .series-nav-prev::before { content: '← '; }

.skin-4 .series-nav-next::after { content: ' →'; }

.skin-4 .series-nav-next { margin-left: auto; }



@media (max-width: 768px) {

  .skin-4 .series-header h1 { font-size: var(--text-3xl); }

  .skin-4 .series-list::before { left: 19px; }

  .skin-4 .series-item-number { width: 40px; height: 40px; font-size: var(--text-base); }

  .skin-4 .series-item-title { font-size: var(--text-lg); }

  .skin-4 .series-nav { flex-direction: column; }

  .skin-4 .series-nav a { max-width: 100%; }

}