/* =============================================================
   RESPONSIVE.CSS
   Breakpoints: 1024px (tablet landscape), 768px (tablet), 480px (mobile)
   Mobile-first overrides layered on top of style.css
   ============================================================= */

/* --------------------------------------------------------------
   TABLET LANDSCAPE — up to 1024px
   -------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --header-height: 76px; }

  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .programs__path { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }
  .testimonials__track { grid-template-columns: repeat(1, 1fr); max-width: 560px; margin: 0 auto; }
  .testimonials__dots { display: none; }

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

  .hero__inner { gap: var(--space-lg); }
}

/* --------------------------------------------------------------
   TABLET — up to 900px (nav collapses)
   -------------------------------------------------------------- */
@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
  }
  .main-nav.is-open { max-height: 400px; }
  .main-nav__list {
    flex-direction: column;
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .header__phone span { display: none; }
  .nav-toggle { display: flex; }
  .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --------------------------------------------------------------
   MOBILE — up to 768px
   -------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --space-2xl: 3.5rem;
    --space-xl: 2.5rem;
  }

  .header__actions .btn { display: none; }

  .hero { padding-top: var(--space-lg); }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 420px; margin: 0 auto var(--space-md); }
  .hero__badge { left: 50%; transform: translateX(-50%); bottom: -20px; }
  .hero__trust { justify-content: space-between; gap: var(--space-sm); }
  .hero__cta-group { flex-direction: column; }
  .hero__cta-group .btn { width: 100%; }

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

  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }

  .lead-form__inner { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer__bottom-inner { flex-direction: column; text-align: center; }

  /* Show sticky mobile CTA, hide phone floating button (redundant with sticky bar) */
  .sticky-mobile-cta { display: flex; }
  .floating-actions { bottom: calc(var(--space-md) + 64px); }
}

/* --------------------------------------------------------------
   SMALL MOBILE — up to 480px
   -------------------------------------------------------------- */
@media (max-width: 480px) {
  .container { padding: 0 var(--space-sm); }

  .hero__trust { flex-wrap: wrap; }
  .hero__trust-item { flex: 1 1 40%; }

  .trust-bar__logos { gap: var(--space-md); }

  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery__item--tall { grid-row: span 1; }

  .stats__grid { grid-template-columns: 1fr; gap: var(--space-md); }

  .floating-btn { width: 46px; height: 46px; }
}