/* =====================================================
   CHONRY - Responsive Styles v2.0
   ===================================================== */

/* ─── Tablet (≤1024px) ───────────────────────────────── */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    text-align: center;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
  .hero-illustration { max-width: 400px; margin: 0 auto; }
  .hero-illustration-lifestyle { max-width: 420px; margin: 0 auto; }
  .lifestyle-bubble { display: none; }
  .campaign-mockup { flex-direction: column; }
  .campaign-mockup .campaign-preview { width: 100%; border-left: none; border-top: 1px solid var(--color-border); }
  .ill-device { width: 180px; height: 340px; }
  .ill-card { display: none; }

  .detail-hero-content {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
  }
  .detail-hero-text { align-items: center; }
  .detail-hero-desc { max-width: 100%; }
  .detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .detail-grid.reverse { direction: ltr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .usecase-grid { grid-template-columns: 1fr; }
  .usecase-photo-grid { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: clamp(2rem, 6vw, 3rem); }
  .hero-description { max-width: 100%; margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { order: -1; max-width: 440px; margin: 0 auto; width: 100%; }
  .float-card.card-tl { right: 0; top: 2%; }
  .float-card.card-bl { left: 0; bottom: 5%; }

  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid .stat-card:nth-child(2) { border-right: none; }
  .stats-grid .stat-card:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.12); }
  .stats-grid .stat-card:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.12); border-right: none; }
  .stats-grid-light .stat-card:nth-child(3),
  .stats-grid-light .stat-card:nth-child(4) { border-top: 1px solid var(--color-border); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Mobile (≤768px) ─────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
  }

  /* Mobile nav - hide desktop menu, show hamburger */
  .mobile-menu-btn { display: flex; }
  .nav-list { display: none; }
  .nav-actions .btn { display: none; }
  .nav-actions .nav-login { display: flex; }
  .nav-menu { display: none; }

  /* Hero */
  .hero { min-height: auto; padding-top: calc(var(--header-height) + var(--announcement-height, 0px) + var(--space-8)); padding-bottom: var(--space-12); }
  .hero::after { display: none; }
  .hero-visual { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .hero-stats { flex-direction: column; align-items: center; gap: var(--space-4); }
  .hero-stat-divider { width: 40px; height: 1px; }
  .float-card { display: none; }
  .hero-illustration { display: none; }
  .hero-illustration-lifestyle { display: none; }
  .campaign-mockup { min-height: auto; }
  .campaign-mockup .campaign-preview { display: none; }
  .campaign-mockup .campaign-editor { padding: var(--space-4); }

  /* Grids */
  .products-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .solutions-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .pricing-grid { grid-template-columns: 1fr; }
  .detail-visual { min-height: 260px; }
  .detail-chat-mockup { padding: var(--space-4); gap: var(--space-3); }
  .detail-chat-bubble { font-size: var(--text-xs); padding: 8px 10px; }
  .detail-chat-quick-reply { padding: 4px 8px; font-size: 10px; }
  .detail-chat-lead { padding: var(--space-2); gap: var(--space-2); }
  .page-subnav { top: calc(var(--header-height) + var(--announcement-height, 0px)); }
  .story-grid { grid-template-columns: 1fr; }
  .usecase-photo-grid { grid-template-columns: 1fr; }

  /* Section padding */
  .section { padding: var(--space-16) 0; }
  .section-header { margin-bottom: var(--space-10); }
  .cta-section { padding: var(--space-16) 0; }

  /* Clients */
  .clients-grid { gap: var(--space-6); }

  /* Footer */
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
}

/* ─── Small Mobile (≤480px) ───────────────────────────── */
@media (max-width: 480px) {
  :root {
    --container-max: 100%;
  }
  .container { padding: 0 var(--space-4); }

  .hero-title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .hero-description { font-size: var(--text-base); }
  .hero-badge { font-size: var(--text-xs); }

  .section-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .cta-title { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  .section-description { font-size: var(--text-base); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card { padding: var(--space-6); }
  .stat-number { font-size: 2rem; }

  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-grid { gap: var(--space-10); }

  /* Stack CTA buttons on small screens */
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { justify-content: center; }

  /* CRM mockup stack vertically on mobile */
  .detail-crm-mockup { flex-direction: column; min-height: auto; }
  .detail-crm-sidebar { flex-direction: row; flex-wrap: wrap; }
  .detail-crm-team-card { flex: 1; min-width: 140px; }
}

/* ─── Mega Menu Responsive ──────────────────────────── */
@media (max-width: 1024px) {
  .mega-menu { min-width: 600px; max-width: 720px; }
  .mega-menu-promo { width: 200px; padding: var(--space-5); }
  .mega-menu-grid { gap: 0; }
}

@media (max-width: 768px) {
  .mega-menu { min-width: auto; max-width: none; }
  .mega-menu-body { flex-direction: column; }
  .mega-menu-promo { display: none; }
  .mega-menu-grid { grid-template-columns: 1fr; }
  .mega-menu-main { padding: var(--space-4); }
  .mega-menu-section-title { margin-bottom: var(--space-2); padding-bottom: var(--space-2); }
  .hero-demo-visual { min-height: 300px; }
  .demo-chat-ui { max-width: 100%; }
}

@media (max-width: 480px) {
  .hero-demo-visual { min-height: 260px; padding: var(--space-4); }
  .hero-tabs { gap: 0; }
  .hero-tab { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); gap: 4px; }
  .hero-tab svg { width: 14px; height: 14px; }
}

/* ─── Tablet-only nav fix ──────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-menu { gap: 0; }
  .nav-link { padding: 6px 10px; font-size: var(--text-xs); }
  .dropdown-menu { min-width: 240px; }
  .mega-menu { min-width: 520px; }
}

/* ─── Print ───────────────────────────────────────────── */
@media print {
  .header, .back-to-top, .announcement-bar, .cookie-banner { display: none; }
  .hero { min-height: auto; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .section { padding: 20pt 0; }
}