/* ==========================================================================
   Responsive — Mobile-First Breakpoints
   ========================================================================== */

@media (max-width: 1024px) {
  .hero__container { grid-template-columns: 1fr; text-align: center; }
  .hero__intro { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__stats { justify-content: center; }
  .hero__visual { order: -1; }
  .hero__photo { width: clamp(180px, 40vw, 260px); height: clamp(180px, 40vw, 260px); }
  .about__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --nav-height: 64px; }
  .nav__logo-text { display: none; }
  .nav__toggle { display: flex; }

  .nav__menu {
    position: fixed; top: var(--nav-height); left: 0;
    width: 100%; height: calc(100dvh - var(--nav-height));
    flex-direction: column; align-items: stretch;
    padding: 1.5rem; gap: 0.25rem;
    background: var(--overlay); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transform: translateX(100%); transition: transform var(--transition); overflow-y: auto;
  }
  .nav__menu.open { transform: translateX(0); }
  .nav__link { padding: 0.875rem 1rem; font-size: 1rem; border-radius: var(--radius-md); }
  .nav__link::after { display: none; }
  .nav__link.active { background: rgba(37, 99, 235, 0.1); color: var(--accent); }

  .projects__grid { grid-template-columns: 1fr; }
  .timeline::before { left: 5px; }
  .timeline__item { padding-left: 2rem; }
  .timeline__marker { left: 0; }
  .footer__container { flex-direction: column; text-align: center; }
  .scroll-indicator { display: none; }
  .back-to-top { bottom: 1.25rem; right: 1.25rem; width: 2.75rem; height: 2.75rem; }
}

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__stats { flex-direction: column; gap: 1rem; align-items: center; }
  .contact__actions { flex-direction: column; }
  .contact__actions .btn { width: 100%; }
  .projects__filters { gap: 0.375rem; }
  .filter-btn { padding: 0.375rem 0.875rem; font-size: 0.75rem; }
  .education-card { flex-direction: column; text-align: center; }
  .education-card__badge { margin-inline: auto; }
}

@media (min-width: 1400px) {
  :root { --container-max: 1320px; }
}