/* === MOBILE.CSS - MOBILE-SPECIFIC OPTIMIZATIONS === */

/* Show Mobile Navigation on smaller screens */
@media (max-width: 900px) {
  .mobile-nav {
    display: flex;
  }
  
  /* Hide desktop hamburger menu items on smaller screens */
  .nav-container {
    padding: 0 20px;
  }
  
  .hamburger {
    display: flex;
  }
  
  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(10,10,10,0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    flex-direction: column;
    padding: 40px 20px;
    gap: 30px;
    display: none;
    border-bottom: 1px solid var(--color-border);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
  }
  
  .nav-links.active {
    display: flex;
  }
  
  .nav a:not(.nav-logo) {
    font-size: 1.1rem;
    width: 100%;
    text-align: center;
    padding: 12px 0;
  }
  
  /* Hero adjustments */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  
  .hero-image-section {
    order: -1;
  }
  
  .profile-image-wrapper {
    width: 280px;
    height: 280px;
  }
  
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .stat-number {
    font-size: 1.8rem;
  }
  
  /* Card grids */
  .overview-grid,
  .expertise-grid,
  .projects-grid {
    grid-template-columns: 1fr;
  }
  
  .overview-card,
  .expertise-card,
  .project-card {
    padding: 30px;
  }
  
  /* Timeline */
  .timeline {
    padding-left: 30px;
  }
  
  .timeline-marker {
    left: -36px;
  }
  
  /* Footer */
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  
  footer {
    padding: var(--spacing-md) 20px;
    padding-bottom: calc(var(--mobile-nav-height) + var(--spacing-md));
  }
}

/* Tablets and smaller laptops */
@media (max-width: 1200px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  
  .hero-image-section {
    order: -1;
  }
  
  .profile-image-wrapper {
    width: 280px;
    height: 280px;
  }
}

/* Mobile phones - portrait */
@media (max-width: 640px) {
  /* Container */
  .container {
    padding: calc(var(--nav-height) + 20px) 16px 20px;
  }
  
  /* Hero section */
  .hero-section {
    min-height: auto;
    padding: var(--spacing-md) 0;
  }
  
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  
  .hero-cta {
    flex-direction: column;
    width: 100%;
  }
  
  .btn {
    width: 100%;
  }
  
  .profile-image-wrapper {
    width: 240px;
    height: 240px;
  }
  
  /* Typography */
  h2 {
    font-size: 2rem;
  }
  
  .section {
    margin-bottom: 60px;
  }
  
  .section-header {
    margin-bottom: var(--spacing-md);
  }
  
  /* Cards */
  .overview-card,
  .expertise-card,
  .project-card {
    padding: 24px;
  }
  
  /* About highlights */
  .about-highlights {
    grid-template-columns: 1fr;
  }
  
  .highlight-item {
    padding: 24px;
  }
  
  /* Skills grid */
  .skills-grid {
    grid-template-columns: 1fr;
  }
  
  .skill-category {
    padding: 24px;
  }
  
  /* Contact grid */
  .contact-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-card {
    padding: 24px;
  }
  
  /* Scroll indicator */
  .scroll-indicator {
    display: none;
  }
  
  /* Page header */
  .page-header {
    padding: var(--spacing-md) 0;
  }
  
  .page-description {
    font-size: 1rem;
  }
  
  /* CTA section */
  .cta-section {
    padding: var(--spacing-md);
  }
  
  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .cta-buttons .btn {
    width: 100%;
  }
  
  /* Project metrics */
  .project-metrics {
    grid-template-columns: 1fr;
  }
  
  /* Timeline */
  .timeline-content h3 {
    font-size: 1.3rem;
  }
  
  /* Footer */
  footer {
    padding: var(--spacing-md) 16px;
    padding-bottom: calc(var(--mobile-nav-height) + var(--spacing-md));
  }
}

/* Extra small devices */
@media (max-width: 375px) {
  .profile-image-wrapper {
    width: 200px;
    height: 200px;
  }
  
  .hero-name {
    font-size: 2.5rem;
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
  
  .mobile-nav-item {
    min-width: 50px;
  }
  
  .mobile-nav-item span {
    font-size: 0.65rem;
  }
  
  .btn {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
}

/* Touch optimization */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets */
  .btn {
    min-height: 48px;
    padding: 14px 28px;
  }
  
  .mobile-nav-item {
    min-height: 48px;
    padding: 10px 12px;
  }
  
  .nav a:not(.nav-logo) {
    min-height: 44px;
    padding: 12px 0;
  }
  
  /* Remove hover effects on touch devices */
  .overview-card:hover,
  .expertise-card:hover,
  .project-card:hover {
    transform: none;
  }
  
  .contact-card:hover {
    transform: none;
  }
  
  /* Active states for better feedback */
  .btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  .card-link:active {
    opacity: 0.8;
  }
  
  /* Disable cursor glow on touch devices */
  .cursor-glow {
    display: none;
  }
}

/* Landscape orientation on phones */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-section {
    min-height: auto;
  }
  
  .profile-image-wrapper {
    width: 220px;
    height: 220px;
  }
  
  .scroll-indicator {
    display: none;
  }
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  
  .mobile-nav {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  
  .nav-container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* Dark mode adjustments for mobile */
@media (prefers-color-scheme: dark) {
  .nav {
    background: rgba(10,10,10,0.95);
  }
  
  .mobile-nav {
    background: rgba(10,10,10,0.98);
  }
}

/* Reduce animations on lower-end devices */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-item:active {
    transform: none;
  }
  
  .btn:active {
    transform: none;
  }
}

/* Optimize font sizes for readability on small screens */
@media (max-width: 640px) {
  body {
    font-size: 15px;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .about-intro p {
    font-size: 1.1rem;
  }
  
  .section-label {
    font-size: 0.75rem;
  }
  
  .timeline-tag,
  .project-tag {
    font-size: 0.7rem;
    padding: 5px 12px;
  }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }
  
  .container {
    overflow-x: hidden;
  }
}

/* Loading states for mobile */
@media (max-width: 640px) {
  img[loading="lazy"] {
    min-height: 200px;
  }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  .mobile-nav {
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
  }
  
  /* Fix for iOS Safari bottom bar */
  .hero-section {
    min-height: -webkit-fill-available;
  }
}

/* Android specific fixes */
@media (max-width: 640px) {
  /* Prevent text inflation */
  body {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
}