/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Full Device Coverage
   Add this AFTER your existing style.css
   Covers: Mobile (portrait + landscape), Tablet, Laptop, Desktop
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   1. LARGE DESKTOP  (1400px+)
═══════════════════════════════════════ */
@media (min-width: 1400px) {
  section {
    max-width: 1280px;
  }
  .hero-grid {
    grid-template-columns: 1fr 460px;
    gap: 6rem;
  }
  .profile-wrap {
    width: 400px;
    height: 400px;
  }
}

/* ═══════════════════════════════════════
   2. STANDARD DESKTOP / LAPTOP  (1025px–1399px)
═══════════════════════════════════════ */
@media (max-width: 1399px) and (min-width: 1025px) {
  .hero-grid {
    grid-template-columns: 1fr 380px;
    gap: 4rem;
  }
  .profile-wrap {
    width: 340px;
    height: 340px;
  }
  .proj-bento {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ═══════════════════════════════════════
   3. TABLET LANDSCAPE  (900px–1024px)
═══════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 900px) {
  :root { --nav-h: 64px; }

  section {
    padding: 4rem clamp(1.5rem, 4vw, 3rem);
  }

  /* NAV */
  .nav-links a {
    font-size: 0.68rem;
    padding: 0.3rem 0.6rem;
  }
  .nav-right { gap: 1.5rem; }

  /* HERO */
  #hero {
    padding-top: calc(var(--nav-h) + 2.5rem);
    padding-bottom: 5rem;
    padding-left: clamp(1.5rem, 4vw, 3rem);
    padding-right: clamp(1.5rem, 4vw, 3rem);
    min-height: 100svh;
  }
  .hero-grid {
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: center;
  }
  .hero-name {
    font-size: clamp(2.6rem, 7vw, 4.2rem);
  }
  .profile-wrap {
    width: 280px;
    height: 280px;
  }
  .profile-tag {
    left: -10px;
    font-size: 0.62rem;
    padding: 0.45rem 0.75rem;
  }
  .profile-badge {
    right: -10px;
    padding: 0.55rem 0.85rem;
  }
  .hero-desc { max-width: 440px; font-size: 0.93rem; }

  /* ABOUT */
  .about-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
  }
  .stat-text .val { font-size: 1.05rem; }

  /* SKILLS */
  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* PROJECTS */
  .proj-bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .pc-featured {
    grid-column: span 2;
  }
  .pc-featured .pc-preview { height: 240px; }

  /* EDUCATION */
  .edu-degree { font-size: 1.25rem; }

  /* CONTACT */
  .contact-grid {
    grid-template-columns: 1fr 1.4fr;
    gap: 3rem;
  }
}

/* ═══════════════════════════════════════
   4. TABLET PORTRAIT  (601px–899px)
   ← THIS IS THE MAIN PROBLEM AREA
═══════════════════════════════════════ */
@media (max-width: 899px) and (min-width: 601px) {
  :root { --nav-h: 62px; }

  section {
    padding: 3.5rem 1.75rem;
  }

  h2.sec-h {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    margin-bottom: 2.5rem;
  }

  /* NAV */
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }

  /* HERO — single column, image on top */
  #hero {
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 2rem);
    padding-bottom: 4rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    align-items: flex-start;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
  }
  .hero-right {
    order: -1;
    justify-content: center;
  }
  .profile-wrap {
    width: 220px;
    height: 220px;
  }
  .profile-tag {
    left: -8px;
    top: 8px;
    font-size: 0.6rem;
    padding: 0.4rem 0.7rem;
    white-space: nowrap;
  }
  .profile-badge {
    right: -8px;
    bottom: -4px;
    padding: 0.5rem 0.75rem;
  }
  .badge-label { font-size: 0.65rem; }
  .badge-sub   { font-size: 0.58rem; }
  .hero-name {
    font-size: clamp(2.8rem, 10vw, 4.5rem);
    text-align: left;
  }
  .hero-desc {
    font-size: 0.92rem;
    max-width: 100%;
  }
  .hero-pill { font-size: 0.68rem; }
  .hero-role-wrap { font-size: clamp(0.8rem, 2.5vw, 1rem); }
  .hero-btns {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .hero-btns .btn {
    flex: 1;
    min-width: 160px;
    justify-content: center;
    font-size: 0.75rem;
    padding: 0.7rem 1.2rem;
  }

  /* ABOUT */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .stat-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
  }
  .stat-c { padding: 1.1rem 1.2rem; }
  .stat-ico { font-size: 1.4rem; }
  .stat-text .val { font-size: 1rem; }
  .stat-text .lbl { font-size: 0.62rem; }

  /* SKILLS */
  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
  }
  .skill-c { padding: 1.4rem 1rem 1.2rem; }
  .sk-ico   { font-size: 1.8rem; }
  .sk-name  { font-size: 0.72rem; }

  /* PROJECTS */
  .proj-bento {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .pc-featured {
    grid-column: span 1;
  }
  .pc-featured .pc-preview { height: 220px; }
  .pc-preview { height: 190px; }
  .pc-featured .pc-title { font-size: 1.35rem; }
  .pc-featured .pc-emoji { font-size: 4rem; }
  .pc-body { padding: 1.25rem 1.4rem 1.4rem; }

  /* EDUCATION */
  .edu-timeline { padding-left: 1.75rem; }
  .edu-degree { font-size: 1.2rem; }
  .edu-inst   { font-size: 0.88rem; }
  .edu-card   { padding: 1.4rem; }
  .edu-item   { padding-bottom: 2.5rem; }

  /* CONTACT */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ct-info h3 { font-size: 1.4rem; }
  .ct-form    { padding: 1.75rem; }

  /* FOOTER */
  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 2rem 1.75rem;
  }
  .footer-socials { flex-wrap: wrap; justify-content: center; }
}

