/* ============================================================
   RESPONSIVE
   Breakpoints: >1200 desktop · 992-1200 laptop · 768-992 tablet · <768 mobile · <480 small
   ============================================================ */

/* ---------- Laptop ---------- */
@media (max-width: 1200px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .stat{ border-right: 1px solid var(--line); }
  .stat:nth-child(2n){ border-right: none; }
  .stat:nth-child(n+3){ border-top: 1px solid var(--line); padding-top: 2rem; }
}

/* ---------- Tablet ---------- */
@media (max-width: 992px){
  .nav-links{
    position: fixed; inset: 0 0 0 auto;
    width: min(78vw, 340px);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    padding: 2rem clamp(1.5rem, 8vw, 3rem);
    background: var(--bg-soft);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    z-index: 400;
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a{ font-size: 1.1rem; }
  .nav-toggle{ display:flex; position:relative; z-index:600; }

  .hero-grid{ grid-template-columns: 1fr; text-align:center; }
  .hero-copy p{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-tags{ justify-content:center; }
  .hero-visual{ max-width: 420px; margin: 0 auto; aspect-ratio: 4/4; }

  .about-grid{ grid-template-columns: 1fr; }
  .about-frame{ max-width: 380px; margin: 0 auto; }

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

  .project, .project:nth-child(even){ grid-template-columns: 1fr; direction: ltr; }

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

/* ---------- Mobile ---------- */
@media (max-width: 768px){
  :root{ --gutter: 1.25rem; }

  .services-grid{ grid-template-columns: 1fr; }
  .service-card{ min-height:auto; padding: 2rem 1.6rem; }
  .service-card p{ max-height: none; opacity:1; margin-top:.8rem; } /* no hover on touch: always show */

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

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

  .footer-top{ flex-direction: column; }
  .footer-cols{ gap: 2.4rem; flex-wrap: wrap; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }

  .testi-controls{ flex-wrap: wrap; }

  section{ padding: 3.5rem 0; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 480px){
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ justify-content:center; }
  .hero-tags{ flex-direction: column; align-items:center; gap: .8rem; }

  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .stat .num{ font-size: 2.1rem; }

  .footer-cols{ gap: 1.8rem; }
  .logo{ font-size: 1.15rem; }
}

/* ---------- Fine pointers only: keep hover reveals; touch devices show content directly ---------- */
@media (hover: none){
  .service-card p{ max-height:none; opacity:1; margin-top:.8rem; }
  .hero::before, .project-media::before{ display:none; }
}