/* ============================================
   ASPIRE LAHORE LAB — Responsive Styles v2.0
   ============================================ */

/* -------------------------------------------
   1400px & Below
   ------------------------------------------- */
@media (max-width: 1400px) {
  .container { max-width: 1140px; }
}

/* -------------------------------------------
   1200px & Below
   ------------------------------------------- */
@media (max-width: 1200px) {
  .container { max-width: 960px; padding: 0 16px; }
  .navbar-link { padding: 8px 10px; font-size: var(--text-xs); }
  .hero-title { font-size: var(--text-5xl); }
}

/* -------------------------------------------
   992px & Below (Tablet / Mobile menu)
   ------------------------------------------- */
@media (max-width: 992px) {
  .container { max-width: 100%; padding: 0 16px; }
  .section { padding: 60px 0; }
  .section-title { font-size: var(--text-3xl); }
  .section-header { margin-bottom: 36px; }

  /* Navbar */
  .navbar-menu {
    position: fixed; top: var(--header-total); left: 0; right: 0;
    background: var(--bg-body);
    flex-direction: column;
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    max-height: calc(100vh - var(--header-total));
    overflow-y: auto;
  }
  .navbar-menu.active { transform: translateY(0); opacity: 1; visibility: visible; }
  .navbar-link { padding: 12px 16px; width: 100%; font-size: var(--text-sm); }
  .navbar-toggle { display: flex; }
  .top-bar-left .top-bar-item:nth-child(3),
  .top-bar-right .top-bar-social { display: none; }
  .top-bar-item { font-size: 11px; gap: 4px; }

  /* Hero */
  .hero-title { font-size: var(--text-4xl); }
  .hero-stats { gap: 16px; }
  .hero-stat-num { font-size: var(--text-2xl); }

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

  /* Departments */
  .dept-card { height: 240px; }

  /* Packages */
  .package-card.featured { transform: none; }
  .package-card.featured:hover { transform: translateY(-6px); }

  /* Newsletter */
  .newsletter-wrapper { padding: 32px 24px; }
  .newsletter-form { flex-direction: column; }

  /* Footer */
  .footer-bottom-inner { flex-direction: column; text-align: center; }

  /* Mobile bottom bar */
  .mobile-bottom-bar { display: block; }

  /* Adjust bottom spacing for mobile bar */
  body { padding-bottom: 60px; }

  /* Float buttons */
  .float-buttons { bottom: 80px; right: 16px; }
  .float-whatsapp { bottom: 144px; right: 16px; }

  /* Cart */
  .cart-sidebar { width: 100%; }

  .nav-item-has-dropdown .navbar-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 0 16px;
    display: none;
  }
  .nav-item-has-dropdown.open .navbar-dropdown { display: block; }
}

/* -------------------------------------------
   768px & Below
   ------------------------------------------- */
@media (max-width: 768px) {
  .section { padding: 48px 0; }
  .section-title { font-size: var(--text-2xl); }

  .top-bar-left .top-bar-item:nth-child(2),
  .top-bar-left .top-bar-item:nth-child(3) { display: none; }

  .hero-title { font-size: var(--text-3xl); }
  .hero-text { font-size: var(--text-base); }
  .hero-buttons { flex-direction: column; }
  .hero-btn { justify-content: center; }

  .hero-stats { justify-content: center; gap: 12px; }
  .hero-stat { min-width: 80px; }
  .hero-stat-num { font-size: var(--text-xl); }

  .features-strip { padding: 24px 0; }

  .page-header { padding: 60px 0 40px; }
  .page-title { font-size: var(--text-3xl); }

  .ceo-content { padding: 32px 24px; }

  .test-search-bar { flex-direction: column; }
  .test-table { font-size: var(--text-xs); }
  .test-table th, .test-table td { padding: 10px; }

  .mega-camp { padding: 48px 0; }
  .mega-camp h2 { font-size: var(--text-2xl); }
  .mega-camp-timer { gap: 10px; }
  .mega-camp-timer .timer-item { padding: 14px 18px; min-width: 70px; }
  .timer-num { font-size: var(--text-2xl); }

  .popup-modal { padding: 24px; margin: 16px; }
  .popup-countdown .cd-item { min-width: 52px; padding: 8px 12px; }
  .popup-countdown .cd-num { font-size: var(--text-xl); }

  .footer-main { padding: 40px 0 24px; }

  .blog-img { height: 180px; }
  .blog-content { padding: 20px; }

  .team-img { height: 220px; }

  .contact-info-card { padding: 20px; }

  .map-container iframe { height: 280px; }
}

