/* ====================================================
   VV Theme — Responsive CSS v2.1
   ==================================================== */

/* ====================================================
   TABLET — 1024px
   ==================================================== */
@media (max-width: 1024px) {
  .header-cta { display: none; }
  .vv-nav { display: none; }
  .vv-burger { display: flex; }

  .hero-inner {
    flex-direction: column; align-items: center;
    justify-content: center; gap: 1.5rem;
    padding: 1.5rem 2rem; text-align: center;
  }
  .hero-left { max-width: 100%; }
  .hero-right { order: -1; }
  .hero-tags, .hero-btns, .hero-socials { justify-content: center; }
  .hero-availability { justify-content: center; }

  /* Profile shell → image must match */
  .profile-shell { width: 240px; height: 240px; }
  .profile-img   { width: 190px; height: 190px; }
  .profile-initials { font-size: 3rem; }

  .float-badge.top-left  { left: -10px; top: 0; }
  .float-badge.bot-right { right: -10px; bottom: 0; }

  .about-banner-inner { flex-direction: column; text-align: center; gap: 1.5rem; }
  .banner-tags { justify-content: center; }
  .about-grid { grid-template-columns: 1fr; }
  .port-grid { grid-template-columns: repeat(2,1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: repeat(2,1fr); }
  .skills-grid { grid-template-columns: 1fr; }
}

/* ====================================================
   MOBILE — 768px
   ==================================================== */
@media (max-width: 768px) {
  :root { --hh: 58px; --fh: auto; }

  /* Home: allow scroll, unlock height */
  .vv-screen-fit, .page-wrap {
    height: auto; overflow: visible; min-height: 100dvh;
  }
  .hero {
    flex: none;
    display: block;
    padding-top: calc(var(--hh) + 1rem);
    padding-bottom: 2rem;
    overflow: visible;
  }
  .hero-inner {
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.25rem;
    text-align: center;
    gap: 1.5rem;
  }
  .hero-right { order: -1; }
  #vv-matrix { display: none; } /* hide canvas on small screens for perf */

  /* Profile sizing — MUST match shell */
  .profile-shell { width: 180px; height: 180px; }
  .profile-img   { width: 142px; height: 142px; }
  .profile-initials { font-size: 2.2rem; letter-spacing: -1px; }
  .profile-ring-outer::before { width: 6px; height: 6px; }
  .float-badge { display: none; }

  /* Hero text */
  .hero-name { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .hero-sub  { font-size: .72rem; letter-spacing: 1px; }
  .hero-prompt { font-size: .65rem; }

  /* About banner */
  .about-banner { padding: 2rem 1rem; }
  .banner-photo { width: 120px; height: 120px; }
  .bi { font-size: 2rem; }

  /* Images grid — 1 col */
  .images-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4,200px); }

  /* Portfolio */
  .port-grid { grid-template-columns: 1fr; }

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

  /* Footer */
  .footer-inner { flex-direction: column; gap: .5rem; text-align: center; padding: .75rem 1rem; }
  .footer-right { flex-wrap: wrap; justify-content: center; gap: .8rem; }
  .vv-footer { height: auto; min-height: 44px; }

  /* Section padding */
  .about-content, .images-section, .skills-section, .timeline-section, .personal-section,
  .port-cta, .help-section, .contact-main { padding: 2.5rem 0; }

  .port-meta { gap: 1rem; }
  .about-stats { gap: 1rem; }
  .astat-n { font-size: 1.3rem; }
  .tl-wrap { padding-left: 1.2rem; }
}

/* ====================================================
   SMALL MOBILE — 480px
   ==================================================== */
@media (max-width: 480px) {
  .con { padding: 0 1rem; }

  .hero-name { font-size: clamp(1.6rem, 9vw, 2.2rem); }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .btn { font-size: .72rem; padding: .55rem 1.1rem; }

  .profile-shell { width: 150px; height: 150px; }
  .profile-img   { width: 118px; height: 118px; }
  .profile-initials { font-size: 1.8rem; }

  .about-banner { padding: 1.5rem 1rem; }
  .banner-name { font-size: 1.5rem; }
  .sec-tit { font-size: 1.3rem; }

  .port-card-body { padding: .75rem; }
  .pc-title { font-size: .78rem; }

  .images-grid { grid-template-rows: repeat(4,160px); }

  .help-grid { gap: .7rem; }
  .help-card { padding: 1rem; }

  .filter-tabs { gap: .25rem; }
  .ftab { font-size: .58rem; padding: .35rem .6rem; }

  .interests-grid { gap: .6rem; }
  .interest-card { padding: .8rem 1rem; }
}

/* ====================================================
   TOUCH DEVICES
   ==================================================== */
@media (pointer: coarse) {
  body { cursor: auto !important; }
  a, button, [role=button], .ftab, select, input, .interest-card { cursor: pointer; }
  #vv-cur, #vv-ring { display: none !important; }
}

/* ====================================================
   PRINT
   ==================================================== */
@media print {
  #vv-loader, #vv-cur, #vv-ring, .vv-header, .vv-mobile-nav, .vv-burger,
  #vv-matrix, .hero-scan { display: none !important; }
  body { background: #fff; color: #000; cursor: auto; }
  .page-top { padding-top: 0; }
}