/* =============================================
   BiologyKendra — Responsive Styles
   ============================================= */

/* Large Tablet / Small Desktop */
@media (max-width: 1024px) {
  .hero-container { grid-template-columns: 1fr; text-align: center; }
  .hero-content { order: 1; }
  .hero-visual { order: 0; display: none; }
  .hero-stats-row { justify-content: center; }
  .hero-actions { justify-content: center; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
  .educators-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }

  .app-container { grid-template-columns: 1fr; }
  .app-mockup { display: none; }

  .cta-box { flex-direction: column; text-align: center; }
  .cta-actions { justify-content: center; }
  .cta-decorations { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

/* Tablet */
@media (max-width: 768px) {
  section { padding: 60px 0; }

  /* Stats bar */
  .stat-item { padding: 0 20px; }
  .stat-divider { height: 30px; }

  /* Navbar */
  .nav-links {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: white;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 9999;
  }
  .nav-links.open { display: flex; }
  .nav-links a,
  .nav-links .dropdown-trigger {
    font-size: 1.1rem;
    padding: 14px 28px;
    width: 220px;
    justify-content: center;
  }
  .nav-links .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: var(--bg-light);
    display: none;
  }
  .nav-links .dropdown.open .dropdown-menu { display: block; }

  .hamburger { display: flex; z-index: 10000; }
  .nav-collapse-btn { display: none; }
  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

  .nav-actions .btn-outline { display: none; }

  /* Hero */
  .hero { padding: 60px 0 0; }
  .hero-title { font-size: 2rem; }
  .hero-stats-row { gap: 16px; }
  .hero-stat strong { font-size: 1.3rem; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }

  /* Courses */
  .courses-grid { grid-template-columns: 1fr; }
  .courses-tabs { gap: 6px; }
  .tab-btn { padding: 8px 16px; font-size: 0.85rem; }

  /* Educators */
  .educators-grid { grid-template-columns: 1fr; }

  /* Results */
  .results-numbers { gap: 30px; flex-wrap: wrap; }
  .result-num strong { font-size: 1.5rem; }

  /* Study Material */
  .material-grid { grid-template-columns: 1fr; }

  /* Testimonials */
  .testimonial-card { width: calc(100% - 0px); }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom .container { flex-direction: column; gap: 6px; text-align: center; }

  /* CTA */
  .cta-box { padding: 40px 24px; }
}

/* Mobile */
@media (max-width: 480px) {
  .top-banner p { font-size: 0.78rem; }

  /* Stats bar */
  .stats-bar { gap: 4px; }
  .stat-item { padding: 12px 16px; }
  .stat-divider { display: none; }

  .nav-logo .logo-text { display: inline; }

  .hero-title { font-size: 1.7rem; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .hero-stats-row { flex-direction: column; gap: 10px; align-items: center; }
  .divider-v { width: 60px; height: 1px; }

  .section-header h2 { font-size: 1.5rem; }

  .feature-card { padding: 22px 18px; }

  .results-grid { gap: 10px; }
  .result-card { min-width: 150px; padding: 18px 14px; }

  .results-numbers { flex-direction: column; gap: 20px; align-items: center; }

  .cta-box { padding: 32px 20px; }
  .cta-content h2 { font-size: 1.5rem; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; justify-content: center; }

  .cta-decorations { flex-direction: column; align-items: center; }

  .footer-grid { grid-template-columns: 1fr; }

  .app-buttons { flex-direction: column; }
  .store-btn { justify-content: center; }
}