/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
}

/* Standard Desktop / Small Laptop (1024px - 1280px) */
@media (max-width: 1280px) {
  h1 { font-size: 3.5rem; }
  .hero-desc { font-size: 1.125rem; }
  .about-grid { gap: 40px; }
  .contact-grid { gap: 40px; }
  .footer-grid { gap: 20px; }
}

/* Tablet Landscape / Small Desktop (992px - 1024px) */
@media (max-width: 1024px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  
  .hero { padding-top: calc(var(--header-height) + 60px); }
  .hero-grid { gap: 40px; }
  
  .brand-strip-content {
    font-size: 1.25rem;
    gap: 20px;
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
  }
  
  .learning-modes-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  
  .learning-center {
    grid-column: 1 / -1;
    order: -1;
    margin-bottom: 20px;
  }
  
  .testimonials-carousel {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .compact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

/* Tablet Portrait (768px - 991px) */
@media (max-width: 991px) {
  :root {
    --header-height: 70px;
  }
  
  /* Header & Navigation */
  .nav-links {
    display: none; /* Hide default nav */
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: var(--white);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40px;
    gap: 24px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
  
  .nav-links.active {
    display: flex;
  }
  
  .nav-link {
    font-size: 1.25rem;
  }
  
  .nav-actions {
    display: none; /* Hide desktop CTA in header */
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-desc {
    margin: 0 auto 40px;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .hero-features {
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }
  
  .hero-illustration {
    height: 300px;
  }
  
  /* Sections */
  .about-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  body {
    padding-bottom: 70px; /* Space for mobile sticky CTA */
  }
  
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }
  
  section { padding: 50px 0; }
  
  .section-header {
    margin-bottom: 40px;
  }
  
  .brand-strip-content {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .brand-strip-divider {
    width: 40px;
    height: 2px;
  }
  
  .timeline {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .timeline-item {
    padding-top: 0;
    padding-left: 50px;
  }
  
  .timeline-item::before {
    top: 0;
    left: 15px;
    width: 2px;
    height: 100%;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .learning-modes-grid {
    grid-template-columns: 1fr;
  }
  
  .compact-grid {
    grid-template-columns: 1fr;
  }
  
  .testimonials-carousel {
    grid-template-columns: 1fr;
  }
  
  .testimonials-wrapper {
    padding: 0;
  }
  
  .carousel-control {
    display: none; /* Hide arrows on mobile, use swipe */
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  /* Show Mobile Sticky CTA */
  .mobile-sticky-cta {
    display: block;
  }
}

/* Small Mobile (up to 375px) */
@media (max-width: 375px) {
  h1 { font-size: 2rem; }
  
  .btn {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .hero-actions {
    flex-direction: column;
  }
  
  .course-filters {
    gap: 8px;
  }
  
  .filter-btn {
    padding: 6px 12px;
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   Responsive Refinements
   ========================================================================== */
@media (max-width: 1024px) {
  .header {
    padding: 10px 0; /* Better tablet breathing room */
  }
}
@media (max-width: 767px) {
  .hero {
    padding-top: calc(var(--header-height) + 40px);
  }
  .section-header h2 {
    font-size: 2rem;
  }
  .courses-grid {
    grid-template-columns: 1fr; /* Force 1 column on mobile for perfect fit */
  }
  .about-cards {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .consulting-grid { grid-template-columns: 1fr; }
}