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

   skin-5.css · Our Smart Baby

   Skin-5 · 对比·决策

   适用页面：对比决策页

   加载顺序：29/34

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



/* 对比页布局 */

.comparison-page {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--gutter);

}



.comparison-page h1 {

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

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

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

  text-align: center;

}



/* 对比双列布局 */

.comparison-page .compare-hero {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  gap: var(--space-5);

  align-items: center;

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

}



.comparison-page .compare-side {

  padding: var(--space-6);

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

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

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

  text-align: center;

}



.comparison-page .compare-side .side-name {

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

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

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

}



.comparison-page .compare-side .side-image {

  aspect-ratio: 1;

  max-width: 200px;

  margin: 0 auto var(--space-3);

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

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

  display: flex;

  align-items: center;

  justify-content: center;

}



.comparison-page .compare-vs {

  font-family: var(--font-display);

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

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

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

}



/* 对比表格 */

.comparison-page .comparison-table {

  width: 100%;

  border-collapse: collapse;

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

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

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

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

  overflow: hidden;

}



.comparison-page .comparison-table th {

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

  padding: var(--space-4);

  text-align: left;

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

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

}



.comparison-page .comparison-table th:first-child {

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

}



.comparison-page .comparison-table td {

  padding: var(--space-4);

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

  vertical-align: top;

}



.comparison-page .comparison-table tr:last-child td {

  border-bottom: none;

}



.comparison-page .comparison-table .winner {

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

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

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

}



/* 决策结论 */

.comparison-page .verdict-box {

  padding: var(--space-6);

  background: linear-gradient(135deg, var(--color-primary-50), var(--color-accent-50));

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

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

  text-align: center;

}



.comparison-page .verdict-box h3 {

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

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

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

}



/* 移动端 */

@media (max-width: 768px) {

  .comparison-page h1 { font-size: var(--text-3xl); }



  .comparison-page .compare-hero {

    grid-template-columns: 1fr;

  }



  .comparison-page .compare-vs { text-align: center; }



  .comparison-page .comparison-table {

    display: block;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

  }



  .comparison-page .comparison-table th,

  .comparison-page .comparison-table td {

    padding: var(--space-3);

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

  }

}