/**
 * Responsive - 法界通官方网站
 * 响应式样式，移动优先设计
 */

/* ========== 平板样式 (>= 768px) ========== */
@media (min-width: 768px) {
  /* 容器 */
  .container {
    padding: 0 var(--spacing-8);
  }

  /* Hero区域 */
  .hero-title {
    font-size: var(--font-size-6xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-3xl);
  }

  .hero-description {
    font-size: var(--font-size-xl);
  }

  /* 网格 */
  .grid-md-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-md-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 两列布局 */
  .two-column {
    grid-template-columns: 1fr 1fr;
  }

  /* Section */
  .section {
    padding: var(--spacing-24) 0;
  }

  .section-lg {
    padding: var(--spacing-32) 0;
  }
}

/* ========== 桌面样式 (>= 1024px) ========== */
@media (min-width: 1024px) {
  /* 容器 */
  .container {
    padding: 0 var(--spacing-12);
  }

  /* Hero区域 */
  .hero-title {
    font-size: 4.5rem; /* 72px */
  }

  .hero-subtitle {
    font-size: var(--font-size-4xl);
  }

  /* 网格 */
  .grid-lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-lg-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 三列布局 */
  .three-column {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 导航栏 */
  .navbar-container {
    padding: var(--spacing-4) var(--spacing-12);
  }
}

/* ========== 大屏样式 (>= 1440px) ========== */
@media (min-width: 1440px) {
  /* Hero区域 */
  .hero-title {
    font-size: 5rem; /* 80px */
  }

  /* Section */
  .section {
    padding: var(--spacing-32) 0;
  }
}

/* ========== 移动端样式 (< 768px) ========== */
@media (max-width: 767px) {
  /* 标题大小调整 */
  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  h3 {
    font-size: var(--font-size-xl);
  }

  /* Hero区域 */
  .hero {
    min-height: 80vh;
    padding-top: 60px;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-xl);
  }

  .hero-description {
    font-size: var(--font-size-base);
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  /* 导航栏 */
  .navbar-menu {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    flex-direction: column;
    padding: var(--spacing-4);
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
  }

  .navbar-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .navbar-toggle {
    display: flex;
  }

  /* 网格 */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }

  /* 两列布局 */
  .two-column {
    grid-template-columns: 1fr;
  }

  /* 三列布局 */
  .three-column {
    grid-template-columns: 1fr;
  }

  /* Section */
  .section {
    padding: var(--spacing-12) 0;
  }

  .section-lg {
    padding: var(--spacing-16) 0;
  }

  /* 卡片 */
  .card {
    padding: var(--spacing-4);
  }

  /* Footer */
  .footer {
    padding: var(--spacing-12) 0 var(--spacing-6);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  /* 按钮 */
  .btn-lg {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-base);
  }

  /* 区域标题 */
  .section-title h2 {
    font-size: var(--font-size-2xl);
  }

  .section-title p {
    font-size: var(--font-size-base);
  }

  /* 数据展示 */
  .stat-number {
    font-size: var(--font-size-4xl);
  }

  /* 特色卡片 */
  .feature-card {
    padding: var(--spacing-6);
  }

  .feature-icon {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-3xl);
  }

  .feature-title {
    font-size: var(--font-size-xl);
  }
}

/* ========== 小屏移动端 (< 480px) ========== */
@media (max-width: 479px) {
  /* 容器 */
  .container {
    padding: 0 var(--spacing-4);
  }

  /* Hero区域 */
  .hero-title {
    font-size: var(--font-size-2xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .hero-description {
    font-size: var(--font-size-sm);
  }

  /* 按钮 */
  .btn {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
  }

  /* 卡片 */
  .card {
    padding: var(--spacing-3);
  }

  /* 数据展示 */
  .stat-number {
    font-size: var(--font-size-3xl);
  }

  .stat-label {
    font-size: var(--font-size-sm);
  }
}

/* ========== 横屏模式 ========== */
@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: var(--spacing-16) 0;
  }
}

/* ========== 打印样式 ========== */
@media print {
  .navbar,
  .footer,
  .btn {
    display: none;
  }

  body {
    font-size: 12pt;
    color: black;
    background: white;
  }

  a {
    text-decoration: underline;
  }
}