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

/* ==========================================================================
   TABLET — max-width: 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  /* Navigation */
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  /* About */
  .about__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about__meta {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Projects */
  .project-card--featured {
    grid-template-columns: 1fr;
  }

  .project-card--featured .project-card__visual {
    min-height: 250px;
  }

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

  /* Section headings */
  .skills__heading,
  .experience__heading {
    margin-bottom: 0.5rem;
  }
}

/* ==========================================================================
   MOBILE — max-width: 768px
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --section-spacing: clamp(64px, 12vh, 120px);
  }

  /* Hero */
  .hero {
    min-height: 100svh;
    padding-top: 15vh;
  }

  .hero__name {
    font-size: clamp(3rem, 15vw, 5rem);
  }

  .hero__tagline br {
    display: none;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__scroll {
    bottom: 2rem;
  }

  /* About */
  .about__meta {
    grid-template-columns: 1fr;
  }

  /* Projects */
  .project-card__info {
    padding: 1.5rem;
  }

  /* Contact */
  .contact__actions {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }

  .contact__actions .btn {
    width: 100%;
  }

  /* Footer */
  .footer__inner {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  /* Timeline */
  .timeline {
    padding-left: 1.5rem;
  }

  .timeline__item {
    padding-left: 1.5rem;
  }

  .timeline__marker {
    left: -1.5rem;
  }
}

/* ==========================================================================
   SMALL MOBILE — max-width: 480px
   ========================================================================== */
@media (max-width: 480px) {
  .hero__name {
    font-size: clamp(2.5rem, 18vw, 4rem);
  }

  .about__heading {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .contact__heading {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .project-card__info {
    padding: 1.25rem;
  }

  .skill-group {
    padding: 1.5rem;
  }
}