/* ============================================================
   RESPONSIVE.CSS — Mobile, Tablet, Desktop Breakpoints
   ============================================================ */

/* === LARGE DESKTOP (1400px+) === */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
  .hero h1 { font-size: 4.2rem; }
}

/* === TABLET (max 1024px) === */
@media (max-width: 1024px) {
  :root {
    --section-padding: 70px 0;
    --navbar-height: 64px;
  }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid var(--footer-border); border-top: 1px solid var(--footer-border); }
  .stat-item:nth-child(4) { border-top: 1px solid var(--footer-border); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .dual-segment { grid-template-columns: 1fr; }
  .segment { padding: 60px 40px; }
  .hero-cards-stack { max-width: 340px; }
}

/* === TABLET PORTRAIT (max 900px) === */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }

  /* Navbar mobile */
  .nav-menu {
    position: fixed; top: var(--navbar-height); left: 0; right: 0; bottom: 0;
    flex-direction: column; gap: 0;
    background: var(--navbar-bg);
    padding: 20px 0; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--transition);
    z-index: calc(var(--z-navbar) - 1);
    align-items: stretch; justify-content: flex-start;
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-item { border-bottom: 1px solid var(--navbar-border); }
  .nav-link { padding: 16px 24px; font-size: 1rem; border-radius: 0; }
  .nav-link .caret { margin-left: auto; }
  .dropdown-menu {
    position: static; opacity: 1; visibility: hidden; pointer-events: none;
    transform: none; box-shadow: none; border: none; border-radius: 0;
    padding: 0; min-width: unset; background: rgba(255,255,255,0.04);
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease, visibility 0.3s ease;
  }
  .nav-item.open .dropdown-menu { visibility: visible; pointer-events: all; max-height: 400px; }
  .dropdown-item { padding: 12px 24px 12px 48px; color: var(--navbar-text); border-radius: 0; }
  .dropdown-item:hover { background: rgba(255,255,255,0.06); color: var(--navbar-text-hover); }
  .nav-toggle { display: flex; }
  .navbar-actions { display: none; }

  .hero { min-height: auto; padding: 120px 0 60px; }
  .hero .grid-2 { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-stats { gap: 24px; }

  .instructor-stats { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* === MOBILE (max 640px) === */
@media (max-width: 640px) {
  :root {
    --section-padding: 56px 0;
    --section-padding-sm: 40px 0;
    --container-padding: 0 16px;
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-right: none; border-top: 1px solid var(--footer-border); }
  .stat-item:first-child, .stat-item:nth-child(2) { border-top: none; }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--footer-border); }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .hero h1 { font-size: 2rem; }
  .hero-stats { gap: 20px; flex-direction: row; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .dual-segment .segment { padding: 48px 20px; }
  .segment-list li { align-items: flex-start; }
  .segment-list li::before { margin-top: 4px; }

  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { width: 100%; max-width: 300px; justify-content: center; }

  .filter-bar { gap: 8px; }
  .filter-btn { padding: 7px 14px; font-size: 0.8rem; }

  .section-header { margin-bottom: 36px; }
  .section-header h2 { font-size: 1.7rem; }

  .page-header { padding: 90px 0 50px; }
  .page-header h1 { font-size: 1.8rem; }

  .navbar-brand .brand-icon { width: 36px; height: 36px; font-size: 1rem; }
  .brand-name { font-size: 1rem; }
  .brand-sub { font-size: 0.6rem; }

  /* Course detail */
  /* Course detail */
  .course-tabs-wrapper { position: relative; margin: 0 -16px 24px; }
  .course-tabs-wrapper::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0;
    width: 40px; background: linear-gradient(90deg, transparent, var(--card-background));
    pointer-events: none; opacity: 1; transition: opacity 0.3s;
  }
  .course-tabs { padding: 0 16px 8px; margin-bottom: 0; gap: 20px; border-bottom: 1px solid var(--border-color); }
  .course-tabs .tab { padding: 10px 0; font-size: 0.85rem; }
  .tab.active::after { bottom: -1px; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }
  .map-embed { height: 220px; }

  /* Instructor detail */
  .instructor-profile-mini .flex { flex-direction: column; text-align: center; align-items: center; gap: 20px; }
  .instructor-profile-mini .flex .social-links { justify-content: center; }
}

/* === VERY SMALL (max 400px) === */
@media (max-width: 400px) {
  :root {
    --container-padding: 0 12px;
  }
  .hero h1 { font-size: 1.7rem; }
  .hero-stats { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .hero-stat { min-width: 100%; }
  
  .section-header h2 { font-size: 1.5rem; }
  .page-header h1 { font-size: 1.6rem; }
  
  h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }
  
  .btn { width: 100%; justify-content: center; padding: 10px 20px; }
}

/* ---- Print ---- */
@media print {
  .navbar, .footer, #backToTop, .cta-section, #preloader { display: none !important; }
  body { font-size: 12pt; }
  .page-header { padding: 20px 0; background: none; }
  .page-header h1, .page-header p { color: #000; }
}