/* ==========================================================================
   RESPONSIVE — mobile-first breakpoints: 480 / 768 / 1024 / 1280
   ========================================================================== */

/* Скрываем мобильное меню на ПК по умолчанию */
.mobile-drawer {
  display: none;
}

/* ---------- ≤1280px ---------- */
@media (max-width: 1280px) {
  .nav-container { padding: 0 24px; }
  .nav-links { gap: 2px; }
  .nav-link { padding: 8px 10px; font-size: .82rem; }
}

/* ---------- ≤1024px : tablet ---------- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .burger { display: flex; }

  .mobile-drawer {
    position: fixed; inset: 0;
    z-index: 999;
    background: rgba(10,14,23,.98);
    backdrop-filter: blur(10px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  
  /* Перебиваем display: none при клике на бургер */
  .mobile-drawer.open { 
    display: flex !important; 
  }

  .mobile-drawer a {
    font-family: var(--font-display);
    font-size: 1.4rem;
    padding: 14px 0;
    color: var(--color-text-secondary);
    opacity: 0;
    animation: drawerFadeIn .4s ease forwards;
  }
  .mobile-drawer a:hover, .mobile-drawer a:focus-visible { color: var(--color-neon-blue); }

  .counters-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .cards-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .skills-columns { grid-template-columns: 1fr; gap: 40px; }
  .languages-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-timeline { flex-wrap: wrap; }
  .about-timeline-line { display: none; }
}

/* ---------- ≤768px : large mobile ---------- */
@media (max-width: 768px) {
  .section { padding: 80px 20px; }
  .section-inner { padding: 0; }
  .cards-grid-4 { grid-template-columns: 1fr; }
  .cards-grid-3 { grid-template-columns: 1fr; }
  .languages-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .neon-btn { width: 100%; }
  .workflow { flex-direction: column; }
  .workflow-arrow { transform: rotate(90deg); }
  .main-card-head { flex-direction: column; }
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ---------- ≤480px : small mobile ---------- */
@media (max-width: 480px) {
  .counters-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .counter-value { font-size: 1.7rem; }
  .languages-grid { grid-template-columns: 1fr 1fr; }
  .hero-name { letter-spacing: 1px; }
  .contact-form { padding: 22px; }
  .neon-card { padding: 22px; }
  .nav-logo { font-size: 1.1rem; }
}

/* Ensure touch targets stay accessible */
@media (pointer: coarse) {
  .neon-btn, .nav-link, .contact-item, .back-to-top, .burger { min-height: 44px; }
}