/* ============================================
   BISHNOI STUDIOS — Responsive Overrides
   Mobile-first breakpoints for all sections
   Breakpoints: 1100px | 860px | 640px | 480px | 360px
   ============================================ */

/* ── 1100px — Large Tablet / Small Desktop ── */
@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 32px;
  }
}

/* ── 960px — Medium tablet / landscape ─────── */
@media (max-width: 960px) {
  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: left;
  }
  .hero-visual {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .hv-row { grid-column: span 2; }
  .hv-banner { grid-column: span 2; }

  /* Services */
  .services-grid { grid-template-columns: 1fr 1fr; }

  /* About dark */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Team grid */
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  /* Values */
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  /* Services page */
  .svc-page-grid { grid-template-columns: 1fr; }
  .svc-big.full {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }

  /* Contact page */
  .contact-grid { grid-template-columns: 1fr; }
}

/* ── 860px — Tablet portrait ────────────────── */
@media (max-width: 860px) {
  /* Section padding */
  .section { padding: clamp(56px, 8vw, 90px) 0; }

  /* Split head */
  .split-head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 44px;
  }
  .split-head-right p { margin-bottom: 18px; }

  /* Services grid → single column */
  .services-grid { grid-template-columns: 1fr; }

  /* Work grid → all full width */
  .work-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .wi:nth-child(1),
  .wi:nth-child(2),
  .wi:nth-child(3),
  .wi:nth-child(4) {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }

  /* Work head */
  .work-head { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Testimonials */
  .test-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }

  /* Process steps */
  .steps {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .steps::before { display: none; }

  /* Portfolio grid */
  .portfolio-grid { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand {
    grid-column: span 2;
  }

  /* Stats strip on work.html */
  .work-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Page hero */
  .page-hero { padding: 130px 0 60px; }
  .page-hero-bg { width: 300px; height: 300px; top: -60px; right: -80px; }
}

/* ── 640px — Mobile landscape / large phone ── */
@media (max-width: 640px) {
  /* Base */
  .section { padding: 52px 0; }
  .container { padding: 0 18px; }

  /* Hero */
  .hero { padding-top: 86px; }
  .hero-h1 { font-size: 40px; letter-spacing: -0.03em; }
  .hero-sub { font-size: 15px; }
  .hero-btns { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .hero-trust { flex-wrap: wrap; gap: 10px; }
  .hero-visual {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  .hv-banner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 18px;
  }
  .hv-stars { width: 100%; text-align: center; }

  /* Hero pill */
  .hero-pill { font-size: 11px; padding: 4px 12px 4px 4px; }

  /* Services */
  .svc-card { padding: 30px 22px; }
  .svc-icon { font-size: 32px; }

  /* Work grid → single column on mobile */
  .work-grid { grid-template-columns: 1fr; gap: 10px; }
  .wi:nth-child(1),
  .wi:nth-child(2),
  .wi:nth-child(3),
  .wi:nth-child(4) {
    grid-column: span 1;
    aspect-ratio: 16/9;
  }

  /* About dark */
  .about-stats { grid-template-columns: 1fr 1fr 1fr; }
  .stat-n { font-size: 26px; }
  .stat { padding: 18px 10px; }

  /* Process → single column */
  .steps { grid-template-columns: 1fr; gap: 28px; }

  /* Testimonials */
  .test-card { padding: 24px 20px; }
  .test-card::before { font-size: 56px; }

  /* CTA */
  .cta-form { flex-direction: column; gap: 10px; }
  .cta-form .btn { width: 100%; justify-content: center; }
  .cta-inner h2 { font-size: 36px; }
  .socials { gap: 8px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-legal { flex-wrap: wrap; gap: 14px; }

  /* Team */
  .team-grid { grid-template-columns: 1fr 1fr; }

  /* Values */
  .values-grid { grid-template-columns: 1fr; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; }

  /* Contact form */
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 28px 22px; }

  /* Page hero */
  .page-hero { padding: 110px 0 52px; }
  .page-hero h1 { font-size: 38px; }

  /* Services page cards */
  .svc-big { padding: 32px 24px; }

  /* Filter bar */
  .filter-bar { gap: 8px; }
  .filter-btn { padding: 7px 14px; font-size: 11.5px; }

  /* Navbar */
  .logo-text { font-size: 14px; }
  .logo-mark { width: 32px; height: 32px; font-size: 16px; border-radius: 5px; }

  /* FAQ */
  .faq-q { font-size: 15px; }

  /* Work stats strip */
  .work-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }
}

/* ── 480px — Small mobile ────────────────────── */
@media (max-width: 480px) {
  /* Hero */
  .hero-h1 { font-size: 34px; }
  .hero-btns .btn { padding: 13px 20px; font-size: 12px; }

  /* Hero visual — keep 2 col stat cards but smaller */
  .hv-card { padding: 16px 14px; }
  .hvc-num { font-size: 24px; }
  .hvc-icon { font-size: 20px; }

  /* Stats */
  .about-stats { grid-template-columns: 1fr 1fr 1fr; }

  /* Team → single column */
  .team-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }

  /* CTA inner h2 */
  .cta-inner h2 { font-size: 30px; }

  /* Process */
  .step { padding: 0 10px; }

  /* Page hero */
  .page-hero h1 { font-size: 32px; }

  /* Services dark card */
  .svc-big[style*="background:var(--ink)"] .svc-feat { font-size: 13px; }

  /* Mobile nav links bigger on tiny screens */
  .nav-mobile ul li a { font-size: 28px; padding: 14px 0; }

  /* Contact info cards */
  .ci-card { padding: 16px 18px; }
  .ci-icon { width: 36px; height: 36px; font-size: 16px; }

  /* Footer bottom wrap */
  .footer-bottom { gap: 8px; }
  .footer-credit { font-size: 11px; }
  .footer-copy { font-size: 11px; }
}

/* ── 360px — Very small devices ──────────────── */
@media (max-width: 360px) {
  .hero-h1 { font-size: 30px; }
  .container { padding: 0 14px; }
  .btn { padding: 12px 18px; font-size: 12px; }
  .svc-chips { gap: 5px; }
  .chip { font-size: 10px; padding: 3px 8px; }
}

/* ── Touch / Hover fix ───────────────────────── */
@media (hover: none) {
  /* Remove hover-only transforms on touch devices for better UX */
  .hv-card:hover,
  .test-card:hover,
  .svc-card:hover,
  .wi:hover .wi-thumb { transform: none; }
}

/* ── Print ───────────────────────────────────── */
@media print {
  .navbar, .hamburger, .nav-mobile, #btt, .marquee { display: none !important; }
  .hero { min-height: auto; padding-top: 20px; }
  body { font-size: 14px; }
}