/* ============================================================
   BHAR India – Responsive Stylesheet v2.0
   ============================================================ */

/* ── 1400px+ large screens ── */
@media (min-width: 1400px) {
  :root { --max-w: 1340px; }
}

/* ── 1200px ── */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .hero-content { gap: 48px; }
}

/* ── 1024px – small desktops / landscape tablets ── */
@media (max-width: 1024px) {
  /* Layout resets */
  .hero-content          { grid-template-columns: 1fr; gap: 50px; }
  .hero-right            { display: none; }   /* hide dashboard card on tablet */
  .why-grid              { grid-template-columns: 1fr; gap: 40px; }
  .grid-4                { grid-template-columns: repeat(2, 1fr); }
  .offer-grid            { grid-template-columns: repeat(2, 1fr); }
  .service-detail-grid   { grid-template-columns: 1fr; gap: 40px; }
  .products-tabs-layout  { grid-template-columns: 1fr; }
  .contact-grid          { grid-template-columns: 1fr; }
  .about-hero-grid       { grid-template-columns: 1fr; gap: 40px; }
  .leadership-grid       { grid-template-columns: 1fr; }
  .why-visual            { max-width: 600px; }
  .about-stats-row       { grid-template-columns: repeat(2, 1fr); }

  /* Products tab nav becomes horizontal scroll */
  .product-tabs-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    position: static;
  }
  .product-tab-btn { white-space: nowrap; flex-shrink: 0; }
}

/* ── 768px – tablets ── */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }

  /* Hide desktop nav, show hamburger */
  .nav-links,
  .nav-cta-desktop { display: none !important; }
  .hamburger { display: flex; }

  /* Typography */
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.9rem; }
  h3 { font-size: 1.3rem; }

  /* Sections */
  .section    { padding: 72px 0; }
  .section-sm { padding: 48px 0; }

  /* Hero */
  .hero { padding: calc(var(--nav-h) + 40px) 0 60px; min-height: auto; }
  .hero-title  { font-size: 2.4rem; }
  .hero-desc   { font-size: 16.5px; }
  .hero-stats  { gap: 24px; }
  .hero-stat-num { font-size: 2rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Grids */
  .offer-grid    { grid-template-columns: 1fr; }
  .grid-3        { grid-template-columns: 1fr; }
  .grid-2        { grid-template-columns: 1fr; }
  .grid-4        { grid-template-columns: repeat(2, 1fr); }
  .team-grid     { grid-template-columns: repeat(2, 1fr); }
  .blog-grid     { grid-template-columns: 1fr; }
  .project-grid  { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }

  /* CTA banner */
  .cta-banner { padding: 48px 28px; }
  .cta-banner h2 { font-size: 1.8rem; }

  /* Footer */
  .footer-grid   { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand p { max-width: 100%; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

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

  /* Page header */
  .page-header { padding: calc(var(--nav-h) + 36px) 0 40px; }
  .page-header h1 { font-size: 2.2rem; }

  /* About */
  .leadership-grid { grid-template-columns: 1fr; max-width: 480px; }
  .leader-photo { height: 300px; }
  .about-stats-row { grid-template-columns: repeat(2, 1fr); }

  /* Process steps */
  .process-steps-row { grid-template-columns: repeat(2, 1fr); }
  .process-steps-row::before { display: none; }

  /* Blog */
  .blog-filter-row { flex-direction: column; align-items: flex-start; }
  .blog-search input { min-width: 160px; }

  /* Product tabs */
  .product-panel-features { grid-template-columns: 1fr; }

  /* Service detail */
  .service-detail-grid.reverse { direction: ltr; }
  .service-stats-row { grid-template-columns: 1fr 1fr; }

  /* Modal */
  .modal-content { padding: 28px 20px; margin: 10px; }
}

/* ── 480px – mobile ── */
@media (max-width: 480px) {
  :root { --nav-h: 60px; }

  /* Keep the full company name visible beside the logo on mobile. */
  .nav-inner { padding: 0 4%; gap: 10px; }
  .nav-logo { gap: 8px; min-width: 0; }
  .nav-logo-img { height: 38px; flex-shrink: 0; }
  .nav-logo-text { display: flex; min-width: 0; line-height: 1.08; }
  .nav-logo-text .brand-name {
    font-size: 15px;
    white-space: nowrap;
  }
  .nav-logo-text .brand-sub {
    font-size: 9px;
    letter-spacing: 0.035em;
    white-space: nowrap;
  }

  /* Typography */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.65rem; }

  /* Sections */
  .section    { padding: 56px 0; }
  .container  { padding: 0 4%; }

  /* Hero stats: 2-column grid */
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }

  /* Grids */
  .grid-4       { grid-template-columns: 1fr; }
  .team-grid    { grid-template-columns: 1fr; }
  .process-steps-row { grid-template-columns: 1fr; }
  .about-stats-row   { grid-template-columns: 1fr 1fr; }

  /* Cards */
  .card { padding: 24px 18px; }
  .contact-form-wrap { padding: 22px 16px; }

  /* Buttons */
  .btn-lg { padding: 14px 24px; font-size: 15px; }
  .btn    { padding: 12px 20px; font-size: 14.5px; }

  /* CTA banner */
  .cta-banner { padding: 36px 20px; }
  .cta-banner h2 { font-size: 1.5rem; }
  .cta-btns { flex-direction: column; }
  .cta-btns .btn { width: 100%; justify-content: center; }

  /* Footer */
  .footer-social { gap: 8px; }

  /* Partner pills */
  .partner-pill { padding: 10px 18px; font-size: 13px; }

  /* Modal */
  .modal-overlay { padding: 12px; }
  .modal-content { padding: 24px 16px; border-radius: var(--radius-lg); }

  /* Blog filter */
  .filter-tags { gap: 6px; }
  .filter-tag  { padding: 6px 12px; font-size: 12.5px; }
}

/* ── 360px – very small phones ── */
@media (max-width: 360px) {
  .nav-inner { padding: 0 3%; gap: 6px; }
  .nav-logo { gap: 6px; }
  .nav-logo-img { height: 34px; }
  .nav-logo-text .brand-name { font-size: 12.5px; }
  .nav-logo-text .brand-sub { font-size: 7.5px; letter-spacing: 0.015em; }
  .nav-right { gap: 4px; }
  .theme-toggle { width: 36px; height: 36px; }
  .hamburger { padding: 4px; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  .container { padding: 0 3.5%; }
  .hero-stats { grid-template-columns: 1fr; }
  .about-stats-row { grid-template-columns: 1fr; }
  .cta-banner { padding: 30px 16px; }
}