@import 'variables.css';

/* Mobile First Design - Base styles are for mobile, media queries for larger screens */

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  h1 {
    font-size: var(--font-size-5xl);
  }
  
  h2 {
    font-size: var(--font-size-4xl);
  }
  
  .nav-desktop {
    display: block;
  }
  
  .menu-toggle {
    display: none;
  }
  
  .hero-content {
    flex-direction: row;
    text-align: left;
    gap: var(--space-xl);
  }
  
  .hero-text {
    flex: 1;
  }
  
  .hero-image {
    flex: 1;
    max-width: 380px;
  }
  
  .hero-cta {
    justify-content: flex-start;
  }
  
  .about-details {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .timeline {
    padding-left: 70px;
  }
  
  .timeline::before {
    left: 30px;
  }
  
  .timeline-icon {
    left: -70px;
  }
  
  .cert-achievements-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .contact-container {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer-content {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .skills-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .contact-details {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .about-content {
    flex-direction: row;
  }
  
  .about-text {
    flex: 2;
    padding-right: var(--space-xxl);
  }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  .theme-wrapper {
    --bg: var(--dark-bg);
    --bg-alt: var(--dark-bg-alt);
    --text: var(--dark-text);
    --text-secondary: var(--dark-text-secondary);
    --border: var(--dark-border);
    --card: var(--dark-card);
    --shadow: var(--dark-shadow);
  }
  
  .toggle-ball {
    transform: translateX(26px);
  }
}