/* ==========================================================================
   RehabZ - Responsive Stylesheet
   Breakpoints: 1100px, 992px, 768px, 576px, 380px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Tablets & Small Desktops (<= 1100px)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-title, .hero-title-dark {
    font-size: 2.35rem;
  }
  
  .patient-hero-left h1, .physio-hero-left h1 {
    font-size: 2.35rem;
  }
  
  .footer-top {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 32px;
  }
  
  .nav-menu {
    gap: 22px;
  }
}

/* --------------------------------------------------------------------------
   Medium Tablets (<= 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .nav-menu, .nav-actions .btn {
    display: none;
  }
  
  .mobile-menu-btn {
    display: flex;
  }
  
  .section {
    padding: 70px 0;
  }
  
  .section-hero {
    padding: 50px 0 60px 0;
  }
  
  .section-hero-2col {
    padding: 50px 0 60px 0;
  }
  
  .problem-approach-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .patient-hero-grid, .physio-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .patient-hero-left p, .physio-hero-left p {
    margin-left: auto;
    margin-right: auto;
  }
  
  .feature-grid-cards, .patient-features-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .team-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  
  .footer-brand {
    grid-column: span 2;
  }
  
  .guidance-card {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 32px 24px;
  }
}

/* --------------------------------------------------------------------------
   Small Tablets & Landscape Phones (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-height: 70px;
  }
  
  .hero-title, .hero-title-dark {
    font-size: 1.95rem;
  }
  
  .patient-hero-left h1, .physio-hero-left h1 {
    font-size: 1.95rem;
  }
  
  .section-title, .section-title-dark {
    font-size: 1.75rem;
  }
  
  .hero-subtitle, .section-subtitle {
    font-size: 0.98rem;
  }
  
  .hero-stats-band {
    flex-direction: column;
    gap: 24px;
  }
  
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-cta-group .btn {
    width: 100%;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .contact-form-card {
    padding: 30px 22px;
  }
  
  /* Vertical Stepper adjustments for mobile */
  .stepper-center-line {
    left: 20px;
    transform: none;
    top: 24px;
    bottom: 24px;
  }
  
  .stepper-node-number {
    left: 20px;
    transform: none;
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }

  .stepper-item.step-active .stepper-node-number {
    transform: scale(1.1);
  }
  
  .stepper-item.left, .stepper-item.right {
    justify-content: flex-start;
    padding-left: 60px;
  }

  .stepper-item.left .stepper-content-box,
  .stepper-item.right .stepper-content-box {
    transform: translateX(30px) scale(0.96);
  }

  .stepper-item.step-active .stepper-content-box {
    transform: translateX(0) scale(1);
  }
  
  .stepper-content-box {
    width: 100%;
    padding: 22px 20px;
  }
  
  .quote-card {
    padding: 32px 24px;
  }
  
  .quote-text {
    font-size: 0.98rem;
  }
  
  .roadmap-timeline {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }
  
  .roadmap-line, .roadmap-line-progress {
    display: none;
  }
  
  .roadmap-step {
    flex: 1 1 30%;
    min-width: 90px;
  }
  
  .cta-banner-card {
    padding: 40px 20px;
  }
  
  .cta-banner-card h2 {
    font-size: 1.65rem;
  }
}

/* --------------------------------------------------------------------------
   Mobile Phones (<= 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }
  
  .hero-title, .hero-title-dark {
    font-size: 1.68rem;
  }
  
  .patient-hero-left h1, .physio-hero-left h1 {
    font-size: 1.68rem;
  }
  
  .section-title, .section-title-dark {
    font-size: 1.5rem;
  }
  
  .card, .problem-card, .approach-card, .patient-card, .feature-rich-card {
    padding: 24px 20px;
  }
  
  .footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer-brand {
    grid-column: span 1;
  }
  
  .audience-tabs-nav {
    flex-direction: column;
    gap: 8px;
  }
  
  .audience-tabs-nav .tab-btn {
    width: 100%;
    text-align: center;
  }
  
  .dashboard-stats-row {
    grid-template-columns: 1fr;
  }
  
  .modal-dialog {
    padding: 28px 20px;
  }
  
  .toast-container {
    left: 18px;
    right: 18px;
    bottom: 20px;
  }
}

/* --------------------------------------------------------------------------
   Extra Small Devices (<= 380px)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .hero-title, .hero-title-dark {
    font-size: 1.5rem;
  }
  
  .btn {
    padding: 10px 18px;
    font-size: 0.88rem;
  }
}