/* ========== MOBILE RESPONSIVE OPTIMIZATIONS ========== */

/* Improve touch targets for mobile (minimum 44x44px for accessibility) */
@media (max-width: 768px) {
  a, button, .hero-link, .contact-link, .project-card {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Reduce animations on mobile for better performance */
  * {
    animation-duration: 0.5s !important;
  }
  
  /* Optimize font sizes for readability */
  body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Reduce particle effects on mobile for better performance */
  .particles {
    opacity: 0.5;
  }
  
  .blurred-circles .circle {
    opacity: 0.2;
    filter: blur(40px);
  }
  
  /* Optimize background effects */
  body::before {
    opacity: 0.7;
  }
  
  /* Improve scroll performance */
  * {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Better spacing for mobile taps */
  .hero-socials a {
    margin: 0.2rem;
  }
  
  /* Fix navbar for mobile */
  .nav-main {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.8rem 1rem !important;
    gap: 1rem !important;
  }
  
  .nav-brand {
    margin-bottom: 0 !important;
    font-size: 1.3rem !important;
  }
  
  /* Better hero spacing on mobile */
  .hero-section {
    min-height: 100vh;
    padding-top: 5rem !important;
    padding-bottom: 3rem !important;
    padding-left: 1rem;
    padding-right: 1rem;
    justify-content: center;
  }
  
  /* Optimize hero image for mobile */
  .hero-img {
    width: 8rem !important;
    height: 8rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .hero-title {
    font-size: 2.2rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .hero-typing {
    font-size: 1.1rem !important;
    padding: 0 1rem !important;
    line-height: 1.5 !important;
  }
  
  .hero-socials {
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
    margin-top: 1.5rem !important;
  }
  
  .hero-link {
    padding: 0.65rem 1.2rem !important;
    font-size: 0.95rem !important;
  }
}

/* Extra small devices optimization (phones in portrait) */
@media (max-width: 480px) {
  /* Reduce blur effects for better performance */
  [data-animate] {
    transform: translateY(20px) scale(0.98);
  }
  
  .fade-in-up {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  
  /* Simplify backdrop filters for better performance */
  .nav-main,
  .about-card,
  .contact-link {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  
  /* Reduce particle count for performance */
  .particles {
    opacity: 0.3;
  }
  
  .blurred-circles .circle {
    opacity: 0.15;
    filter: blur(30px);
  }
  
  /* Optimize images */
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  /* Prevent zoom on input focus (iOS Safari fix) */
  input, select, textarea {
    font-size: 16px !important;
  }
  
  /* Improve button press states */
  button:active,
  a:active,
  .hero-link:active,
  .contact-link:active,
  .project-card:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
  
  /* Ensure proper spacing */
  section {
    scroll-margin-top: 60px;
  }
  
  /* Better mobile hero layout */
  .hero-section {
    padding-top: 4rem !important;
    padding-bottom: 2.5rem !important;
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
  }
  
  .hero-img {
    width: 7rem !important;
    height: 7rem !important;
    margin-bottom: 1.2rem !important;
  }
  
  .hero-title {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
  }
  
  .hero-typing {
    font-size: 1rem !important;
    padding: 0 0.5rem !important;
  }
  
  .hero-socials {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  
  .hero-link {
    padding: 0.65rem 1rem !important;
    font-size: 0.9rem !important;
    flex: 0 1 auto;
  }
  
  /* About section mobile optimization */
  .about-section {
    padding: 2.5rem 0.8rem !important;
  }
  
  .about-title {
    font-size: 1.6rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .about-desc {
    font-size: 0.9rem !important;
    padding: 1rem 1.2rem !important;
    line-height: 1.6 !important;
  }
  
  .about-info-grid {
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
  }
  
  .about-info-card {
    padding: 1rem !important;
  }
  
  .about-icon {
    font-size: 1.4rem !important;
  }
  
  .about-label {
    font-size: 0.7rem !important;
  }
  
  .about-value {
    font-size: 0.88rem !important;
  }
  
  /* Skills mobile optimization */
  .skills-modern-section {
    padding: 2.5rem 0.8rem !important;
  }
  
  .skills-modern-title {
    font-size: 1.6rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .skills-modern-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.9rem !important;
    padding: 0 0.5rem !important;
  }
  
  .skill-modern-card {
    padding: 1rem 0.5rem !important;
    min-height: 90px !important;
    border-radius: 1rem !important;
  }
  
  .skill-modern-icon.big-icon {
    font-size: 2.2rem !important;
    margin-bottom: 0.7rem !important;
  }
  
  .skill-modern-label.big-label {
    font-size: 0.85rem !important;
  }
  
  /* Projects mobile optimization */
  .projects-section {
    padding: 2.5rem 0.8rem !important;
  }
  
  .projects-title {
    font-size: 1.6rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .projects-grid {
    gap: 1rem !important;
  }
  
  .project-card {
    padding: 1.2rem !important;
  }
  
  .project-title {
    font-size: 1.1rem !important;
  }
  
  .project-desc {
    font-size: 0.88rem !important;
  }
  
  /* Contact mobile optimization */
  .contact-section {
    padding: 2.5rem 0.8rem !important;
  }
  
  .contact-title {
    font-size: 1.6rem !important;
  }
  
  .contact-desc {
    font-size: 0.9rem !important;
    margin-bottom: 1.2rem !important;
  }
  
  .contact-links {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.7rem !important;
    justify-content: center !important;
  }
  
  .contact-link {
    padding: 0.7rem 1.2rem !important;
    font-size: 0.9rem !important;
    flex: 0 1 auto;
    width: auto !important;
    max-width: none !important;
  }
  
  /* Footer mobile optimization */
  .site-footer {
    padding: 1.2rem 0.8rem !important;
    font-size: 0.85rem !important;
  }
  
  .footer-slogan {
    font-size: 0.8rem !important;
  }
  
  .footer-update {
    font-size: 0.75rem !important;
  }
}

/* Medium mobile devices (361px to 600px) */
@media (min-width: 361px) and (max-width: 600px) {
  /* Fine-tune layout for medium mobile screens */
  .hero-section {
    padding-top: 4.5rem !important;
  }
  
  .hero-img {
    width: 7.5rem !important;
    height: 7.5rem !important;
  }
  
  .hero-title {
    font-size: 2.1rem !important;
  }
  
  .hero-typing {
    font-size: 1.05rem !important;
  }
  
  .about-section {
    padding: 3rem 1rem !important;
  }
  
  .about-title,
  .projects-title,
  .contact-title,
  .skills-modern-title {
    font-size: 1.7rem !important;
  }
  
  .about-info-grid {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }
  
  .skills-modern-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  .skill-modern-card {
    padding: 1.1rem 0.6rem !important;
    min-height: 95px !important;
  }
  
  .skill-modern-icon.big-icon {
    font-size: 2.3rem !important;
  }
  
  .skill-modern-label.big-label {
    font-size: 0.9rem !important;
  }
}

/* Landscape orientation optimizations (tablets and phones in landscape) */
@media (max-width: 900px) and (orientation: landscape) {
  /* Optimize hero section for landscape */
  .hero-section {
    min-height: 100vh !important;
    padding-top: 3.5rem !important;
    padding-bottom: 2.5rem !important;
    justify-content: center !important;
  }
  
  .hero-img {
    width: 7rem !important;
    height: 7rem !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-title {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .hero-typing {
    font-size: 1rem !important;
    margin-top: 0.3rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .hero-socials {
    margin-top: 1rem !important;
    gap: 0.6rem !important;
    flex-wrap: wrap !important;
  }
  
  .hero-link {
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Optimize sections for landscape */
  .about-section,
  .projects-section,
  .contact-section,
  .skills-modern-section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  
  .about-title,
  .projects-title,
  .contact-title,
  .skills-modern-title {
    font-size: 1.8rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Compact grid layouts for landscape */
  .skills-modern-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
  }
  
  .skill-modern-card {
    padding: 0.9rem 0.4rem !important;
    min-height: 85px !important;
  }
  
  .about-info-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.9rem !important;
  }
  
  .about-info-card {
    padding: 1rem !important;
  }
  
  .projects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem !important;
  }
}

/* Print styles */
@media print {
  .nav-main,
  .theme-toggle-btn,
  .particles,
  .blurred-circles,
  [data-animate] {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
  
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a {
    text-decoration: underline;
  }
  
  .hero-section,
  .about-section,
  .projects-section,
  .contact-section {
    page-break-inside: avoid;
  }
}

/* Reduced motion preference (accessibility) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .skill-modern-card {
    animation: none !important;
  }
  
  .particles,
  .blurred-circles {
    display: none;
  }
  
  .hero-img::after {
    animation: none !important;
  }
}

/* High contrast mode support (accessibility) */
@media (prefers-contrast: high) {
  body {
    background: #000;
    color: #fff;
  }
  
  .hero-link,
  .contact-link,
  .project-card,
  .about-info-card {
    border: 2px solid #fff !important;
  }
  
  .skill-modern-card {
    border-width: 3px !important;
  }
  
  .about-label,
  .contact-title,
  .projects-title,
  .about-title {
    color: #fff !important;
  }
  
  .about-icon {
    color: #fff !important;
  }
}

/* Dark mode preference (already dark by default) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Adjust hover effects for touch devices */
  .project-card:hover,
  .skill-modern-card:hover,
  .hero-link:hover,
  .contact-link:hover {
    transform: none;
  }
  
  /* Active states for touch feedback */
  .project-card:active {
    background: #1a1a1a;
    transform: scale(0.98);
  }
  
  .skill-modern-card:active {
    transform: scale(0.96);
  }
  
  .about-info-card:active {
    transform: scale(0.98);
    background: rgba(20, 25, 35, 0.6);
  }
  
  /* Make tap targets larger */
  .hero-link,
  .contact-link {
    padding: 0.8rem 1.6rem;
  }
  
  /* Remove complex animations on touch devices */
  .skill-modern-card {
    animation: none;
  }
  
  [data-animate] {
    opacity: 1;
    transform: none;
  }
  
  /* Improve icon sizes for touch */
  .skill-modern-icon.big-icon {
    font-size: 2.5rem;
  }
  
  .about-icon {
    font-size: 1.8rem;
  }
}

/* Very small devices (320px and below) */
@media (max-width: 360px) {
  /* Ultra compact layout for very small devices */
  .hero-img {
    width: 6rem !important;
    height: 6rem !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-title {
    font-size: 1.6rem !important;
    line-height: 1.1 !important;
  }
  
  .hero-typing {
    font-size: 0.9rem !important;
    padding: 0 0.3rem !important;
  }
  
  .hero-socials {
    gap: 0.5rem !important;
  }
  
  .hero-link {
    padding: 0.6rem 0.9rem !important;
    font-size: 0.85rem !important;
  }
  
  .about-title,
  .projects-title,
  .contact-title,
  .skills-modern-title {
    font-size: 1.4rem !important;
    margin-bottom: 1.2rem !important;
  }
  
  .about-intro {
    margin-bottom: 1rem !important;
  }
  
  .about-desc {
    padding: 0.8rem 1rem !important;
    font-size: 0.85rem !important;
  }
  
  .about-info-grid {
    gap: 0.7rem !important;
  }
  
  .about-info-card {
    padding: 0.85rem !important;
    gap: 0.7rem !important;
  }
  
  .about-icon {
    font-size: 1.2rem !important;
    min-width: 26px !important;
  }
  
  .about-label {
    font-size: 0.65rem !important;
  }
  
  .about-value {
    font-size: 0.8rem !important;
  }
  
  .skill-modern-card {
    padding: 0.8rem 0.3rem !important;
    min-height: 80px !important;
  }
  
  .skill-modern-icon.big-icon {
    font-size: 1.9rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .skill-modern-label.big-label {
    font-size: 0.75rem !important;
  }
  
  .skills-modern-grid {
    gap: 0.7rem !important;
  }
  
  .nav-brand {
    font-size: 1.1rem !important;
  }
  
  .projects-grid {
    gap: 0.8rem !important;
  }
  
  .project-card {
    padding: 1rem !important;
  }
  
  .project-title {
    font-size: 1rem !important;
  }
  
  .project-desc {
    font-size: 0.82rem !important;
  }
  
  .contact-link {
    padding: 0.65rem 1rem !important;
    font-size: 0.85rem !important;
  }
}

/* Tablet portrait mode specific */
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
  .skills-modern-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.3rem !important;
  }
  
  .projects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  
  .hero-img {
    width: 10rem !important;
    height: 10rem !important;
  }
  
  .hero-title {
    font-size: 2.6rem !important;
  }
  
  .hero-typing {
    font-size: 1.3rem !important;
  }
  
  .about-section {
    padding: 3.5rem 1.5rem !important;
  }
  
  .about-title {
    font-size: 2rem !important;
  }
  
  .about-info-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.1rem !important;
  }
  
  .about-info-card {
    padding: 1.3rem !important;
  }
  
  .about-desc {
    font-size: 1.05rem !important;
    padding: 1.3rem 1.8rem !important;
  }
  
  .skills-modern-section {
    padding: 3rem 1.5rem !important;
  }
  
  .projects-section {
    padding: 3rem 1.5rem !important;
  }
  
  .contact-section {
    padding: 3rem 1.5rem !important;
  }
}

/* General mobile overflow and text handling */
@media (max-width: 900px) {
  /* Prevent horizontal overflow */
  body, html {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Ensure all sections don't overflow */
  section {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Better text wrapping for all content */
  .about-info-card,
  .about-value,
  .about-desc,
  .hero-typing,
  .project-desc,
  .contact-desc {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Smooth transitions for mobile */
  .about-info-card,
  .project-card,
  .hero-link,
  .contact-link {
    transition: all 0.25s ease;
  }
  
  /* Optimize navbar for tablets */
  .nav-main {
    padding: 0.8rem 1.2rem !important;
  }
  
  /* Better spacing for all sections */
  .hero-section,
  .about-section,
  .skills-modern-section,
  .projects-section,
  .contact-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Ensure proper touch feedback */
  .project-card:active,
  .hero-link:active,
  .contact-link:active,
  .skill-modern-card:active {
    opacity: 0.9;
    transform: scale(0.98);
  }
  
  /* Optimize card hover effects for mobile */
  .project-card:hover,
  .skill-modern-card:hover {
    transform: translateY(-2px) scale(1.02);
  }
}

/* iOS notch and safe area support */
@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
  }
  
  .nav-main {
    padding-top: calc(0.8rem + env(safe-area-inset-top));
  }
  
  .hero-section {
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
  }
  
  section {
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
  }
}

/* Better font rendering on mobile */
@media (max-width: 768px) {
  body, html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  /* Improve readability on small screens */
  .about-desc,
  .project-desc,
  .contact-desc,
  .hero-typing {
    line-height: 1.6;
    letter-spacing: 0.01em;
  }
  
  /* Ensure minimum contrast */
  .about-label {
    opacity: 0.9;
  }
  
  .about-value {
    font-weight: 500;
  }
}

/* Optimize for notched devices in landscape */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-section,
  .about-section,
  .skills-modern-section,
  .projects-section,
  .contact-section {
    padding-left: max(1rem, env(safe-area-inset-left, 1rem));
    padding-right: max(1rem, env(safe-area-inset-right, 1rem));
  }
}

/* Improve loading performance on mobile */
@media (max-width: 768px) {
  /* Lazy load images hint */
  img {
    content-visibility: auto;
  }
  
  /* Optimize animations */
  .hero-img::after {
    animation-duration: 4s !important;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translate(0, 0);
    }
  }
}

/* Final mobile UX polish */
@media (max-width: 480px) {
  /* Prevent layout shift */
  * {
    scroll-margin-top: 70px;
  }
  
  /* Better tap highlighting */
  a, button {
    -webkit-tap-highlight-color: rgba(56, 189, 248, 0.2);
  }
  
  /* Ensure smooth scrolling */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
  }
  
  /* Optimize text selection */
  ::selection {
    background-color: rgba(56, 189, 248, 0.3);
    color: #fff;
  }
}