/* ============================================================
   NAKUL PATHOLOGY LAB — responsive.css
   Breakpoint adjustments. Base styles (style.css) target large
   desktop; these tune the layout down through tablets and phones.
   Tested at 320 / 360 / 375 / 390 / 414 / 480 / 768 / 820 /
   1024 / 1280 / 1440 / 1600.
   ============================================================ */

/* The full desktop nav (logo · 8 links · Call · Book) only appears at
   >=1280px, where it fits comfortably. Below that we switch to the
   hamburger drawer rather than let items overlap. */

/* -------------------- Tablet & below: hamburger drawer -------------------- */
@media (max-width: 1279px) {
  :root { --header-h: 68px; }

  .nav-toggle { display: inline-flex; }

  .nav-menu {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: .5rem 20px 1.25rem;
    transform: translateY(-150%);
    transition: transform .28s ease;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav-menu.open { transform: translateY(0); }
  .nav-menu a {
    padding: .9rem .5rem;
    border-bottom: 1px solid var(--surface-2);
    border-radius: 0;
    font-size: 1rem;
  }
  .nav-menu a:hover,
  .nav-menu a.active { background: var(--surface); }

  /* Book / Call actions inside the drawer */
  .nav-menu-cta { display: block; padding-top: 1.1rem; border: 0; }
  .nav-menu-cta .btn { padding: .85rem 1rem; }
  .nav-menu-call {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    margin-top: .7rem; padding: .3rem;
    color: var(--heading); font-weight: 600; font-size: .95rem;
    border: 0;
  }
  .nav-menu-call b { color: var(--primary); }

  /* Hide the desktop-only right-side actions */
  .nav-actions .btn-desktop-cta { display: none; }

  /* Lock background scroll while the drawer is open */
  body.nav-open { overflow: hidden; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-newsletter { grid-column: 1 / -1; }

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

/* -------------------- Tablet portrait -------------------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-visual { order: -1; max-width: 480px; margin-inline: auto; }
  .hero-float { display: none; }

  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split-visual,
  .split-photo { max-width: 460px; margin-inline: auto; order: -1; }

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

/* -------------------- Phones -------------------- */
@media (max-width: 640px) {
  h1 { font-size: clamp(1.7rem, 7vw, 2rem); }
  h2 { font-size: clamp(1.4rem, 6vw, 1.6rem); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .footer-bottom { justify-content: center; text-align: center; }

  .trust-strip .container { justify-content: flex-start; }
  .trust-item { flex: 1 1 42%; }

  .hero-cta { gap: .6rem; }
  .hero-cta .btn { flex: 1 1 100%; }
  .steps { grid-template-columns: 1fr; }

  .section-head { margin-bottom: 2rem; }
  .modal-header, .modal-body { padding: 1.1rem; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-btn { width: 42px; height: 42px; font-size: 1.3rem; }

  /* Floating buttons: smaller + lifted so they never cover CTAs/content */
  .fab-stack { right: 14px; bottom: 14px; gap: .55rem; }
  .fab { width: 48px; height: 48px; font-size: 1.25rem; }
}

/* -------------------- Small phones (320–380) -------------------- */
@media (max-width: 380px) {
  .container { padding-inline: 14px; }
  .brand-logo { width: 40px; height: 40px; }
  .brand-text .name { font-size: .92rem; }
  .brand-text .tag { font-size: .64rem; }
  .footer-main { grid-template-columns: 1fr; }
  .trust-item { flex: 1 1 100%; }
  .btn-lg { padding: .8rem 1.2rem; font-size: 1rem; }
  .nav-menu a { padding: .8rem .4rem; }
}

/* -------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}