/* ================================================================
   DESKTOP STYLES - 1024px and above
   ================================================================ */

@media (min-width: 1024px) {
  
  /* Typography */
  h1 {
    font-size: var(--text-5xl);
  }
  
  h2 {
    font-size: var(--text-4xl);
  }
  
  .section-title {
    font-size: var(--text-5xl);
  }
  
  /* Container */
  .container {
    max-width: var(--container-desktop);
  }
  
  /* Navigation */
  .mobile-menu-toggle {
    display: none;
  }
  
  .nav {
    display: block;
  }
  
  .nav-list {
    gap: var(--space-md);
  }
  
  .nav-link {
    font-size: var(--text-base);
    padding: var(--space-sm) var(--space-lg);
  }
  
  /* Hero */
  .hero {
    min-height: 85vh;
  }
  
  .hero-title {
    font-size: var(--text-5xl);
  }
  
  .hero-content {
    max-width: 900px;
    margin: 0 auto;
  }
  
  .hero-buttons .btn {
    padding: var(--space-md) var(--space-2xl);
    font-size: var(--text-lg);
  }
  
  /* Grid System */
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Features */
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Courses */
  .courses-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Hover Effects - Desktop Only */
  .card {
    transition: all var(--transition-base);
  }
  
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-wide);
  }
}


/* ================================================================
   HERO IMAGE - DESKTOP POSITIONING FIX
   ================================================================ */

   @media (min-width: 1024px) {
    /* Hero section - better vertical centering */
    .hero {
        min-height: 85vh !important;
        display: flex;
        align-items: center;
    }
    
    /* Hero grid - align items to center */
    .hero .grid-2 {
        align-items: center !important;
    }
    
    /* Image container - move upward */
    .hero .image-placeholder {
        transform: translateY(-40px); /* Move up by 40px */
        max-height: 450px !important; /* Slightly reduce height */
        min-height: 400px !important;
    }
    
    /* Text overlay in image - better positioning */
    .hero .image-placeholder > div[style*="position: absolute"] {
        bottom: 1.5rem !important;
        left: 1.5rem !important;
        right: 1.5rem !important;
    }
}

/* Large desktop - even better positioning */
@media (min-width: 1280px) {
    .hero .image-placeholder {
        transform: translateY(-60px); /* Move up more on larger screens */
        max-height: 480px !important;
    }
}

/* Extra large screens */
@media (min-width: 1536px) {
    .hero .image-placeholder {
        transform: translateY(-80px);
        max-height: 500px !important;
    }
}