/* ==========================================================================
   responsive.css
   Breakpoint adjustments. Load LAST so overrides win.
   Ranges: <=1024 (laptop/tablet), <=768 (tablet/mobile), <=560 (mobile)
   ========================================================================== */

/* ---------- <= 1024px : laptops & large tablets ---------- */
@media (max-width: 1024px) {
  .products__grid,
  .services__grid,
  .why__grid,
  .testimonials__grid,
  .vmv__grid,
  .approach__grid { grid-template-columns: repeat(2, 1fr); }

  .team__grid,
  .assurance__grid,
  .contact-quick { grid-template-columns: repeat(2, 1fr); }

  .process__timeline { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
  .process__timeline::before { display: none; }

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

/* ---------- <= 900px : navigation collapses ---------- */
@media (max-width: 900px) {
  .nav__toggle { display: inline-grid; place-items: center; }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 84vw);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-lg);
    padding: calc(var(--header-height) + 1rem) var(--space-lg) max(var(--space-lg), env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: -20px 0 60px rgba(16, 24, 40, 0.16);
    transform: translateX(105%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: var(--z-header);
  }
  body.nav-open .nav { transform: translateX(0); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .nav__link {
    display: block;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--color-text) !important;
    font-size: 1rem;
  }
  .nav__link::after { display: none; }

  .nav__actions { flex-direction: column; align-items: stretch; margin-top: var(--space-md); }
  .nav__login { color: var(--color-text) !important; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.75rem; }
  .nav__actions .btn { width: 100%; }

  /* Ensure brand stays dark once menu context differs */
  .header:not(.is-scrolled):not(.header--solid) .brand__name { color: #fff; }
}

/* ---------- <= 768px : tablet / mobile ---------- */
@media (max-width: 768px) {
  :root { --section-padding-y: clamp(3rem, 9vw, 4.5rem); }

  .about-preview__grid,
  .about-story__grid,
  .home-contact__grid,
  .contact__grid,
  .product-feature,
  .service-detail { grid-template-columns: 1fr; }

  /* Reset alternating order so image always sits on top on mobile */
  .product-feature:nth-child(even) .product-feature__media,
  .service-detail:nth-child(even) .service-detail__media { order: -1; }

  .about-story__img-sub { position: static; width: 60%; margin-top: var(--space-md); }
  .about-story__exp { top: 12px; left: 12px; }

  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }

  .form-grid { grid-template-columns: 1fr; }
  .service-detail__features { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .footer__about { grid-column: 1 / -1; }

  .hero { min-height: 88vh; }
  .hero__stats { gap: var(--space-lg); }
  .hero__title { font-size: clamp(2rem, 8vw, 2.9rem); }

  .about-preview__badge { position: static; margin-top: var(--space-md); max-width: none; }
}

/* ---------- <= 560px : small phones ---------- */
@media (max-width: 560px) {
  .products__grid,
  .services__grid,
  .why__grid,
  .testimonials__grid,
  .vmv__grid,
  .approach__grid,
  .team__grid,
  .assurance__grid,
  .contact-quick,
  .counters,
  .process__timeline,
  .svc-stats__grid,
  .values__grid { grid-template-columns: 1fr; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .cta__actions .btn { width: 100%; }
  .cta__actions { flex-direction: column; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: center; text-align: center; }

  .auth__social { grid-template-columns: 1fr; }
  .trust__inner { justify-content: center; text-align: center; }

  .scroll-cue { display: none; }
}

/* ---------- Fine pointer hover niceties off for touch ---------- */
@media (hover: none) {
  .product-card:hover,
  .service-card:hover,
  .why-card:hover,
  .card--lift:hover { transform: none; }
}