/* ==========================================================================
   RESPONSIVE.CSS — Mobile First Breakpoints
   Scrapwala Hyderabad — Premium Home Service Redesign
   ========================================================================== */

/* ---- Tablet (≤992px) ---- */
@media (max-width: 992px) {

  .nav__links, .nav__actions { display: none; }
  .nav__hamburger { display: flex; }

  .hero__title { font-size: clamp(28px, 5.5vw, 48px); letter-spacing: -0.5px; }

  .problem-grid,
  .service-row,
  .service-row--reverse,
  .why-grid,
  .booking-grid { grid-template-columns: 1fr; gap: var(--space-10); }

  .service-row--reverse { direction: ltr; }

  .trust-band__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .trust-stat + .trust-stat::before { display: none; }

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

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

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

  .why-content { max-width: 100%; }

  .service-row__image { aspect-ratio: 16/9; }
  .why-image { aspect-ratio: 16/9; }
  .problem-image { aspect-ratio: 16/9; }

  .section-title { font-size: clamp(20px, 4vw, 30px); }
  .final-cta h2 { font-size: clamp(22px, 4.5vw, 34px); }

  .page-hero { padding: 110px var(--gutter) var(--space-16); }
}

/* ---- Mobile (≤768px) ---- */
@media (max-width: 768px) {

  :root {
    --gutter: 20px;
    --section-y: 64px;
  }

  .hero__title { font-size: clamp(28px, 7vw, 40px); letter-spacing: -0.3px; }
  .hero__sub { font-size: var(--text-base); }
  .hero__trust { gap: var(--space-4); }
  .hero__trust-sep { display: none; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__content { padding: 120px 20px 80px; }
  .hero__bg-image::after {
    background: linear-gradient(180deg, rgba(250,247,242,0.97) 0%, rgba(250,247,242,0.80) 60%, rgba(250,247,242,0.3) 100%);
  }

  .trust-band__inner { grid-template-columns: repeat(2, 1fr); }
  .trust-stat__value { font-size: var(--text-3xl); }

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

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

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

  .contact-inner { flex-direction: column; align-items: flex-start; }
  .contact-info { flex-direction: column; gap: var(--space-5); }

  .section-title { font-size: clamp(18px, 5.5vw, 28px); }
  .final-cta h2 { font-size: clamp(20px, 5.5vw, 30px); }
  .final-cta__actions { flex-direction: column; align-items: center; }
  .final-cta__actions .btn { width: 100%; max-width: 320px; justify-content: center; }

  .page-hero h1 { font-size: clamp(24px, 7vw, 36px); }
  .page-hero__actions { flex-direction: column; }
  .page-hero__actions .btn { width: 100%; justify-content: center; }

  .steps { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }

  /* Sticky CTA show on mobile */
  .sticky-cta { display: flex; }

  /* Push content above sticky cta */
  body { padding-bottom: 80px; }

  .wa-widget { bottom: 90px; }

  .ba-container { aspect-ratio: 4/3; }

  .google-review-grid { grid-template-columns: 1fr; }

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

  .service-row { padding: var(--space-10) 0; }
}

/* ---- Small phones (≤480px) ---- */
@media (max-width: 480px) {
  .hero__title { font-size: clamp(28px, 10vw, 40px); }
  .trust-band__inner { grid-template-columns: 1fr 1fr; }
  .trust-stat__value { font-size: var(--text-2xl); }
  .nearby-grid, .areas-grid { gap: var(--space-2); }
  .nearby-pill, .area-pill { font-size: 12px; padding: 6px 14px; }
}