/* ============================================================
   MOBILE.CSS — Full Responsive Styles
   ============================================================ */

/* ─── TABLET (≤1024px) ───────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-name-line { font-size: clamp(4rem, 12vw, 8rem); }
  #three-canvas   { width: 280px; height: 310px; right: 2rem; }
  .exp-layout     { grid-template-columns: 1fr; gap: 3rem; }
}

/* ─── MOBILE (≤768px) ────────────────────────────────────── */
@media (max-width: 768px) {

  /* NAV */
  #nav { padding: 0 1.2rem; }
  .nav-logo { font-size: 0.62rem; letter-spacing: 0.1em; }
  .nav-links { display: none; }

  /* HERO */
  #hero { justify-content: flex-end; }
  .hero-content { padding: 0 1.5rem 5rem; }
  .hero-name-line { font-size: clamp(3.2rem, 14vw, 5rem); }
  .hero-tagline { font-size: 0.78rem; }
  .hero-ctas { flex-direction: column; gap: 0.8rem; }
  .hero-ctas .btn { width: 100%; justify-content: center; padding: 0.9rem; }
  #three-canvas { width: 140px; height: 160px; right: 1rem; bottom: 8rem; opacity: 0.6; }
  .scroll-indicator { display: none; }
  .hero-bottom { flex-direction: column; gap: 0.2rem; align-items: flex-start; }

  /* STORY — stack vertically on mobile */
  #story { height: auto !important; }

  .story-track-wrap {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }

  .story-track {
    flex-direction: column !important;
    width: 100% !important;
    transform: none !important;
    height: auto !important;
  }

  .story-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
    grid-template-columns: 1fr !important;
    padding: 4rem 1.5rem !important;
    gap: 2rem !important;
  }

  .story-panel-photo {
    height: 50vw !important;
    min-height: 260px;
  }

  .story-panel-content--right { order: -1; }

  .story-panel--quote {
    grid-template-columns: 1fr !important;
    padding: 4rem 1.5rem !important;
  }

  .story-quote { font-size: clamp(2.2rem, 8vw, 3.5rem) !important; }

  .story-title  { font-size: clamp(2.5rem, 9vw, 4rem); }
  .story-body   { font-size: 0.9rem; }
  .story-progress { display: none; }

  /* SKILLS */
  #skills { padding: 3rem 1.2rem; }
  .skills-grid { grid-template-columns: 1fr !important; }
  .skill-group:nth-child(7) { grid-column: 1 / -1 !important; }
  .skills-header .s-title { font-size: clamp(3rem, 10vw, 5rem); }

  /* PROJECTS */
  #projects { padding: 3rem 1.2rem; }
  .project-row {
    grid-template-columns: 1fr !important;
    gap: 1rem;
    padding: 1.8rem 0;
  }
  .project-num { display: none; }
  .project-action { margin-top: 0.5rem; }
  .project-title { font-size: 1.3rem !important; }

  /* EXPERIENCE */
  #experience { padding: 3rem 1.2rem; }
  .exp-layout { grid-template-columns: 1fr !important; gap: 2rem; }
  .exp-company { font-size: 1.6rem; }

  /* CONTACT */
  #contact { padding: 4rem 1.2rem; }
  .contact-title { font-size: clamp(3rem, 10vw, 5rem) !important; }
  .contact-email { font-size: clamp(1rem, 4vw, 1.8rem) !important; }
  .contact-btns { flex-direction: column; align-items: center; }
  .contact-btns .btn { width: 100%; justify-content: center; }

  /* FEEDBACK */
  #feedback { padding: 3rem 1.2rem; }
  #feedback .s-title { font-size: clamp(2.5rem, 10vw, 4.5rem); }

  /* FOOTER */
  #footer { flex-direction: column; gap: 0.5rem; padding: 1.5rem 1.2rem; }
}

/* ─── SMALL MOBILE (≤480px) ──────────────────────────────── */
@media (max-width: 480px) {
  .hero-name-line { font-size: clamp(2.8rem, 16vw, 4rem); }
  .hero-ctas .btn { font-size: 0.68rem; padding: 0.8rem 1rem; }
  .skill-group { padding: 1.5rem; }
  .exp-card { padding: 1.2rem; }
  .contact-bg-word { font-size: clamp(4rem, 20vw, 8rem); }
}

/* ─── DISABLE HORIZONTAL SCROLL GSAP ON MOBILE ───────────── */
@media (max-width: 768px) {
  /* Story pins create scroll issues on mobile — disable */
  .story-track-wrap { transform: none !important; }
}