/*
 * responsive-patch.css
 * Bluebird Infotech — Mobile & Tablet Responsive Fixes
 * Covers: Pricing, Testimonials, District pages, FAQ, Service pages,
 *         Homepage sections, Blog, Portfolio, About, Contact
 * Breakpoints: 1024px (tablet), 768px (mobile), 480px (small mobile)
 */

/* ============================================================
   GLOBAL — Prevent horizontal overflow on all pages
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ============================================================
   TABLET — 1024px and below
   ============================================================ */
@media (max-width: 1024px) {

  /* Pricing cards: 3-col → 2-col on tablet */
  .pricing-grid,
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Nav padding reduce */
  .nav-inner { padding: 0 20px !important; }

  /* Container padding */
  .ctr { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ============================================================
   MOBILE — 768px and below
   ============================================================ */
@media (max-width: 768px) {

  /* ---- CONTAINER ---- */
  .ctr {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- ALL GRIDS → single column ---- */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- FLEX LAYOUTS → wrap and stack ---- */
  [style*="display:flex"][style*="gap:64px"],
  [style*="display:flex"][style*="gap:56px"],
  [style*="display:flex"][style*="gap:48px"] {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* ---- FIXED WIDTHS → full width ---- */
  [style*="width:280px"],
  [style*="width: 280px"],
  [style*="width:260px"],
  [style*="width: 260px"],
  [style*="width:240px"],
  [style*="width: 240px"],
  [style*="flex-shrink:0;width:280px"] {
    width: 100% !important;
    flex-shrink: unset !important;
  }

  /* ---- SECTIONS padding reduce ---- */
  section[style*="padding:64px 0"],
  section[style*="padding:80px 0"],
  section[style*="padding:72px 0"],
  section[style*="padding:56px 0"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  section[style*="padding-top:calc(64px + 64px)"] {
    padding-top: calc(64px + 32px) !important;
    padding-bottom: 40px !important;
  }

  /* ---- HERO headings ---- */
  h1[style*="font-size:clamp(32px"],
  h1[style*="font-size:clamp(30px"] {
    font-size: 32px !important;
    letter-spacing: -1px !important;
  }

  h2[style*="font-size:clamp(26px"],
  h2[style*="font-size:clamp(28px"],
  h2[style*="font-size:clamp(24px"] {
    font-size: 24px !important;
    letter-spacing: -0.5px !important;
  }

  /* ---- CTA BUTTONS: stack on mobile ---- */
  [style*="display:flex"][style*="align-items:center"][style*="gap:16px"],
  [style*="display:flex"][style*="align-items:center"][style*="gap:14px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* ---- PRICING PAGE SPECIFIC ---- */
  /* Pricing cards */
  .why-card[style*="background"] {
    padding: 24px !important;
  }

  /* Pricing comparison table */
  [style*="overflow-x:auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Trust strip stats */
  [style*="display:flex"][style*="justify-content:space-around"] {
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center !important;
  }

  /* ---- TESTIMONIALS PAGE ---- */
  .testi-card {
    padding: 24px !important;
  }

  /* ---- FAQ LAYOUT ---- */
  /* FAQ sidebar + content → stack */
  .faq-row {
    margin-bottom: 0 !important;
  }

  /* ---- HOMEPAGE: About section inner flex ---- */
  [style*="flex:1;min-width:280px"],
  [style*="flex:1;min-width:260px"] {
    min-width: unset !important;
    width: 100% !important;
  }

  /* ---- SERVICE PAGES: Areas tags wrap ---- */
  [style*="display:flex;flex-wrap:wrap;gap:8px"] {
    gap: 6px !important;
  }

  /* ---- DISTRICT/CITY PAGES: Price overview 4-col → 2-col ---- */
  [style*="display:grid;grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ---- BLOG LIST: cards ---- */
  .blog-card {
    min-width: unset !important;
    width: 100% !important;
  }

  /* ---- FOOTER columns → stack ---- */
  .ft-col {
    min-width: unset !important;
    width: 100% !important;
  }

  /* ---- PORTFOLIO GRID ---- */
  .port-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- STATS STRIP ---- */
  [style*="display:flex"][style*="justify-content:space-around"][style*="flex-wrap:wrap"] {
    gap: 16px !important;
  }

  /* ---- INLINE FLEX that overflows ---- */
  [style*="display:flex;gap:10px;flex-wrap:wrap"],
  [style*="display:flex;flex-wrap:wrap;gap:10px"] {
    gap: 8px !important;
  }

  /* ---- MARQUEE ticker doesn't break ---- */
  .marquee-track { min-width: max-content; }

  /* ---- TABLE: Comparison table horizontal scroll ---- */
  .ctr table {
    min-width: 600px;
    font-size: 13px !important;
  }
  .ctr table td, .ctr table th {
    padding: 10px 14px !important;
  }
}

/* ============================================================
   SMALL MOBILE — 480px and below
   ============================================================ */
@media (max-width: 480px) {

  /* ---- District city price overview 2-col → 1-col ---- */
  [style*="display:grid;grid-template-columns:repeat(4,1fr)"],
  [style*="display:grid"][style*="repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Buttons full width ---- */
  .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ---- Font size reduce on tiny screens ---- */
  body { font-size: 15px !important; }

  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }

  /* ---- Pricing card price font ---- */
  [style*="font-size:42px"] {
    font-size: 34px !important;
  }

  /* ---- Hero padding reduce more ---- */
  section[style*="padding-top:calc(64px + 64px)"] {
    padding-top: calc(64px + 20px) !important;
    padding-bottom: 32px !important;
  }

  /* ---- Badge / tag chips: allow wrap ---- */
  [style*="border-radius:100px;padding:5px 14px"] {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* ---- Footer ---- */
  .ft-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* ---- 404 page ---- */
  [style*="font-size:100px"] {
    font-size: 72px !important;
  }
}

/* ============================================================
   NAV — Mobile hamburger menu already handled by JS
   but ensure no overflow
   ============================================================ */
@media (max-width: 768px) {
  .site-nav { overflow: visible !important; }
  .nav-inner { padding: 0 16px !important; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex !important; }
}

/* ============================================================
   FORM — Contact form fields full width on mobile
   ============================================================ */
@media (max-width: 768px) {
  input, textarea, select {
    width: 100% !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
}