/* =========================================
   VINAYAGAM.D - MOBILE RESPONSIVE OVERRIDES
   Optimized for 375px - 991px Viewports
   ========================================= */

/* --- ROOT & CORE --- */
:root {
  --nav-height: 65px;
}

body {
  overflow-x: hidden;
  width: 100%;
}

.main-wrapper {
  padding-top: var(--nav-height);
}

/* --- EXTRA LARGE SCREENS (1200px and up) --- */
@media (min-width: 1200px) {
  .display-title { font-size: clamp(6rem, 10vw, 9rem) !important; }
}

/* --- TABLETS & SMALL LAPTOPS (max 991px) --- */
@media (max-width: 991px) {
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 1050;
    padding: 2rem;
  }

  .nav-menu.active { right: 0; }
  
  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 1.5rem;
    position: absolute;
    top: 1.5rem;
    font-family: var(--font-mono);
    color: var(--color-accent);
  }

  .close-menu {
    background: transparent;
    border: none;
    color: var(--color-accent);
    font-size: 2.5rem;
    cursor: pointer;
  }

  .nav-cmd { font-size: 1.5rem; margin: 0; padding: 0.5rem 0; width: 100%; text-align: center; }

  /* Hero Section Table-specific */
  .display-title { font-size: clamp(4rem, 12vw, 6.5rem) !important; line-height: 1 !important; }
  .section-title-editorial { font-size: clamp(3rem, 10vw, 4.5rem) !important; }
  
  /* BENTO STATS Gird */
  .bento-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
  .stat-large, .stat-wide { grid-column: span 2 !important; }
  .stat-box { min-height: 160px !important; padding: 1.5rem !important; }
  .stat-number { font-size: 2.8rem !important; }

  /* Projects Editorial Grid */
  .projects-editorial { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .project-hero { grid-column: span 1 !important; }
  .project-card { padding: 1.75rem !important; }
  .project-title-big { font-size: 2.5rem !important; }
}

/* --- SMALL TABLETS / LARGE MOBILES (max 768px) --- */
@media (max-width: 768px) {
  .hero-editorial { padding: 3rem 0; min-height: auto; }
  .ascii-header { margin-bottom: 2rem; opacity: 0.25; }
  .ascii-art { font-size: 0.5rem; overflow: hidden; display: block; white-space: pre; text-align: center; width: 100%; }
  
  .title-block .row { flex-direction: column-reverse; }
  .col-lg-7, .col-lg-5 { width: 100%; }
  
  .profile-terminal { margin-top: 0; margin-bottom: 3rem; max-width: 320px; margin-left: auto; margin-right: auto; }
  
  .hero-actions { flex-direction: column; gap: 0.75rem; width: 100%; margin-top: 2rem; }
  .hero-actions .btn-terminal { width: 100% !important; justify-content: center !important; margin: 0 !important; }
  
  .hero-intro { font-size: 1.05rem; line-height: 1.7; max-width: 100%; }
  
  .meta-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .meta-item { border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem; }
  
  .impact-strip { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding: 2.5rem 0; }
  .impact-item { flex: 1 1 calc(50% - 1rem); padding: 0; min-width: 140px; }
  .impact-divider { display: none; }
  .impact-num { font-size: 2.2rem; }
  
  /* CRITICAL: System Architecture Flow Fix */
  .arch-horizontal-flow { flex-direction: column; align-items: stretch; gap: 0.5rem; overflow: visible; }
  .arch-h-node { 
    min-width: 100%; 
    flex-direction: row; 
    justify-content: flex-start; 
    padding: 1rem 1.25rem; 
    text-align: left; 
    gap: 1.25rem; 
  }
  .arch-h-icon { margin-bottom: 0; font-size: 1.1rem; opacity: 1; color: var(--color-accent); min-width: 24px; text-align: center; }
  .arch-h-title { font-size: 0.9rem; margin-bottom: 0.15rem; white-space: normal; line-height: 1.2; }
  .arch-h-sub { font-size: 0.7rem; white-space: normal; line-height: 1.2; }
  .arch-h-arrow { 
    align-self: center; 
    padding: 0.5rem 0; 
    transform: rotate(90deg); 
    font-size: 1.5rem; 
    height: auto; 
    width: auto; 
  }
  
  .arch-worker-row { padding: 1.25rem; }
  .arch-worker-flow { gap: 0.5rem; }
  
  .arch-explainer-grid { grid-template-columns: 1fr; gap: 1rem; }
  .arch-explainer-item { padding: 1.25rem; }

  /* Experience section padding */
  .experience-section { padding: 4rem 0; }
  .exp-period { font-size: 0.8rem; margin-bottom: 0.5rem; }
  .exp-title { font-size: 1.6rem !important; }
  .exp-metrics { grid-template-columns: repeat(2, 1fr); display: grid; padding: 1.25rem; gap: 1rem; }
  .exp-metric-num { font-size: 1.8rem; }
  
  /* Skills/About terminal */
  .terminal-skills { padding: 1.25rem; }
  .output-content p { font-size: 1rem !important; line-height: 1.65 !important; max-width: 100% !important; }
  
  /* Grid handling for other sections */
  .case-study-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .case-block-full { grid-column: span 1 !important; }
  .project-metrics-grid { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 1rem !important; 
    padding: 1.5rem 0 !important; 
  }
  .metric-num { font-size: 2rem !important; }
}

/* --- SMALL MOBILES (max 480px) --- */
@media (max-width: 480px) {
  .display-title { font-size: 2.8rem !important; }
  .highlight-text { font-size: 2.4rem !important; margin-top: 0.2rem !important; display: inline-block !important; }
  
  .section-title-editorial { font-size: 2rem !important; }
  .section-number { font-size: 2.5rem !important; }
  
  .ascii-art { font-size: 0.35rem; }

  .impact-item { flex: 1 1 100%; text-align: center; }
  
  .meta-grid { grid-template-columns: 1fr; gap: 1rem; }
  .meta-item { border: none; background: rgba(255,255,255,0.03); padding: 0.75rem 1rem; }
  
  .project-title-big { font-size: 2rem !important; line-height: 1.1 !important; }
  .case-block { padding: 1rem !important; }
  
  .project-metrics-grid { grid-template-columns: 1fr !important; }
  
  /* BENTO STATS Gird */
  .bento-stats { grid-template-columns: 1fr !important; }
  .stat-large, .stat-wide { grid-column: span 1 !important; }
  .stat-box { min-height: 150px !important; }
  
  .contact-row { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.75rem 0; }
  .contact-key { font-size: 0.7rem; }
  .contact-value { font-size: 1rem; word-break: break-all; }
  
  .terminal-body-large { padding: 1rem; }
  
  .footer-left, .footer-right { flex-direction: column; align-items: center; gap: 0.5rem; }
  .footer-sep { display: none; }
}

/* --- EXTRA SMALL (max 360px) --- */
@media (max-width: 360px) {
  .display-title { font-size: 2.4rem !important; }
  .ascii-art { font-size: 0.28rem; }
}

/* --- OVERFLOW FIXES --- */
* { max-width: 100vw; box-sizing: border-box; }
.container-fluid { padding-left: 1rem; padding-right: 1rem; }
.row { margin-left: 0; margin-right: 0; }
.col-lg-7, .col-lg-5, .col-lg-10, .col-lg-2, .col-lg-12 { padding-left: 0; padding-right: 0; }
#matrix-canvas { display: none !important; } /* Heavy load + layout issues on mobile */

/* Lens scroll fix for mobile */
.lenis.lenis-smooth { scroll-behavior: auto !important; }