/* =========================================================
   SyntaxGenius — Responsive Rules
   Breakpoints: desktop 1025+, tablet 481-1024, mobile <=480
   ========================================================= */

/* ---- Tablet ---- */
@media (max-width: 1024px){
  .tool-grid{ grid-template-columns: repeat(3, 1fr); }
  .related-tools .tool-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero-grid{ grid-template-columns: 1fr; }
  .terminal{ order:-1; }
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-col.col-tools{ display:none; }
}

/* ---- Nav collapses to hamburger ---- */
@media (max-width: 860px){
  .menu-btn{ display:flex; }
  .nav-links{
    position:fixed;
    top: 64px;
    left:0; right:0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction:column;
    align-items:stretch;
    padding: 10px;
    gap:2px;
    transform: translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links > li > a{ padding:12px 14px; }
  .nav-tools .tools-menu{
    display: none;
    position:static;
    box-shadow:none;
    border:none;
    grid-template-columns: 1fr 1fr;
    padding: 4px 4px 8px;
  }
  .nav-tools.open .tools-menu{ display:grid; }
}

/* ---- Mobile ---- */
@media (max-width: 640px){
  .tool-grid, .related-tools .tool-grid{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .control-row{ flex-direction:column; align-items:stretch; }
  .hero{ padding: 40px 0 32px; }
  .section{ padding: 40px 0; }
}

@media (max-width: 420px){
  .tool-grid, .related-tools .tool-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}