/* ==========================================================================
   Medical Counselling – Responsive Stylesheet
   Breakpoints: 1200px | 992px | 768px | 576px | 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Desktop (≤ 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .container { padding: 0 var(--space-5); }
  .hero-content { gap: var(--space-10); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-8); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}

/* --------------------------------------------------------------------------
   Laptop / Tablet Landscape (≤ 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  :root {
    --space-20: 4rem;
    --space-24: 5rem;
  }

  /* Nav hidden */
  .nav { display: none; }
  .header-cta .btn { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-description { max-width: 100%; margin: 0 auto var(--space-8); }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { display: none; }
  .hero::after { display: none; }

  /* Grids */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-brand { grid-column: 1 / -1; }

  /* Header top */
  .header-top-contact span:nth-child(2) { display: none; }

  /* Form row */
  .form-row { grid-template-columns: 1fr; }

  /* Portal Responsive Grid */
  .portal-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .portal-hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .portal-hero-left .hero-stats {
    justify-content: center;
  }
  .portal-hero-left .hero-stat:first-child {
    margin-left: 0 !important;
  }
  .portal-hero-left .hero-cta {
    justify-content: center;
  }
  .portal-hero-right {
    margin-top: var(--space-6);
  }
  .predictor-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .predictor-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-8);
  }
  .predictor-features-list {
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Tablet Portrait (≤ 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --space-16: 3rem;
    --space-20: 3.5rem;
  }

  .container { padding: 0 var(--space-4); }
  .section { padding: var(--space-16) 0; }
  .section-sm { padding: var(--space-10) 0; }

  /* Header top */
  .header-top { display: none; }

  /* Header Mobile Optimization */
  .logo-text span { display: none !important; }
  .logo-text strong { font-size: var(--text-lg) !important; }
  .logo-icon { width: 38px !important; height: 38px !important; font-size: 18px !important; }
  .header-main { padding: var(--space-2) 0 !important; }

  /* Hero */
  .hero {
    min-height: auto;
    padding: 100px 0 var(--space-16);
  }

  .hero-title { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  .hero-stats { gap: var(--space-6); }
  .hero-stat-value { font-size: var(--text-2xl); }

  /* Grids */
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  /* Section title */
  .section-title { font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-number { font-size: 2.2rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: var(--space-3); }
  .footer-bottom-links { justify-content: center; }

  /* Contact form box */
  .contact-form-box { padding: var(--space-6); }
  .lead-form { position: static; }

  /* Page hero */
  .page-hero { padding: var(--space-16) 0 90px; padding-top: calc(var(--space-16) + 80px); }
  .page-hero h1 { font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); }

  /* WhatsApp / Scroll buttons */
  .whatsapp-float { bottom: var(--space-5); right: var(--space-5); width: 50px; height: 50px; font-size: 22px; }
  .scroll-top { bottom: var(--space-5); left: var(--space-5); }

  /* Tables */
  .table-responsive { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   Mobile (≤ 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  :root {
    --space-16: 2.5rem;
  }

  .container { padding: 0 var(--space-4); }

  /* Hero */
  .hero { padding: 90px 0 var(--space-12); }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: var(--space-5); }
  .hero-stat-value { font-size: var(--text-2xl); }

  /* Announcement */
  .announcement-bar { display: none; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .stat-number { font-size: 2rem; }

  /* Cards */
  .service-card { padding: var(--space-6); }
  .step-card { padding: var(--space-6); }
  .testimonial-card { padding: var(--space-6); }

  /* Form */
  .contact-form-box { padding: var(--space-5); }

  /* Buttons */
  .btn-lg { padding: var(--space-3) var(--space-5); font-size: var(--text-base); }

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

  /* Dropdown wide */
  .dropdown-wide { grid-template-columns: 1fr; min-width: 220px; }

  /* Footer */
  .footer-social { justify-content: flex-start; }

  /* Lead form header */
  .lead-form { padding: var(--space-6); }
  .lead-form-header {
    margin: calc(-1 * var(--space-6));
    margin-bottom: var(--space-5);
    padding: var(--space-5) var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   Extra Small (≤ 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero-title { font-size: 1.75rem; }
  .section-title { font-size: 1.6rem; }
  .grid-4 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {
  .header, .footer, .whatsapp-float, .scroll-top, .mobile-nav, .nav-overlay {
    display: none !important;
  }
  body { color: #000; font-size: 12pt; }
  a { color: inherit; }
  .page-hero { background: #eee !important; color: #000 !important; }
}