/* =============================================
   BARONTECH — responsive.css
   Mobile-first breakpoints
   ============================================= */

/* ── TABLET: ≤ 1024px ── */
@media (max-width: 1024px) {
  .hero__container {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }

  .hero__desc { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .hero__visual { align-items: center; }

  .hero__stats {
    justify-content: center;
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .contact__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

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

  .skills__divider {
    width: 100%;
    height: 1px;
    margin: 24px 0;
  }

  .project-item {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .project-item__actions {
    flex-direction: row;
    align-items: flex-start;
  }

  .projects__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav__links { display: none; }
  .nav__cta   { display: none; }
  .nav__burger { display: flex; }
}

/* ── MOBILE: ≤ 640px ── */
@media (max-width: 640px) {
  :root { font-size: 15px; }

  .container { padding: 0 20px; }
  .section    { padding: 80px 0; }

  /* Cursor off on touch */
  .cursor,
  .cursor-follower { display: none; }
  body, button { cursor: auto; }

  /* Hero */
  .hero { padding: 120px 0 60px; }
  .hero__container { padding: 0 20px; gap: 40px; }

  .hero__image-wrap {
    width: 240px;
    height: 290px;
  }

  .hero__stats {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .hero__stat-divider { display: none; }

  /* Nav */
  .nav__inner { padding: 16px 20px; }
  .nav__mobile { padding: 12px 20px 20px; }

  /* About */
  .about__links { flex-direction: column; gap: 12px; }

  /* Skills */
  .skills__categories { gap: 0; }
  .skills__category { padding: 0 0 24px; }

  /* Projects */
  .project-item { padding: 28px 0; }
  .project-item__meta { flex-direction: row; align-items: center; gap: 12px; }

  /* Contact */
  .contact__grid { gap: 40px; }

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

  /* Buttons */
  .hero__actions { flex-direction: column; align-items: center; }
  .btn { width: 100%; justify-content: center; }

  /* Section headings */
  .section__heading { font-size: clamp(28px, 8vw, 40px); }
}

/* ── VERY SMALL: ≤ 380px ── */
@media (max-width: 380px) {
  .hero__name { font-size: 52px; }
  .hero__image-wrap { width: 200px; height: 240px; }
}