/* ============================================
   RESPONSIVE.CSS — Dorian Payet Portfolio
   Breakpoints: 1024 / 768 / 480
   ============================================ */

/* ============ TABLET (≤ 1024px) ============ */
@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-img-wrap { max-width: 420px; margin: 0 auto; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-stats { gap: 2rem; }
}

/* ============ MOBILE LARGE (≤ 768px) ============ */
@media (max-width: 768px) {
  :root { --sp: clamp(3rem, 7vw, 5rem); }

  /* Nav */
  .nav-links,
  .nav-actions .nav-btn { display: none; }
  .nav-toggle { display: flex; }

  /* Hero */
  .hero { padding-top: 70px; }
  .hero-title { font-size: clamp(1.1rem, 5vw, 1.6rem); }
  .hero-stats { gap: 1.5rem; }
  .hero-stat-num { font-size: 1.7rem; }

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

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

  /* Timeline */
  .timeline { padding-left: 2.25rem; }
  .tl-dot { left: -2.05rem; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }

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

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

/* ============ MOBILE SMALL (≤ 480px) ============ */
@media (max-width: 480px) {
  .skills-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .nav-mobile .nav-link { font-size: 1.25rem; }
  .tl-card { padding: 1.25rem; }
  .tl-head { flex-direction: column; gap: .5rem; }
  .page-hero { padding-top: calc(70px + 2.5rem); padding-bottom: 2.5rem; }
  .about-img-badge { display: none; }
}

/* ============ UTILITIES ============ */
@media (max-width: 768px)  { .hide-mobile  { display: none !important; } }
@media (min-width: 769px)  { .hide-desktop { display: none !important; } }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .tl-item, .skill-cat, .project-card {
    opacity: 1 !important; transform: none !important;
  }
}