/* ============================================
   RESPONSIVE STYLES
   Mobile-first responsive design
   ============================================ */

/* ============ Extra Small Devices (< 576px) ============ */
/* Base styles are mobile-first, so they apply here */

/* ============ Small Devices (≥ 576px) ============ */

@media (min-width: 576px) {
  /* Typography adjustments */
  .hero-title {
    font-size: var(--text-5xl);
  }

  /* Button groups */
  .hero-cta,
  .contact-cta-wrapper {
    flex-direction: row;
  }
}

/* ============ Medium Devices (≥ 768px) ============ */

@media (min-width: 768px) {
  /* Container padding */
  .container {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }

  /* Section spacing */
  section {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }

  /* Hero section */
  .hero-title {
    font-size: var(--text-6xl);
  }

  .hero-description {
    font-size: var(--text-xl);
  }

  /* About section */
  .about-stats {
    gap: var(--space-6);
  }

  .stat-number {
    font-size: var(--text-5xl);
  }

  /* Skills grid */
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Projects grid */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Process timeline */
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
  }

  /* Footer */
  .footer-content {
    flex-direction: row;
  }
}

/* ============ Large Devices (≥ 1024px) ============ */

@media (min-width: 1024px) {
  /* Container */
  .container {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }

  /* Section spacing */
  section {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
  }

  /* Hero section */
  .hero-title {
    font-size: var(--text-7xl);
  }

  /* About section - Two column layout */
  .about-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-20);
  }

  /* Skills - Four columns */
  .skills-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Process - Four columns */
  .process-timeline {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Hover effects enabled */
  .project-card:hover {
    transform: translateY(-8px);
  }

  .skill-card:hover {
    transform: translateY(-8px);
  }
}

/* ============ Extra Large Devices (≥ 1280px) ============ */

@media (min-width: 1280px) {
  /* Hero section */
  .hero-title {
    font-size: clamp(5rem, 8vw, 6rem);
  }

  /* Section headers */
  .section-title {
    font-size: var(--text-6xl);
  }
}

/* ============ XXL Devices (≥ 1536px) ============ */

@media (min-width: 1536px) {
  /* Hero section */
  .hero-title {
    font-size: var(--text-8xl);
  }
}

/* ============ Mobile-Specific Overrides ============ */

@media (max-width: 767px) {
  /* Hide desktop elements */
  .hero-scroll {
    display: none;
  }

  /* Stack layouts */
  .hero-cta {
    width: 100%;
  }

  .hero-cta .btn {
    width: 100%;
  }

  /* About section */
  .about-image {
    aspect-ratio: 4 / 5;
  }

  /* Contact */
  .contact-cta-wrapper {
    width: 100%;
  }

  .contact-cta-wrapper .btn {
    width: 100%;
  }

  /* Reduce padding on mobile */
  .nav-container {
    height: var(--header-height-mobile);
  }

  .card,
  .skill-card,
  .project-content {
    padding: var(--space-6);
  }

  /* Font size reductions */
  .section-title {
    font-size: var(--text-3xl);
  }

  .about-heading {
    font-size: var(--text-2xl);
  }

  .project-title {
    font-size: var(--text-xl);
  }
}

/* ============ Tablet-Specific (768px - 1023px) ============ */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Two-column layouts for tablet */
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============ Touch Device Optimizations ============ */

@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch devices */
  .hover-lift:hover,
  .project-card:hover,
  .skill-card:hover {
    transform: none;
  }

  /* Make touch targets larger */
  .btn {
    min-height: 48px;
    min-width: 48px;
  }

  .nav-link {
    padding: var(--space-4);
  }

  .filter-btn {
    padding: var(--space-4) var(--space-6);
  }

  /* Show project overlays by default on touch */
  .project-overlay {
    opacity: 0;
  }

  .project-card:active .project-overlay {
    opacity: 1;
  }
}

/* ============ High DPI Displays ============ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders and shadows */
  .nav {
    border-bottom-width: 0.5px;
  }

  .card,
  .skill-card,
  .project-card {
    border-width: 0.5px;
  }
}

/* ============ Print Styles ============ */

@media print {
  /* Hide interactive elements */
  .nav,
  .scroll-top,
  .preloader,
  .hero-scroll,
  .filter-btn,
  .btn {
    display: none !important;
  }

  /* Adjust colors for print */
  body {
    background: white;
    color: black;
  }

  section {
    page-break-inside: avoid;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
  }

  /* Show URLs for links */
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
}

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

  .scroll-indicator {
    animation: none;
  }

  .loader {
    animation: none;
  }
}

/* ============ Dark Mode (System Preference) ============ */

@media (prefers-color-scheme: dark) {
  /* Already using dark theme as default */
  /* This ensures dark mode when system is set to dark */
}

/* ============ Landscape Mobile ============ */

@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + var(--space-12));
    padding-bottom: var(--space-12);
  }

  .hero-scroll {
    display: none;
  }

  section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

/* ============ Ultra-Wide Screens (≥ 1920px) ============ */

@media (min-width: 1920px) {
  .container {
    max-width: 1600px;
  }

  .section-header.centered {
    max-width: 900px;
  }
}

/* ============ Specific Component Responsive Overrides ============ */

/* Navigation */
@media (max-width: 1023px) {
  .nav-menu {
    position: fixed;
    top: var(--header-height-mobile);
  }
}

/* Stats Cards */
@media (max-width: 576px) {
  .about-stats {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: var(--space-4);
  }
}

/* Project Filters */
@media (max-width: 576px) {
  .project-filters {
    gap: var(--space-2);
  }

  .filter-btn {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-4);
  }
}

/* Contact Social Links */
@media (max-width: 576px) {
  .social-links {
    justify-content: center;
    width: 100%;
  }

  .contact-method {
    font-size: var(--text-sm);
  }
}

/* Process Steps */
@media (max-width: 767px) {
  .step-number {
    font-size: var(--text-5xl);
  }

  .step-title {
    font-size: var(--text-lg);
  }

  .step-description {
    font-size: var(--text-sm);
  }
}

/* Scroll to Top Button */
@media (max-width: 576px) {
  .scroll-top {
    bottom: var(--space-6);
    right: var(--space-6);
    width: 40px;
    height: 40px;
  }

  .scroll-top svg {
    width: 20px;
    height: 20px;
  }
}