/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVE — All Pages
   Applied globally via header.php
═══════════════════════════════════════════════════════ */

/* ── GLOBAL: No horizontal scroll on any device ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
/* Prevent any element from breaking layout width */
img, video, iframe, svg, canvas {
  max-width: 100% !important;
  height: auto;
}
/* Sections & wrappers must never exceed viewport */
section, .container, .container-fluid,
.row, [class*="col-"], .card, .hero-wrapper,
.careers-wrapper, .services-wrapper {
  max-width: 100% !important;
}

/* ── 768px and below ── */
@media (max-width: 768px) {
  /* Kill overflow at every level */
  *, *::before, *::after { max-width: 100%; }
  html, body { overflow-x: hidden !important; width: 100% !important; }
  /* Rows shouldn't create negative margin overflow */
  .row { margin-left: 0 !important; margin-right: 0 !important; }
  /* Containers stay within viewport */
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
  /* Tables scroll internally, not the whole page */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* Pre/code blocks */
  pre, code { overflow-x: auto; max-width: 100%; white-space: pre-wrap; word-break: break-word; }
  /* Images */
  img { max-width: 100% !important; height: auto !important; }
  /* Inline wide elements */
  [style*="min-width"] { min-width: unset !important; }
  [style*="width: 1"] { max-width: 100% !important; }

  /* ─── HERO SECTIONS (all pages) ─── */
  .pro-hero,
  .about-hero,
  .contact-hero,
  .careers-hero,
  .wj-hero,
  .detail-hero,
  .services-hero,
  .blog-hero,
  .gallery-hero,
  .openings-hero,
  .apply-hero,
  .refer-hero,
  .partner-hero,
  .compliance-hero {
    padding: 65px 0 45px !important;
  }

  /* ─── HERO CONTENT ─── */
  .pro-hero-title,
  .hero-title { font-size: clamp(1.55rem, 6vw, 2rem) !important; line-height: 1.2 !important; }
  .pro-hero-subtitle,
  .hero-subtitle { font-size: 0.92rem !important; line-height: 1.6 !important; }

  /* hero search bar */
  .pro-search { padding: 5px 5px 5px 14px !important; }
  .pro-search .btn-accent { padding: 10px 18px !important; font-size: 0.82rem !important; }

  /* hero stat cards — horizontal scroll */
  .pro-hero-stats-row {
    display: flex; overflow-x: auto; gap: 10px;
    flex-wrap: nowrap; padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pro-hero-stats-row::-webkit-scrollbar { display: none; }
  .pro-hero-stat-card { min-width: 130px; flex-shrink: 0; padding: 10px 14px !important; }

  /* ─── SECTION HEADINGS ─── */
  .pro-section-title,
  .section-title { font-size: 1.45rem !important; }
  .pro-section-subtitle,
  .section-subtitle { font-size: 0.9rem !important; }

  /* ─── CATEGORY CHIPS (index) ─── */
  .pro-categories-scroll {
    display: flex; overflow-x: auto; gap: 12px;
    flex-wrap: nowrap; padding-bottom: 8px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pro-categories-scroll::-webkit-scrollbar { display: none; }
  .pro-category-chip { min-width: 120px; flex-shrink: 0; }

  /* ─── SERVICE CARDS ─── */
  .pro-service-card { padding: 18px !important; border-radius: 16px !important; }
  .pro-price-tag { font-size: 1.2rem !important; }

  /* ─── STYLED SUBSERVICE ROW (index) ─── */
  .styled-subservice-row .subservice-title-col {
    width: 100% !important; min-width: unset !important;
    max-width: 100% !important;
  }
  .styled-subservice-table { display: block !important; overflow-x: auto; }

  /* ─── SERVICES DETAIL PAGE ─── */
  .detail-card { padding: 22px 18px !important; border-radius: 16px !important; }
  .detail-hero-title { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
  /* sidebar goes below content on mobile */
  .detail-sidebar-col {
    order: -1 !important;
  }
  .detail-sidebar-sticky { position: static !important; top: auto !important; }
  /* service description tables */
  .service-description { overflow-x: auto; }
  .service-description table { min-width: 420px; }

  /* ─── ABOUT PAGE ─── */
  .about-counter-val { font-size: 2rem !important; }
  .about-team-img { height: 200px !important; }
  .timeline-item { padding-left: 40px !important; }

  /* ─── CONTACT PAGE ─── */
  .contact-hero { padding: 65px 0 45px !important; }
  .map-container iframe { height: 260px !important; }
  .contact-card { padding: 14px !important; }

  /* ─── BLOG PAGES ─── */
  .blog-card-img { height: 180px !important; }
  .blog-detail-content { font-size: 0.95rem !important; line-height: 1.75 !important; }
  .reading-progress { display: none !important; } /* hide on mobile */

  /* ─── GALLERY ─── */
  .gallery-filter-wrap {
    display: flex; overflow-x: auto; gap: 8px;
    flex-wrap: nowrap; padding-bottom: 8px;
    scrollbar-width: none;
  }
  .gallery-filter-wrap::-webkit-scrollbar { display: none; }
  .gallery-filter-btn { flex-shrink: 0; white-space: nowrap; }
  .gallery-item { border-radius: 12px !important; }

  /* ─── CAREERS / WHY JOIN ─── */
  .careers-subnav {
    flex-wrap: wrap; justify-content: center;
    gap: 6px; border-radius: 16px;
  }
  .careers-subnav-link { padding: 6px 14px; font-size: 0.8rem; }
  .culture-card { padding: 22px 18px !important; }
  .wj-feature-img { height: 240px !important; }
  .value-row { flex-direction: column; gap: 6px; }
  .value-num { width: auto; text-align: left; font-size: 2rem; }
  .wj-stat-item { border-right: none; border-bottom: 1px solid var(--border2); padding: 14px 0; }
  .wj-stat-num { font-size: 1.6rem; }

  /* ─── CURRENT OPENINGS ─── */
  .job-card { padding: 20px 16px !important; }
  .job-card .badge { font-size: 0.7rem !important; }

  /* ─── APPLY NOW ─── */
  .apply-form-card { padding: 22px 16px !important; border-radius: 16px !important; }

  /* ─── REFER & PARTNER ─── */
  .refer-hero,
  .partner-hero { padding: 65px 0 45px !important; }

  /* ─── COMPLIANCE DETAIL ─── */
  .compliance-sidebar { display: none; }
  .compliance-main { width: 100% !important; }

  /* ─── USER DASHBOARD ─── */
  .col-lg-10.py-4.px-4,
  .dashboard-main { padding: 14px !important; }
  .stat-widget { padding: 14px !important; }
  .stat-widget .fw-800.fs-3 { font-size: 1.5rem !important; }
  .stat-widget .icon { width: 40px; height: 40px; font-size: 1rem !important; }

  /* ─── TABLES (all) ─── */
  .table-responsive,
  .table-custom { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-custom th, .table-custom td { white-space: nowrap; font-size: 0.82rem; padding: 10px 10px !important; }

  /* ─── AUTH PAGES ─── */
  .auth-card { margin: 12px !important; padding: 24px 18px !important; border-radius: 18px !important; }

  /* ─── BUTTONS ─── */
  .btn-submit-pro { padding: 12px 20px !important; font-size: 0.88rem !important; }
  .btn-solid-wj, .btn-outline-wj { padding: 10px 22px !important; font-size: 0.86rem !important; }

  /* ─── FOOTER ─── */
  .premium-footer .row > div { margin-bottom: 28px; }
  .footer-brand-title { font-size: 1.2rem !important; }

  /* ─── UTILITY ─── */
  .d-flex.gap-5 { gap: 1.5rem !important; }
  .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
  .mb-5 { margin-bottom: 1.5rem !important; }

  /* Float side buttons — right side vertical on mobile */
  .float-buttons {
    top: auto !important;
    right: 10px !important;
    transform: none !important;
    bottom: 80px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .float-btn { width: 46px !important; height: 46px !important; }
  .float-btn:hover { transform: none !important; width: 46px !important; }
}

/* ── 480px and below ── */
@media (max-width: 480px) {
  /* ─── HERO ─── */
  .pro-hero,
  .wj-hero,
  .about-hero,
  .contact-hero,
  .detail-hero { padding: 56px 0 36px !important; }

  /* ─── TYPOGRAPHY ─── */
  .pro-hero-title,
  .hero-title { font-size: 1.45rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }

  /* ─── GRID: force single column ─── */
  .col-sm-6, .col-sm-4 { flex: 0 0 100% !important; max-width: 100% !important; }

  /* exception: stat widgets 2-col */
  .stats-2col .col-sm-4 { flex: 0 0 50% !important; max-width: 50% !important; }

  /* ─── CONTACT ─── */
  .contact-card { flex-direction: column; align-items: flex-start !important; }

  /* ─── AUTH ─── */
  .auth-card { margin: 6px !important; padding: 20px 14px !important; }

  /* ─── CARDS ─── */
  .culture-card,
  .perk-item,
  .job-card { padding: 16px 14px !important; }

  /* ─── SECTION PADDING ─── */
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  /* ─── TABLE font ─── */
  table { font-size: 0.78rem; }

  /* ─── Dashboard stats ─── */
  .wj-stat-num { font-size: 1.4rem; }
  .about-counter-val { font-size: 1.7rem !important; }

  /* ─── Compliance subnav ─── */
  .careers-subnav-link { padding: 5px 10px; font-size: 0.76rem; }
}

/* ─── LANDSCAPE MOBILE (short height) ─── */
@media (max-height: 500px) and (max-width: 900px) {
  .pro-hero, .wj-hero, .about-hero,
  .contact-hero, .detail-hero { padding: 40px 0 30px !important; }
  .mob-bottom-nav { height: 52px; }
  body { padding-bottom: 56px; }
}