/* ═══════════════════════════════════════
   5. MOBILE LANDSCAPE  (481px–767px height ≤500px)
   (e.g. iPhone SE / 12 rotated)
═══════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  :root { --nav-h: 54px; }

  #hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: 3rem;
  }
  .hero-grid {
    grid-template-columns: 1fr 200px;
    gap: 2rem;
    align-items: center;
  }
  .hero-right { order: 1; }
  .profile-wrap {
    width: 160px;
    height: 160px;
  }
  .profile-tag {
    font-size: 0.55rem;
    padding: 0.3rem 0.55rem;
    left: -6px; top: -4px;
  }
  .profile-badge {
    right: -6px; bottom: -4px;
    padding: 0.4rem 0.6rem;
  }
  .hero-name {
    font-size: clamp(2rem, 7vw, 3rem);
    margin-bottom: 0.4rem;
  }
  .hero-pill { margin-bottom: 0.9rem; font-size: 0.62rem; }
  .hero-role-wrap { font-size: 0.78rem; margin-bottom: 0.9rem; }
  .hero-desc { font-size: 0.82rem; margin-bottom: 1.2rem; line-height: 1.65; }
  .hero-btns { gap: 0.6rem; margin-bottom: 1.5rem; }
  .hero-btns .btn { padding: 0.55rem 1rem; font-size: 0.68rem; }
  .hero-socials { gap: 0.5rem; }
  .hsoc { width: 34px; height: 34px; border-radius: 7px; }
  .scroll-hint { display: none; }

  section {
    padding: 2.5rem 1.25rem;
  }
  h2.sec-h { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: 1.75rem; }

  .about-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .stat-cards { gap: 0.75rem; }
  .stat-c { padding: 0.9rem 1rem; }

  .skills-grid { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
  .skill-c { padding: 1.1rem 0.75rem 1rem; }
  .sk-ico { font-size: 1.5rem; margin-bottom: 0.5rem; }
  .sk-name { font-size: 0.65rem; }

  .proj-bento { grid-template-columns: repeat(2, 1fr); }
  .pc-featured { grid-column: span 2; }
  .pc-featured .pc-preview { height: 160px; }
  .pc-preview { height: 140px; }

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

  footer { padding: 1.5rem 1.25rem; gap: 0.75rem; }
}

/* ═══════════════════════════════════════
   6. MOBILE PORTRAIT  (≤600px)
═══════════════════════════════════════ */
@media (max-width: 600px) {
  :root { --nav-h: 60px; }

  section {
    padding: 3rem 1.25rem;
  }
  h2.sec-h {
    font-size: clamp(1.75rem, 8vw, 2.3rem);
    margin-bottom: 2rem;
  }

  /* NAV */
  nav {
    padding: 0 1.25rem;
  }
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .nav-logo { font-size: 0.95rem; }

  /* MOBILE MENU */
  .mobile-menu { padding: 1.25rem 1.5rem 1.75rem; }
  .mobile-menu a { font-size: 0.8rem; padding: 0.65rem 0.9rem; }

  /* HERO */
  #hero {
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: 4rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hero-right {
    order: -1;
    justify-content: center;
  }
  .profile-wrap {
    width: 200px;
    height: 200px;
  }
  .profile-tag {
    left: -8px;
    top: 6px;
    font-size: 0.58rem;
    padding: 0.38rem 0.65rem;
    white-space: nowrap;
  }
  .profile-badge {
    right: -8px;
    bottom: -6px;
    padding: 0.5rem 0.7rem;
    gap: 0.45rem;
  }
  .badge-label { font-size: 0.62rem; }
  .badge-sub   { font-size: 0.55rem; }

  .hero-pill {
    font-size: 0.64rem;
    padding: 0.35rem 0.85rem 0.35rem 0.45rem;
    margin-bottom: 1.25rem;
  }
  .hero-name {
    font-size: clamp(2.8rem, 14vw, 4rem);
    letter-spacing: -0.04em;
  }
  .hero-role-wrap {
    font-size: 0.8rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .hero-desc {
    font-size: 0.88rem;
    line-height: 1.75;
    margin-bottom: 1.75rem;
    max-width: 100%;
  }
  .hero-btns {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
  }
  .hero-btns .btn {
    width: 100%;
    justify-content: center;
    font-size: 0.78rem;
    padding: 0.82rem 1.5rem;
  }
  .hero-socials { gap: 0.6rem; }
  .hsoc { width: 38px; height: 38px; border-radius: 8px; }

  /* SCROLL HINT */
  .scroll-hint { bottom: 1.25rem; }

  /* ABOUT */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-body { font-size: 0.9rem; }
  .about-chips { gap: 0.4rem; }
  .chip { font-size: 0.65rem; padding: 0.25rem 0.65rem; }

  .stat-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .stat-c {
    padding: 1rem;
    gap: 0.85rem;
    flex-direction: row;
    align-items: center;
  }
  .stat-ico { font-size: 1.4rem; }
  .stat-text .val { font-size: 0.9rem; line-height: 1.3; }
  .stat-text .lbl { font-size: 0.6rem; }

  /* SKILLS */
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
  .skill-c {
    padding: 1.4rem 1rem 1.2rem;
  }
  .sk-ico   { font-size: 1.9rem; }
  .sk-name  { font-size: 0.72rem; margin-bottom: 0.6rem; }
  .sk-pct   { font-size: 0.6rem; }

  /* PROJECTS */
  .proj-bento {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .pc-featured { grid-column: span 1; }
  .pc-featured .pc-preview { height: 200px; }
  .pc-preview  { height: 180px; }
  .pc-featured .pc-title { font-size: 1.25rem; }
  .pc-featured .pc-emoji { font-size: 4rem; }
  .pc-body { padding: 1.2rem 1.25rem 1.35rem; gap: 0.75rem; }
  .pc-title { font-size: 1.1rem; }
  .pc-desc { font-size: 0.82rem; }
  .pc-tags { gap: 0.35rem; }
  .pt { font-size: 0.6rem; padding: 0.18rem 0.5rem; }
  .pc-url { font-size: 0.58rem; }
  .pc-num { font-size: 4rem; }

  /* EDUCATION */
  .edu-timeline { padding-left: 1.5rem; }
  .edu-timeline::before { left: 2px; }
  .edu-dot {
    left: -1.9rem;
    width: 13px; height: 13px;
  }
  .edu-card   { padding: 1.25rem; }
  .edu-degree { font-size: 1.1rem; }
  .edu-inst   { font-size: 0.85rem; margin-bottom: 0.75rem; }
  .edu-meta   { flex-direction: column; gap: 0.4rem; }
  .edu-badge  { font-size: 0.65rem; }
  .edu-desc   { font-size: 0.85rem; margin-top: 0.75rem; }
  .edu-year   { font-size: 0.65rem; }
  .edu-item   { padding-bottom: 2.25rem; }

  /* CONTACT */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ct-info h3  { font-size: 1.3rem; }
  .ct-info p   { font-size: 0.88rem; }
  .ct-links    { gap: 0.6rem; }
  .ct-lnk      { padding: 0.8rem; gap: 0.75rem; }
  .ct-lnk-ico  { width: 34px; height: 34px; border-radius: 8px; font-size: 0.95rem; }
  .ct-lnk-text .lbl { font-size: 0.6rem; }
  .ct-lnk-text .val { font-size: 0.8rem; }
  .ct-form     { padding: 1.5rem; }
  .ct-form-title { font-size: 1rem; margin-bottom: 1.25rem; }

  .form-field  { margin-bottom: 1rem; }
  .form-field label { font-size: 0.63rem; }
  .form-field input,
  .form-field textarea { font-size: 0.9rem; padding: 0.75rem 0.9rem 0.75rem 2.5rem; }
  .form-field textarea { min-height: 120px; }
  .form-submit-btn { font-size: 0.75rem; padding: 0.85rem; }

  /* FOOTER */
  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.1rem;
    padding: 2rem 1.25rem;
  }
  .footer-socials {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
  .ftr-soc { width: 38px; height: 38px; border-radius: 8px; }
  .footer-copy { font-size: 0.68rem; }
}

/* ═══════════════════════════════════════
   7. SMALL MOBILE  (≤380px)
   e.g. iPhone SE 1st gen, older Androids
═══════════════════════════════════════ */
@media (max-width: 380px) {
  section { padding: 2.5rem 1rem; }

  .hero-name { font-size: clamp(2.4rem, 16vw, 3.2rem); }
  .profile-wrap { width: 170px; height: 170px; }
  .profile-tag  { font-size: 0.54rem; left: -4px; top: 4px; padding: 0.3rem 0.55rem; }
  .profile-badge{ right: -4px; padding: 0.42rem 0.6rem; }

  .stat-cards { grid-template-columns: 1fr; }

  .skills-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
  .skill-c { padding: 1.1rem 0.8rem 1rem; }

  .edu-degree { font-size: 1rem; }
  .edu-card   { padding: 1rem; }

  .ct-form { padding: 1.2rem; }

  h2.sec-h { font-size: clamp(1.55rem, 10vw, 2rem); }

  .hero-btns .btn { font-size: 0.72rem; padding: 0.75rem 1.2rem; }
}

/* ═══════════════════════════════════════
   8. DESKTOP-MODE in MOBILE BROWSER
   (when user forces desktop site on phone)
   Force scroll + prevent overflow blowout
═══════════════════════════════════════ */
@media (max-width: 600px) {
  body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #hero,
  .hero-grid,
  .about-grid,
  .skills-grid,
  .proj-bento,
  .contact-grid {
    min-width: 0;
    max-width: 100%;
  }

  /* Prevent canvas bleed */
  #bg-canvas {
    max-width: 100vw;
    max-height: 100vh;
  }

  /* Fix any accidental horizontal scroll from grid blowout */
  .proj-bento,
  .skills-grid,
  .stat-cards {
    overflow: hidden;
  }
}

/* ═══════════════════════════════════════
   9. TOUCH — Remove hover-only effects on touch devices
   (Stops 3D tilt cards from staying "stuck" on mobile)
═══════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .pc:hover { animation: none; }
  .pc::before { opacity: 0 !important; }
  .pc-inner {
    transform: none !important;
    transition: none !important;
  }
  .pc-hover-btns {
    opacity: 1 !important;
    background: rgba(6,10,15,0.45);
    backdrop-filter: blur(4px);
  }
  .pc:hover .pc-arrow { transform: none; }

  .stat-c:hover      { transform: none; }
  .skill-c:hover     { transform: none; }
  .ct-lnk:hover      { transform: none; }
  .hsoc:hover        { transform: none; }
  .ftr-soc:hover     { transform: none; }
  .btn:hover         { transform: none; }
  .nav-cta:hover     { transform: none; }
}

/* ═══════════════════════════════════════
   10. PRINT — Clean single column
═══════════════════════════════════════ */
@media print {
  nav, .scroll-hint, #bg-canvas, .grid-layer, .noise-layer { display: none !important; }
  section { padding: 1.5rem 0; break-inside: avoid; }
  .hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .proj-bento { grid-template-columns: 1fr; }
  body { background: white; color: black; }
}