/* Breakpoints and Media Query Overrides (320px to 1920px) */

/* Large Screens (1440px and up) */
@media (min-width: 1440px) {
  .container-custom {
    max-width: 1360px;
  }
}

/* Medium Desktop / Laptop (1024px to 1280px) */
@media (max-width: 1280px) {
  .hero-grid {
    grid-template-columns: 45% 55%;
    min-height: 700px;
  }
}

/* Tablets & Small Laptops (992px down) */
@media (max-width: 992px) {
  /* Navigation */
  .nav-menu-desktop,
  .header-ctas__login,
  .header-ctas__btn-desktop {
    display: none !important;
  }

  .mobile-nav-toggle {
    display: block !important;
  }

  /* Hero Stack */
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-content {
    padding: var(--space-7) var(--space-4);
    text-align: center;
    align-items: center;
  }

  .hero-ctas {
    justify-content: center;
  }

  .hero-trust-points {
    justify-content: center;
  }

  .hero-visual {
    height: 480px; /* fixed size for mobile/tablet hero crop */
  }

  .hero-gradient-overlay {
    background: linear-gradient(
      180deg,
      rgba(6, 23, 32, 0.99) 0%,
      rgba(6, 23, 32, 0.8) 40%,
      rgba(6, 23, 32, 0.2) 80%,
      rgba(6, 23, 32, 0) 100%
    );
  }

  /* Paths Grid */
  .paths-grid {
    grid-template-columns: 1fr;
  }

  /* How It Works Grid */
  .how-it-works-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }

  .how-it-works-connector {
    display: none; /* remove connecting line on mobile/tablets */
  }

  /* Metric Dashboard */
  .metric-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* Tablets (768px down) */
@media (max-width: 768px) {
  h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .section-padding {
    padding-block: clamp(3rem, 6vw, 5rem);
  }
}

/* Mobile Devices (430px, 390px, 360px, 320px) */
@media (max-width: 576px) {
  .hero-visual {
    height: 380px;
  }

  .how-it-works-grid {
    grid-template-columns: 1fr;
  }

  .how-it-works-connector {
    display: none;
  }

  .how-step-card {
    margin-top: 0.5rem;
  }

  .hero-ctas > * {
    width: 100%; /* stack CTAs on tiny viewports */
  }

  .btn-premium {
    width: 100%;
  }

  .teacher-card__actions {
    flex-direction: column;
    gap: var(--space-2);
  }
}