/* ═══════════════════════════════════════════════════
   RESPONSIVE OVERRIDES (Global Mobile Fixes)
   ═══════════════════════════════════════════════════ */

/* ── Typography & Global Elements ── */
@media (max-width: 768px) {
  body, html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  
  /* Scale down massive text and margins */
  .hero-title {
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
  }
  .hero-subtitle {
    font-size: clamp(1rem, 4vw, 1.5rem) !important;
  }
  .section-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
  }
  .hero-buttons {
    flex-direction: column;
    width: 100%;
    gap: var(--space-md);
  }
  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Reduce padding on mobile so content fits better */
  .section, .hero-section {
    padding-top: 5rem !important;
    padding-bottom: 3rem !important;
  }
  .section-container {
    padding: 0 var(--space-md) !important;
  }
  
  /* ── Grids ── */
  /* Force all structural grids into a single column on mobile */
  .about-grid, 
  .skill-grid, 
  .stats-grid, 
  .cert-grid, 
  .contact-grid, 
  .footer-grid, 
  .services-grid, 
  .blog-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Make sure timeline behaves */
  .timeline-card {
    padding: var(--space-lg) !important;
  }
  
  /* ── Navigation (Hamburger Fixes) ── */
  .hamburger {
    display: flex !important;
  }
  .nav-links {
    position: fixed !important;
    top: 0;
    right: -100%;
    width: 80% !important;
    max-width: 320px;
    height: 100vh;
    background: rgba(6, 6, 9, 0.98) !important;
    backdrop-filter: blur(30px);
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl) !important;
    padding: var(--space-2xl);
    transition: right var(--duration-normal) var(--ease-out) !important;
    border-left: 1px solid var(--glass-border);
    z-index: 1000;
  }
  .nav-links.open {
    right: 0 !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  }
  
  /* Form Inputs */
  .form-control {
    width: 100% !important;
  }
  
  /* Hide hover animations that glitch on touch screens */
  .hero-interactive-glow {
    display: none !important;
  }
  
  /* Background fix for hero */
  .hero-calligraphy {
    background-size: cover !important;
    background-position: center top !important;
    opacity: 0.2; /* Better readability on mobile */
  }
}

/* ── Extra Small Screens (iPhone SE) ── */
@media (max-width: 400px) {
  .stats-grid {
    grid-template-columns: 1fr !important; /* Stack stats on very small screens */
  }
  .section-tag {
    font-size: 0.7rem !important;
  }
  .btn {
    padding: var(--space-md) var(--space-lg) !important;
    font-size: 0.9rem !important;
  }
}