/* ============================================
   Mobile Performance Optimizations
   ============================================ */

@media (max-width: 768px) {
  /* Reduce paint operations on mobile */
  .spotlight-work-card,
  .side-project-card,
  .lesson-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }

  /* Ensure images don't cause layout shifts */
  img {
    height: auto;
    max-width: 100%;
  }

  /* Optimize scrolling performance */
  .lessons-track,
  .carousel {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Content visibility for off-screen sections */
  .site-footer-new,
  .how-i-work,
  .cta-section-new {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
  }
}

/* Touch-friendly tap targets */
@media (max-width: 768px) {
  /* Ensure minimum 44px touch targets */
  a,
  button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better tap feedback */
  .btn,
  .nav-link,
  .cta-primary-btn,
  .cta-email-btn {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Image loading optimization */
img[loading="lazy"] {
  background-color: #f0f0f0;
}

:root[data-theme="dark"] img[loading="lazy"] {
  background-color: #1a1a1a;
}

/* Prevent layout shift with aspect ratios */
.project-card-thumb,
.lesson-card-image,
.card-peek-image {
  aspect-ratio: 16 / 10;
}