/* ==========================================================================
   酷科斯建站 kookix.com - 响应式样式表
   完美适配电脑、平板、手机
   ========================================================================== */

/* ---------- 大屏（1400px 以上） ---------- */
@media (min-width: 1400px) {
  .container { max-width: 1360px; }
}

/* ---------- 桌面端（1200px 以下） ---------- */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .quick-grid { grid-template-columns: repeat(4, 1fr); }
  .advantage-grid { grid-template-columns: repeat(2, 1fr); }
  .matrix-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .process-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .sitemap-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 平板端（992px 以下） ---------- */
@media (max-width: 992px) {
  .container { padding: 0 24px; }

  /* 导航 */
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }

  /* Hero */
  .hero { min-height: auto; padding: 120px 0 60px; }
  .hero .container {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  .hero-content { max-width: 100%; text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-visual { min-height: 360px; }
  .hero-visual .ring-outer { width: 320px; height: 320px; }
  .hero-visual .ring-mid { width: 250px; height: 250px; }
  .hero-visual .core-circle { width: 180px; height: 180px; }
  .hero-visual .core-circle .num { font-size: 2.5rem; }

  /* 通用 */
  .py-5 { padding: 60px 0; }
  .py-6 { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }

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

  /* 关于 */
  .about-hero { grid-template-columns: 1fr; gap: 40px; }
  .about-visual { max-width: 400px; margin: 0 auto; }

  /* 解决方案 */
  .solution-item { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
  .solution-item:nth-child(even) { direction: ltr; }

  /* 案例详情 */
  .case-detail-header { grid-template-columns: 1fr; gap: 32px; }

  /* 服务详情 */
  .service-detail-layout { grid-template-columns: 1fr; gap: 32px; }
  .service-sidebar { position: static; }

  /* 资讯 */
  .news-list-layout { grid-template-columns: 1fr; gap: 32px; }
  .article-layout { grid-template-columns: 1fr; gap: 32px; }
  .article-main { padding: 32px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }

  /* 联系 */
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }

  /* 文档 */
  .docs-layout { grid-template-columns: 1fr; gap: 24px; }
  .docs-sidebar { position: static; }

  /* CTA */
  .cta-box { flex-direction: column; text-align: center; padding: 40px 28px; }
  .cta-content { max-width: 100%; }
  .cta-actions { justify-content: center; }

  /* 页脚 */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---------- 手机端（768px 以下） ---------- */
@media (max-width: 768px) {
  body { font-size: 15px; }
  .container { padding: 0 18px; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }

  /* 头部 */
  .header-bar { height: 64px; }
  .brand-mark { width: 38px; height: 38px; font-size: 1.1rem; }
  .brand-text strong { font-size: 1rem; }
  .brand-text small { display: none; }

  /* Hero */
  .hero { padding: 100px 0 48px; }
  .hero-visual { min-height: 280px; }
  .hero-visual .ring-outer { width: 260px; height: 260px; }
  .hero-visual .ring-mid { width: 200px; height: 200px; }
  .hero-visual .core-circle { width: 140px; height: 140px; }
  .hero-visual .core-circle .num { font-size: 2rem; }
  .hero-visual .core-circle .label { font-size: 0.75rem; }
  .hero-visual .float-circle { width: 60px; height: 60px; font-size: 0.65rem; }
  .hero-content > p { font-size: 1rem; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* 页面横幅 */
  .page-banner { padding: 110px 0 56px; }
  .page-banner h1 { font-size: 1.8rem; }

  /* 网格全部单列 */
  .advantage-grid,
  .quick-grid,
  .matrix-grid,
  .cases-grid,
  .news-grid,
  .services-grid,
  .pricing-grid,
  .team-grid,
  .process-steps,
  .sitemap-grid,
  .feature-list,
  .case-meta {
    grid-template-columns: 1fr;
  }

  /* 快速入口 */
  .quick-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .quick-circle { width: 52px; height: 52px; }
  .quick-item span { font-size: 0.75rem; }

  /* 卡片 */
  .card, .matrix-card, .service-card { padding: 24px 20px; }
  .pricing-card.featured { transform: none; }
  .pricing-card.featured:hover { transform: translateY(-6px); }

  /* 资讯列表横向变纵向 */
  .news-list-main .news-card {
    grid-template-columns: 1fr;
  }
  .news-list-main .news-img { min-height: 180px; aspect-ratio: 16/9; }
  .news-list-main .news-body { padding: 20px; }

  /* 文章 */
  .article-main { padding: 24px 20px; }
  .article-header h1 { font-size: 1.5rem; }
  .related-grid { grid-template-columns: 1fr; }

  /* 联系 */
  .contact-info-card, .contact-form-card { padding: 28px 24px; }

  /* 文档 */
  .docs-content { padding: 28px 24px; }

  /* 法律 */
  .legal-content { padding: 28px 24px; }

  /* 流程 */
  .process-step .step-circle { width: 64px; height: 64px; font-size: 1.4rem; }

  /* 时间线 */
  .timeline { padding-left: 32px; }
  .timeline-item::before { left: -28px; width: 14px; height: 14px; border-width: 3px; }

  /* 页脚 */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer { padding: 48px 0 0; }

  /* 按钮 */
  .btn-lg { padding: 14px 28px; font-size: 0.95rem; }
  .btn { padding: 12px 24px; }

  /* CTA */
  .cta-box { padding: 32px 20px; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { width: 100%; justify-content: center; }

  /* 统计 */
  .about-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
  .stat-item { padding: 16px; }
  .stat-item .num { font-size: 1.8rem; }
}

/* ---------- 小屏手机（480px 以下） ---------- */
@media (max-width: 480px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-visual .float-circle.f3 { display: none; }
}

/* ---------- 横屏手机 ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 100px 0 40px; }
}

/* ---------- 打印样式 ---------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .mobile-drawer, .overlay, .cta-section { display: none !important; }
  body { background: #fff; color: #000; }
  .container { max-width: 100%; padding: 0; }
  a { color: #000; text-decoration: underline; }
}