/* ============================================================
   Responsive Design
   ============================================================ */

/* ---- Tablet & Small Desktop (max-width: 1024px) ---- */
@media (max-width: 1024px) {
  .about {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about__info {
    grid-template-columns: 1fr 1fr;
  }

  .skills__tags {
    justify-content: center;
  }

  .education {
    grid-template-columns: 1fr;
    max-width: 600px;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Mobile (max-width: 768px) ---- */
@media (max-width: 768px) {
  :root {
    --navbar-height: 60px;
    --space-4xl: 4rem;
    --space-3xl: 3rem;
    --space-2xl: 2rem;
  }

  /* Navbar */
  .hamburger {
    display: flex;
  }

  .navbar__menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-overlay);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xl);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-base);
  }

  .navbar__menu--open {
    opacity: 1;
    pointer-events: all;
  }

  .navbar__link {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
  }

  /* Hero */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__social {
    gap: var(--space-sm);
  }

  .hero__title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  /* Skills */
  .skills__grid {
    grid-template-columns: 1fr;
  }

  /* Projects */
  .projects__grid {
    grid-template-columns: 1fr;
  }

  /* Contact */
  .contact {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  /* Timeline */
  .timeline {
    padding-left: var(--space-lg);
  }

  .timeline__item {
    padding-left: var(--space-md);
  }
}

/* ---- Small Mobile (max-width: 480px) ---- */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }

  .about__info {
    grid-template-columns: 1fr;
  }

  .about__avatar-wrapper {
    width: 180px;
    height: 180px;
  }

  .section__title {
    font-size: var(--font-size-2xl);
  }

  .projects__filter {
    gap: var(--space-xs);
  }

  .filter-btn {
    font-size: var(--font-size-xs);
    padding: 0.4rem 0.9rem;
  }

  .education__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contact__form-wrapper {
    padding: var(--space-lg);
  }

  .project-card__body {
    padding: var(--space-md);
  }
}

/* ---- Print Styles ---- */
@media print {
  .navbar,
  .hero__canvas,
  .hero__overlay,
  .hero__scroll,
  .back-to-top,
  .theme-toggle,
  .hamburger,
  .contact__form-wrapper {
    display: none !important;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
  }

  .section {
    padding: 1.5rem 0;
    break-inside: avoid;
  }

  body {
    background: white;
    color: black;
  }

  .project-card {
    break-inside: avoid;
    border: 1px solid #ddd;
  }
}