/* ============================================
   RESPONSIVE.CSS — Media queries only.
   Mobile-first: base styles in style.css cover < 576px.
   Progressively enhance upward.
   ============================================ */

/* ============================================
   Small devices — ≥576px
   ============================================ */
@media (min-width: 576px) {
  .hero-section {
    height: 75vh;
  }
}

/* ============================================
   Tablets — ≥768px
   ============================================ */
@media (min-width: 768px) {
  .section-padding {
    padding: var(--space-6) 0;
  }

  .hero-section {
    height: 80vh;
  }

  h1 { font-size: 2.75rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.625rem; }
  h4 { font-size: 1.375rem; }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   Desktop — ≥992px (nav kicks in here)
   ============================================ */
@media (min-width: 992px) {
  .section-padding {
    padding: var(--space-7) 0;
  }

  .hero-section {
    height: 100vh;
  }

  h1 { font-size: var(--font-size-5xl); }   /* 3rem */
  h2 { font-size: var(--font-size-4xl); }   /* 2.25rem */
  h3 { font-size: var(--font-size-3xl); }   /* 1.75rem */
  h4 { font-size: var(--font-size-2xl); }   /* 1.5rem */

  /* Desktop nav: show inline */
  .navbar-collapse {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .navbar-brand img {
    height: 80px;
  }
}

/* ============================================
   Large desktop — ≥1200px
   ============================================ */
@media (min-width: 1200px) {
  h1 { font-size: 3.25rem; }

  .section-padding {
    padding: var(--space-7) 0;
  }
}

/* ============================================
   XL desktop — ≥1400px
   ============================================ */
@media (min-width: 1400px) {
  .container {
    max-width: var(--container-max-width);
  }
}

/* ============================================
   Mobile-specific overrides (max-width)
   ============================================ */
@media (max-width: 991px) {
  /* Mobile nav panel */
  .navbar-collapse {
    position: fixed !important;
    top: 0;
    left: -100%;
    width: 300px !important;
    height: 100vh !important;
    background: var(--color-white) !important;
    padding: 80px 24px 24px !important;
    transition: left 0.3s ease;
    overflow-y: auto !important;
    z-index: var(--z-fixed);
    box-shadow: var(--shadow-xl);
  }

  .navbar-collapse.show {
    left: 0;
  }

  .nav-link::after {
    display: none;
  }

  .navbar-brand img {
    height: 50px;
  }

  .header.scrolled .navbar-brand img {
    height: 50px;
  }

  .navbar-actions .btn-cta {
    font-size: var(--font-size-sm);
    padding: 8px 16px;
  }
}

@media (max-width: 767px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }

  .section-padding {
    padding: var(--space-5) 0;
  }

  .hero-section {
    height: 70vh;
    min-height: 480px;
  }

  .footer-main {
    padding: var(--space-5) 0;
  }

  .back-to-top {
    bottom: 80px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}