/* ============================================================
   RESPONSIVE.CSS — Media queries for all breakpoints
   Breakpoints: 1200 | 960 | 768 | 600 | 480 | 360
   ============================================================ */

/* ── 1200px — Large screens cap ── */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 960px — Medium desktops ── */
@media (max-width: 960px) {
  .webhook-grid   { grid-template-columns: 1fr; }
  .contact-grid   { grid-template-columns: 1fr; }
  .founders-grid  { grid-template-columns: 1fr 1fr; gap: 18px; }

  .webhook-preview-stack { position: static; }

  .features-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* ── 768px — Tablets ── */
@media (max-width: 768px) {
  /* Navbar: hide links, show hamburger */
  .nav-links  { display: none; }
  .hamburger  { display: flex; }

  /* Stats: 2 per row */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Founders: stack vertically on tablet */
  .founders-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  /* Form rows: single column */
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* Hero adjustments */
  .hero { padding: clamp(60px, 10vw, 80px) 0 50px; }
  .hero-discord-card { padding: 16px 18px; }
  .hero-image-wrap   { padding: 0 12px; }

  /* Features: smaller min */
  .features-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
  }

  /* Privacy: tabs stack */
  .privacy-tabs { flex-direction: column; }
  .privacy-tab  { text-align: center; }

  /* CTA buttons */
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Contact sidebar stacks first, then form */
  .contact-sidebar { flex-direction: row; flex-wrap: wrap; }
  .contact-info-card { flex: 1; min-width: 200px; }
}

/* ── 600px — Large phones ── */
@media (max-width: 600px) {
  /* Stats: 2 columns still, smaller padding */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .stat-card   { padding: 22px 14px; }
  .stat-value  { font-size: 2rem; }

  /* Features: single column */
  .features-grid { grid-template-columns: 1fr; }

  /* Founder cards single col */
  .founders-grid { grid-template-columns: 1fr; }
  .founder-card  { padding: 28px 20px; }
  .founder-avatar { width: 86px; height: 86px; }
  .founder-avatar-placeholder { width: 86px; height: 86px; font-size: 2.2rem; }

  /* Commands: single col list */
  .command-list { grid-template-columns: 1fr; }

  /* Field rows: 2 cols */
  .field-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 8px;
  }
  .field-row > *:nth-child(1) { grid-column: 1; }
  .field-row > *:nth-child(2) { grid-column: 2; }
  .field-row > *:nth-child(3) { grid-column: 1; }
  .field-row > *:nth-child(4) { grid-column: 2; }

  /* Webhook preview sticky off */
  .webhook-preview-stack { position: static; }

  /* Nav logo text */
  .nav-logo span { font-size: 1.2rem; }

  /* Footer */
  .footer-inner  { justify-content: center; text-align: center; }
  .footer-links  { justify-content: center; }
  .footer-bottom { justify-content: center; }

  /* Contact sidebar flat */
  .contact-sidebar    { flex-direction: column; }
  .contact-info-card  { min-width: unset; }

  /* Hero CTA: stack */
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Section header margins */
  .section-header { margin-bottom: 36px; }
}

/* ── 480px — Small phones ── */
@media (max-width: 480px) {
  /* Stats: still 2 col */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Category filters wrap smaller */
  .cat-btn { font-size: 0.72rem; padding: 6px 12px; }

  /* Embed color row: single col */
  .embed-color-row { grid-template-columns: 1fr; }

  /* Field rows: single col */
  .field-row { grid-template-columns: 1fr 1fr; }

  /* Service card: adjust */
  .service-card { flex-direction: column; align-items: flex-start; }
  .service-status-badge { align-self: flex-start; }

  /* Status overall text size */
  .status-overall { font-size: 0.9rem; padding: 12px 18px; }

  /* Mobile nav narrower */
  .mobile-nav-panel { width: min(280px, 88vw); }

  /* Hero title min-size */
  .hero-title { font-size: clamp(2.2rem, 9vw, 3rem); }

  /* Privacy tab: icon + text */
  .privacy-tab { font-size: 0.8rem; padding: 9px 12px; }

  /* Founder links */
  .founder-links { gap: 6px; }
  .founder-link  { font-size: 0.72rem; padding: 5px 10px; }

  /* Discord preview card */
  .hero-discord-card { padding: 14px 15px; }
  .discord-embed { padding: 10px 12px; }
}

/* ── 360px — Very small phones ── */
@media (max-width: 360px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card  { padding: 18px 10px; }
  .stat-value { font-size: 1.7rem; }
  .stat-icon  { font-size: 1.6rem; }

  .hero-title { font-size: clamp(1.9rem, 10vw, 2.6rem); }
  .hero-ctas .btn { padding: 10px 20px; font-size: 0.85rem; }

  .container { padding: 0 14px; }

  .founder-card { padding: 24px 16px; }
  .founder-avatar { width: 76px; height: 76px; }
  .founder-avatar-placeholder { width: 76px; height: 76px; font-size: 2rem; }
  .founder-name { font-size: 1.1rem; }

  .webhook-panel { padding: 16px; }
  .contact-form-panel { padding: 18px; }
}

/* ── Hover: disable on touch devices ── */
@media (hover: none) {
  .feature-card:hover,
  .stat-card:hover,
  .founder-card:hover,
  .card:hover,
  .service-card:hover { transform: none; }

  .btn-primary:hover,
  .btn-discord:hover { transform: none; }
}

/* ── High-DPI / Retina ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .nav-logo img,
  .founder-avatar,
  .mobile-nav-logo img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero-discord-card { animation: none; }
  #particles-canvas  { display: none; }
}

/* ── Print ── */
@media print {
  #navbar, footer, #mobile-nav, #particles-canvas { display: none !important; }
  .page { display: flex !important; }
  body  { background: white; color: black; }
}