/* ============================================================
   GITTO MATHEW — PORTFOLIO
   responsive.css — tablet & mobile adaptations
   ============================================================ */

/* ============ Tablet (≤ 1024px) ============ */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__side { order: -1; }
  .chip-card { width: 220px; height: 220px; }
  .chip-card__core { width: 130px; height: 130px; }
  .pin--t, .pin--b { top: 24px; bottom: 24px; }
  .pin--l, .pin--r { left: 24px; right: 24px; }

  .about__grid { grid-template-columns: 1fr; }
  .resume__wrap { grid-template-columns: 1fr; }
  .resume__doc { transform: none; }

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

/* ============ Navigation switch (≤ 860px) ============ */
@media (max-width: 860px) {
  .nav__actions { display: flex; }
  .nav__toggle { display: flex; }
  .nav__resume { display: none; }

  .nav__links {
    position: fixed;
    top: var(--nav-h);
    right: 0;
    width: min(320px, 82vw);
    height: calc(100vh - var(--nav-h));
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 1.6rem 1.4rem;
    background: rgba(5, 8, 22, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--line);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow-y: auto;
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__link {
    width: 100%;
    padding: 12px 14px;
    font-size: 1.02rem;
    border-radius: 10px;
  }
  .nav__link::after { display: none; }
  .nav__link.is-active, .nav__link:hover { background: rgba(0, 229, 255, 0.08); color: var(--secondary); }
}

/* ============ Mobile landscape / small tablet (≤ 640px) ============ */
@media (max-width: 640px) {
  :root { --nav-h: 64px; }

  .section { padding: 4rem 0; }

  .hero { padding-top: calc(var(--nav-h) + 1.2rem); }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-top: 2.2rem; }
  .hero__scroll { display: none; }
  .hero__cta .btn { flex: 1 1 auto; }

  .about__tagline { white-space: normal; font-size: 0.78rem; }

  .skills__grid, .projects__grid, .achievements__grid { grid-template-columns: 1fr; }
  .certs__grid { grid-template-columns: 1fr; }

  .timeline { padding-left: 1.9rem; }
  .timeline__node { left: -1.9rem; width: 24px; height: 24px; top: 16px; }
  .timeline::before { left: 11px; }

  .github__panel { grid-template-columns: 1fr; gap: 1.6rem; }
  .github__right { flex-direction: row; flex-wrap: wrap; }
  .github__stat-card { flex: 1 1 140px; }

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

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

  /* Chat panel nearly full-width on phones */
  .chatbot { right: 14px; bottom: 14px; }
  .chatbot__panel {
    position: fixed;
    right: 14px;
    bottom: 84px;
    width: calc(100vw - 28px);
    max-height: calc(100vh - 110px);
  }

  /* Back-to-top sits above the chat button */
  .back-to-top { bottom: 84px; }
}

/* ============ Small phones (≤ 420px) ============ */
@media (max-width: 420px) {
  .hero__name { font-size: 2.4rem; }
  .stat { padding: 0.9rem 0.3rem; }
  .resume__buttons .btn { width: 100%; }
  .footer__bottom { flex-direction: column; text-align: center; }
}