/* ==========================================================================
   RESPONSIVE OVERRIDES — Mobile-first approach
   Base styles handle mobile; these handle tablets/desktop.
   ========================================================================== */

/* ==========================================================================
   MOBILE NAV ADJUSTMENTS (< 1024px)
   ========================================================================== */

/* Stats table horizontal scroll on small screens */
@media (max-width: 639px) {
  .profile-stats {
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .stats-table {
    width: 100%;
  }

  .stats-table th,
  .stats-table td {
    min-width: 60px;
    padding: var(--space-1) var(--space-2);
  }

  .stats-table td {
    font-size: var(--fs-lg);
  }

  /* Services grid: horizontal scroll on mobile (centered carousel) */
  .services-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
    scroll-padding: 0 5%;
  }

  .services-grid::-webkit-scrollbar {
    display: none;
  }

  .services-grid::before,
  .services-grid::after {
    content: '';
    flex-shrink: 0;
    width: 5%;
  }

  .service-card {
    flex-shrink: 0;
    width: 90%;
    scroll-snap-align: center;
  }

  /* Carousel navigation dots */
  .services-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-6);
  }

  .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--text-muted);
    opacity: 0.4;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    padding: 0;
  }

  .carousel-dot.active {
    width: 24px;
    background-color: var(--accent);
    opacity: 1;
  }
}

/* Experience timeline adjustments */
@media (max-width: 767px) {
  .experience-item {
    padding-left: var(--space-6);
  }

  .experience-dot {
    left: -6px;
    width: 10px;
    height: 10px;
  }
}

/* Hero adjustments for very small screens */
@media (max-width: 479px) {
  .hero-banner {
    height: 160px;
    border-radius: var(--radius-xl);
  }

  .hero-banner-text span {
    font-size: 1.25rem;
  }

  .profile-photo {
    width: 100px;
    height: 125px;
    border-radius: 24px;
    border-width: 3px;
    margin-left: var(--space-3);
  }

  .profile-info {
    margin-top: -60px;
  }

  .profile-name {
    font-size: var(--fs-2xl);
  }

  .profile-title {
    font-size: var(--fs-base);
  }
}

/* ==========================================================================
   TABLET (768px - 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-inner {
    padding: var(--space-4) var(--space-5);
  }

  .profile-info {
    grid-template-columns: auto 1fr;
  }

  .profile-stats {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   LARGE SCREENS (1440px+)
   ========================================================================== */
@media (min-width: 1440px) {
  :root {
    font-size: 17px;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@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;
  }

  .anim-fade-up,
  .anim-fade-left,
  .anim-blur-up,
  .anim-scale-in {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
  .header,
  .back-to-top,
  .mobile-nav,
  .mobile-toggle,
  .btn-download-resume,
  .theme-toggle {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .hero {
    padding-top: 0;
  }

  .service-card,
  .project-card,
  .education-card {
    break-inside: avoid;
    border: 1px solid #ccc;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
    color: #666;
  }
}