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

   article-t4.css · Our Smart Baby

   T4 · 品牌·故事型

   适用意图：Navigational

   加载顺序：13/34

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



.article-t4 {

  max-width: 900px;

  margin: 0 auto;

  padding: 0 var(--gutter);

}



.article-t4 h1 {

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

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

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

  text-align: center;

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

}



.article-t4 h2 {

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

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

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

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

}



.article-t4 p {

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

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

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

  max-width: 65ch;

  margin-left: auto;

  margin-right: auto;

}



/* 顶部大图 */

.article-t4 .hero-image {

  aspect-ratio: 16 / 9;

  width: 100%;

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

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

  overflow: hidden;

  position: relative;

}



.article-t4 .hero-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* 引言块 */

.article-t4 blockquote {

  border-left: 4px solid var(--color-primary-500);

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

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

  font-style: italic;

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

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

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

  max-width: 720px;

}



.article-t4 blockquote cite {

  display: block;

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

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

  font-style: normal;

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

}



/* 分隔线 */

.article-t4 .soft-divider {

  width: 60px;

  height: 2px;

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

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

  border: none;

}



/* 时间线 */

.article-t4 .story-timeline {

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

  max-width: 640px;

}



/* 移动端 */

@media (max-width: 768px) {

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

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

  .article-t4 p { font-size: var(--text-base); }



  .article-t4 blockquote {

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

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

  }

}