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

   skin-2.css · 分类·产品

   适用：Hub2产品分类页

   强调色：--color-primary-600

   配图风格：产品剪影

   列表布局：卡片网格

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

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



.skin-2 {

  --skin-accent: var(--color-primary-600);

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

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

}



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

   分类页头部

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



.skin-2 .category-header {

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

  border-bottom: 2px solid var(--color-border);

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

}



.skin-2 .category-header h1 {

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

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

}



.skin-2 .category-header .page-alive {

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

}



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

   信任条

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



.skin-2 .trust-bar {

  display: flex;

  align-items: center;

  gap: var(--space-5);

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

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

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

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

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

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

  flex-wrap: wrap;

}



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

   原创主题导语

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



.skin-2 .category-intro {

  padding: var(--space-5);

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

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

  border-left: 4px solid var(--skin-accent);

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

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

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

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

}



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

   判断框架

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



.skin-2 .judgment-framework {

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

}



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

   意图分流漏斗

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



.skin-2 .intent-funnel {

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

}



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

   编辑精选区

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



.skin-2 .editor-picks {

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

}



.skin-2 .editor-picks h2 {

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

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

}



.skin-2 .pick-card {

  display: flex;

  align-items: center;

  gap: var(--space-4);

  padding: var(--space-5);

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

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

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

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

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

}



.skin-2 .pick-card:hover {

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

  box-shadow: var(--shadow-md);

  transform: translateX(4px);

}



.skin-2 .pick-card-rank {

  flex-shrink: 0;

  width: 40px;

  height: 40px;

  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);

}



.skin-2 .pick-card-content {

  flex: 1;

  min-width: 0;

}



.skin-2 .pick-card-title {

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

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

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

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

  text-decoration: none;

}



.skin-2 .pick-card-title:hover {

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

  text-decoration: underline;

}



.skin-2 .pick-card-reason {

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

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

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

}



.skin-2 .pick-card-score {

  flex-shrink: 0;

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

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

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

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

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

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

}



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

   产品分类网格

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



.skin-2 .product-category-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: var(--space-5);

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

}



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

   快速推荐区

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



.skin-2 .quick-recommend {

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

}



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

   子分类导航区

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



.skin-2 .subcategory-section {

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

}



.skin-2 .subcategory-section h3 {

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

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

}



.skin-2 .subcategory-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: var(--space-3);

}



.skin-2 .subcategory-card {

  display: flex;

  flex-direction: column;

  gap: var(--space-2);

  padding: var(--space-4);

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

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

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

  text-decoration: none;

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

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

  min-height: 100px;

}



.skin-2 .subcategory-card:hover {

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

  box-shadow: var(--shadow-sm);

  transform: translateY(-2px);

  text-decoration: none;

}



.skin-2 .subcategory-card-icon {

  font-size: 1.5rem;

}



.skin-2 .subcategory-card-name {

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

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

}



.skin-2 .subcategory-card-count {

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

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

}



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

   完整文章列表

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



.skin-2 .article-list-section {

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

}



.skin-2 .article-list-section h2 {

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

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

}



.skin-2 .article-list {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: var(--space-5);

  container-type: inline-size;

  container-name: article-list;

}



@container article-list (max-width: 640px) {

  .skin-2 .article-list { grid-template-columns: 1fr; }

}



@container article-list (min-width: 960px) {

  .skin-2 .article-list { grid-template-columns: repeat(3, 1fr); }

}



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

   L3深度探索入口

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



.skin-2 .exploration-hook {

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

}



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

   FAQ 区

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



.skin-2 .faq-section {

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

}



.skin-2 .faq-section h2 {

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

}



@media (max-width: 768px) {

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

  .skin-2 .pick-card { flex-direction: column; align-items: flex-start; }

  .skin-2 .pick-card-score { align-self: flex-start; }

  .skin-2 .product-category-grid { grid-template-columns: 1fr; }

  .skin-2 .subcategory-grid { grid-template-columns: repeat(2, 1fr); }

}



@media (max-width: 480px) {

  .skin-2 .subcategory-grid { grid-template-columns: 1fr; }

}