/* ============================================================
   BUNTYTECH — COMPREHENSIVE RESPONSIVE FIX
   Fixes: navbar overlap, breadcrumb offset, portfolio filter
   bar, mobile layouts, and general responsive issues.
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1. NAVBAR — CSS custom properties for height
   Desktop navbar: logo 72px + padding 15px×2 = ~102px
   Scrolled:       logo 72px + padding 10px×2 = ~92px
   Mobile (≤768px): min-height 56px → use 60px for safety
   ────────────────────────────────────────────────────────── */
:root {
  --navbar-h: 92px;         /* used for sticky/top calculations */
  --navbar-h-mobile: 60px;
}

/* ──────────────────────────────────────────────────────────
   2. NAVBAR — Always semi-visible (not fully transparent)
   Prevents invisible white text on light-bg page loads.
   The homepage dark hero is fine; other pages get a readable bar.
   ────────────────────────────────────────────────────────── */
.navbar:not(.scrolled) {
  background: rgba(26, 40, 24, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Scrolled state is defined in main.css — no override needed */

/* ──────────────────────────────────────────────────────────
   3. BREADCRUMB (SEO/city pages) — push below fixed navbar
   The .bt-breadcrumb appears at y=0 in document flow while
   the navbar is position:fixed, so it renders hidden under it.
   ────────────────────────────────────────────────────────── */
.bt-breadcrumb {
  margin-top: var(--navbar-h);
  padding: 10px 24px 6px;
  background: rgba(248, 250, 247, 0.98);
  border-bottom: 1px solid rgba(64, 78, 59, 0.1);
  position: relative;
  z-index: 1;
}

/*
   When a breadcrumb immediately precedes the seo-hero, the
   seo-hero's 140px top padding was designed to compensate for
   the navbar height (no breadcrumb). With the breadcrumb now
   accounting for the navbar offset, reduce top padding.
*/
.bt-breadcrumb + .seo-hero {
  padding-top: 36px !important;
}

/* ──────────────────────────────────────────────────────────
   4. PORTFOLIO FILTER BAR — fix sticky top
   The filter bar uses top:70px but the scrolled navbar is ~92px,
   causing partial overlap. Use the CSS variable instead.
   ────────────────────────────────────────────────────────── */
.pf-filters-wrap {
  top: var(--navbar-h) !important;
}

/* ──────────────────────────────────────────────────────────
   5. PORTFOLIO PAGE — mobile grid, modal & stats
   ────────────────────────────────────────────────────────── */

/* Portfolio stats row */
.pf-stats-bar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Portfolio modal inside padding */
.pf-modal-inner {
  max-width: calc(100vw - 32px);
}

/* ──────────────────────────────────────────────────────────
   6. GENERAL — prevent horizontal overflow across all pages
   ────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}
img, video, iframe {
  max-width: 100%;
}

/* ──────────────────────────────────────────────────────────
   7. GENERAL — sections that start immediately after the
   header on pages WITHOUT page-hero or seo-hero need offset.
   This applies to any .section or main element that is the
   very first child of body > main or of body directly.
   ────────────────────────────────────────────────────────── */
/* Contact hero */
.contact-hero-section,
.blog-hero-section,
.gallery-hero-section,
.testimonials-hero-section,
.videos-hero-section,
.store-hero-section {
  /* these all have page-hero-content padding:120px — already fine */
}

/* ============================================================
   TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  /* Services grid */
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Portfolio grid */
  .pf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* About content */
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* Contact form container */
  .contact-container {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  /* ── Navbar ── */
  :root {
    --navbar-h: var(--navbar-h-mobile);
  }

  /* ── Breadcrumb ── */
  .bt-breadcrumb {
    margin-top: var(--navbar-h-mobile);
    padding: 8px 16px 5px;
  }

  .bt-breadcrumb + .seo-hero {
    padding-top: 28px !important;
  }

  /* ── Portfolio filter bar ── */
  .pf-filters-wrap {
    top: var(--navbar-h-mobile) !important;
    padding: 16px 16px 0;
  }

  /* Portfolio filter buttons — allow horizontal scroll */
  .pf-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    scrollbar-width: none;
    gap: 8px;
  }
  .pf-filters::-webkit-scrollbar { display: none; }
  .pf-filter-btn { flex-shrink: 0; }

  /* Portfolio card grid */
  .pf-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px;
    padding: 24px 16px;
  }

  /* Portfolio hero */
  .pf-hero {
    padding: 80px 18px 50px;
    min-height: auto;
  }
  .pf-hero-title { font-size: clamp(48px, 14vw, 80px) !important; }

  /* Portfolio stats */
  .pf-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
    padding: 24px 16px;
  }
  .pf-stat-item { padding: 16px 12px; }
  .pf-stat-num { font-size: 28px; }

  /* Portfolio modal */
  .pf-modal-overlay { padding: 12px; }
  .pf-modal-inner {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border-radius: 16px;
  }
  .pf-modal-hero { height: 200px; }
  .pf-modal-body { padding: 20px 16px; }
  .pf-modal-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .pf-modal-close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  /* SEO / DM hero pages */
  .seo-hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Service detail card */
  .service-detail-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* About page */
  .about-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .about-content-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* Blog */
  .blog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Videos */
  .videos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Process grid */
  .process-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* Experience timeline */
  .experience-container { gap: 24px; }
  .experience-card { padding: 20px 16px; }

  /* Cert grid */
  .certs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* Contact page */
  .contact-map iframe { height: 200px; }

  /* Footer */
  .footer { padding: 48px 16px 0; }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* Page-hero — ensure adequate top padding for fixed navbar */
  .page-hero-content {
    padding-top: 100px;
  }

  /* Store page grid */
  .store-grid,
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  /* WhatsApp widget */
  .wa-widget { right: 12px; bottom: 14px; }
  .wa-popup { width: min(310px, calc(100vw - 24px)); }
  .music-btn, #music-btn { bottom: 80px; }

  /* Tables — horizontal scroll */
  table, .compare-table, .seo-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Quote form */
  .qf-row { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   SMALL MOBILE (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .store-grid,
  .products-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .certs-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .videos-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pf-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Breadcrumb smaller text */
  .bt-breadcrumb ol { font-size: 11px; }
}

/* ============================================================
   VERY SMALL MOBILE (≤380px)
   ============================================================ */
@media (max-width: 380px) {
  .pf-hero-title { font-size: clamp(38px, 15vw, 60px) !important; }
  .bt-breadcrumb ol { font-size: 10px; gap: 2px 1px; }
}