/* ==========================================================================
   responsive.css — breakpoints: 1024px (tablet), 768px (small tablet), 480px (mobile)
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; }
  .hero-card{ max-width:340px; margin:0 auto; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-visual{ position:static; max-width:340px; margin:0 auto 20px; }
  .contact-grid{ grid-template-columns: 1fr; }
  section{ padding:86px 0; }
}

/* ---------- Small tablet / large mobile ---------- */
@media (max-width: 768px){
  :root{ --nav-h:66px; }

  .nav-links{
    position:fixed; top: 84px; left:16px; right:16px;
    flex-direction:column; align-items:stretch; gap:4px;
    padding:14px; border-radius: var(--radius-md);
    background: var(--surface-solid); border:1px solid var(--border);
    box-shadow: 0 20px 40px hsl(var(--shadow-color) / 0.2);
    opacity:0; visibility:hidden; transform: translateY(-10px);
    transition: all var(--transition-med);
  }
  .nav-links.open{ opacity:1; visibility:visible; transform: translateY(0); }
  .nav-links a{ text-align:center; padding:12px; }
  .nav-toggle{ display:flex; }
  .navbar{ padding:8px 8px 8px 18px; }

  .hero{ padding-top: calc(var(--nav-h) + 24px); }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-stats{ flex-wrap:wrap; }

  .skills-grid{ grid-template-columns: 1fr; }
  .about-facts{ grid-template-columns: 1fr; }

  .timeline::before{ left:21px; }
  .timeline-item{ padding-left:58px; }
  .timeline-dot{ left:6px; width:28px; height:28px; }
  .timeline-card-head{ flex-direction:column; }

  .projects-toolbar{ flex-direction:column; align-items:stretch; }
  .project-search input{ width:100%; }

  .form-row{ grid-template-columns:1fr; }

  .footer-top{ flex-direction:column; }
  .footer-cols{ gap:36px; }
  .footer-bottom{ flex-direction:column; text-align:center; }

  section{ padding:70px 0; }
  .section-head{ margin-bottom:40px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 480px){
  .container{ padding-inline:18px; }
  .hero h1{ font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hero-desc{ font-size:0.96rem; }
  .hero-card-body{ font-size:0.76rem; padding:18px; }
  .hero-stats{ gap:0; }
  .hero-stat b{ font-size:1.1rem; }

  .about-badge{ position:static; margin-top:14px; display:inline-flex; }
  .about-photo{ padding:18px; }

  .edu-card{ flex-direction:column; }
  .edu-top{ flex-direction:column; align-items:flex-start; }

  .contact-form, .contact-info{ padding:22px; }
  .footer-cols{ flex-direction:column; gap:24px; }

  .scroll-top-btn{ right:16px; bottom:16px; width:44px; height:44px; }
}