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

   article-t2.css · Our Smart Baby

   T2 · 教程·步骤型

   适用意图：Informational

   加载顺序：11/34

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



.article-layout-t2 {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--gutter);

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 var(--gutter);

}



@media (min-width: 1024px) {

  .article-layout-t2 {

    grid-template-columns: 220px 1fr;

  }

}



.article-t2 h1 {

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

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

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

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

}



.article-t2 h2 {

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

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

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

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

}



.article-t2 p {

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

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

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

}



/* 步骤编号 */

.article-t2 .step-number {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background-color: var(--color-primary-500);

  color: white;

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

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

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

  flex-shrink: 0;

}



.article-t2 .step {

  display: flex;

  gap: var(--space-3);

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

  padding: var(--space-4);

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

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

}



.article-t2 .step-content {

  flex: 1;

}



/* 提示框 */

.article-t2 .tip-box {

  padding: var(--space-4);

  background-color: var(--color-primary-50);

  border-left: 3px solid var(--color-primary-400);

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

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

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

}



.article-t2 .tip-box::before {

  content: '💡 ';

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

}



.article-t2 .warning-box {

  padding: var(--space-4);

  background-color: hsl(40, 90%, 95%);

  border-left: 3px solid var(--color-warning);

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

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

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

}



.article-t2 .warning-box::before {

  content: '⚠️ ';

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

}



/* 左侧目录 */

.article-t2 .toc-sidebar {

  position: sticky;

  top: 88px;

  max-height: calc(100vh - 100px);

  overflow-y: auto;

  padding: var(--space-4);

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

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

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

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

}



.article-t2 .toc-sidebar h4 {

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

  text-transform: uppercase;

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

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

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

}



.article-t2 .toc-sidebar a {

  display: block;

  padding: var(--space-2);

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

  border-left: 2px solid transparent;

}



.article-t2 .toc-sidebar a:hover,

.article-t2 .toc-sidebar a.active {

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

  border-left-color: var(--color-primary-500);

}



/* 进度条 */

.article-t2 .progress-bar {

  width: 100%;

  height: 6px;

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

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

  overflow: hidden;

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

}



.article-t2 .progress-bar-fill {

  height: 100%;

  background: linear-gradient(90deg, var(--color-primary-400), var(--color-accent-500));

}



/* 移动端 */

@media (max-width: 1023px) {

  .article-t2 .toc-sidebar {

    position: static;

    max-height: none;

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

  }

}



@media (max-width: 768px) {

  .article-t2 h1 { font-size: var(--text-3xl); }

  .article-t2 h2 { font-size: var(--text-xl); }



  .article-t2 .step {

    padding: var(--space-3);

  }



  .article-t2 .step-number {

    width: 28px;

    height: 28px;

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

  }

}