/* Compass Gym - aanpassingen voor tablet en smartphone (moet als laatste geladen worden) */

@media (max-width: 1180px) {
  .nav-links {
    display: none;
  }
}

@media (max-width: 1100px) {
  .grid-5 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .reels { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .split, .steps, .grid-2 {
    grid-template-columns: minmax(0,1fr);
  }
  .split--center, .audit-inner, .faq-layout, .contact {
    gap: 40px;
  }
  .h1 { font-size: 44px; }
  .h2 { font-size: 32px; }
  .h2--xl { font-size: 36px; }
  .section { padding-top: 72px; padding-bottom: 72px; }
  .section--tight { padding-top: 0; }
  .svc-detail-main, .svc-detail-side, .step-panels { padding: 28px; }
  .svc-detail-side { border-left: 0; border-top: 1px solid var(--line); }
  .included { padding: 28px; }
  .aanpak-quote p { font-size: 22px; }
  .hero-toggle { top: 88px; }
  .modal-box { margin: 24px 12px; padding: 40px 24px; }
}

@media (max-width: 600px) {
  .grid-4, .grid-3 { grid-template-columns: minmax(0,1fr); }
  .grid-5 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .h1 { font-size: 36px; }
  .hero-lead { font-size: 18px; }
  .brand span { display: none; }
  .game { grid-template-columns: minmax(0,1fr); }
  .game img { min-height: 220px; }
  .audit-box { padding: 24px; }
  .score span { font-size: 60px; }
  .chat-btn span { display: none; }
  .chat-btn { padding: 0 18px; }
}