/* -------------------------------------------
   576px & Below
   ------------------------------------------- */
@media (max-width: 576px) {
  .section { padding: 40px 0; }
  .section-title { font-size: var(--text-xl); }
  .section-header { margin-bottom: 28px; }
  .section-badge { font-size: 10px; padding: 4px 12px; }

  .top-bar { font-size: 10px; height: 36px; padding: 6px 0; }
  .top-bar-left { gap: 10px; }
  .top-bar-item { gap: 3px; }

  :root { --topbar-height: 36px; --navbar-height: 60px; }

  .navbar-brand-icon { width: 36px; height: 36px; font-size: 16px; }
  .navbar-brand-name { font-size: 14px; }
  .navbar-brand-tagline { display: none; }

  .hero-title { font-size: var(--text-2xl); }
  .hero-badge { font-size: 10px; padding: 6px 14px; }
  .hero-stat-num { font-size: var(--text-lg); }
  .hero-stat-suffix { font-size: var(--text-base); }

  .page-title { font-size: var(--text-2xl); }
  .page-subtitle { font-size: var(--text-base); }

  .about-preview-image { min-height: 260px; }
  .about-exp-badge { padding: 12px 16px !important; }
  .about-exp-badge .exp-num { font-size: var(--text-2xl) !important; }

  .service-card, .why-card { padding: 24px 20px; }
  .service-card-icon, .why-icon { width: 48px; height: 48px; font-size: 20px; }

  .dept-card { height: 200px; }

  .package-card { padding: 24px 20px; }
  .package-price .price { font-size: var(--text-2xl); }

  .mega-camp h2 { font-size: var(--text-xl); }
  .mega-camp-timer .timer-item { padding: 10px 14px; min-width: 60px; }
  .timer-num { font-size: var(--text-xl); }

  .newsletter-section { padding: 40px 0; }
  .newsletter-wrapper { padding: 24px 20px; }

  .test-cat-btn { font-size: 11px; padding: 6px 12px; }

  .calendar-day { padding: 6px; font-size: 11px; }
  .time-slot { padding: 8px 12px; font-size: 11px; }

  .blog-date { padding: 6px 10px; }
  .blog-date span { font-size: 14px; }

  .footer-main { padding: 32px 0 16px; }

  .popup-modal { padding: 20px; }
}

/* -------------------------------------------
   400px & Below
   ------------------------------------------- */
@media (max-width: 400px) {
  .hero-title { font-size: 1.5rem; }
  .hero-stat { min-width: 60px; }
  .hero-stat-num { font-size: var(--text-base); }
  .hero-stat-label { font-size: 10px; }

  .section-title { font-size: var(--text-lg); }

  .mobile-bottom-link { font-size: 9px; min-width: 48px; }
  .mobile-bottom-link i { font-size: 16px; }

  .page-title { font-size: 1.5rem; }

  .dept-card { height: 180px; }
}

/* -------------------------------------------
   Landscape Mode
   ------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section, .hero-slide { min-height: 100vh; }
  .hero-content { padding: 40px 0; }
  .hero-title { font-size: var(--text-3xl); }
  .hero-stats { display: none; }
  .popup-modal { max-height: 90vh; overflow-y: auto; }
}

/* -------------------------------------------
   Dark Mode Responsive Overrides
   ------------------------------------------- */
[data-theme="dark"] .navbar-menu {
  border-bottom-color: var(--neutral-700);
}

/* -------------------------------------------
   High Contrast Mode
   ------------------------------------------- */
@media (prefers-contrast: high) {
  .btn { border-width: 2px; }
  .form-input, .form-select, .form-textarea { border-width: 2px; }
  .service-card, .why-card, .package-card, .page-card { border-width: 2px; }
}