/* JK-BUILD: 3.4 */
/* ==========================================================================
   JK Premium Car Care — Responsive rules (loaded after style.css)
   ========================================================================== */

@media (min-width: 1400px) {
  .container { max-width: 1280px; }
}

/* ---- Small desktops / large laptops (13"-14" screens) ----
   Below 1200px the six nav items, the logo lockup and the action cluster no
   longer fit side by side, so the menu moves into the slide-out panel. */
@media (max-width: 1199.98px) {
  .main-nav-desktop { display: none !important; }
  .navbar-toggler-custom { display: flex !important; }
}

/* ---- Tablet ---- */
@media (max-width: 991.98px) {
  :root { --section-pad: 4.2rem; }
  .header-actions .lang-switch-desktop { display: none; }
  .hero { min-height: 80vh; padding: 6rem 0 4rem; }
  .hero-msg h1 { max-width: 100%; }
  .footer-map { height: 250px; }
  .process-line { display: none; }
  .badge-strip { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
  :root { --section-pad: 3.4rem; --radius-lg: 8px; }
  body { font-size: 1rem; padding-bottom: 78px; }
  .hero { min-height: 88vh; padding: 5rem 0 3.5rem; text-align: left; }
  [dir="rtl"] .hero { text-align: right; }
  .hero-media::after {
    background: linear-gradient(180deg, rgba(5,5,6,0.72) 0%, rgba(5,5,6,0.86) 45%, rgba(5,5,6,0.96) 100%);
  }
  .hero-msg .hero-desc { font-size: 1rem; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-trust { gap: 0.75rem 1.4rem; }
  .hero-trust-item { font-size: 0.78rem; }
  .hero-scroll-cue { display: none; }
  .hero-dots { display: none; }   /* slider indicator is desktop-only */

  /* Featured services: three cards is enough on a phone — the rest are one
     tap away behind the button underneath. */
  .featured-grid > div:nth-child(n+4) { display: none; }
  .btn-view-all { width: 100%; }

  /* Footer: two columns instead of one very long single column */
  .site-footer .row > [class*="col-"] { width: 50%; flex: 0 0 50%; max-width: 50%; }
  .site-footer .row > [class*="col-"]:first-child { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .site-footer .footer-links a, .site-footer .footer-contact { font-size: 0.86rem; }
  .site-footer h5 { font-size: 0.72rem; }

  .page-header { padding: 6.5rem 0 3rem; }
  .card-lux { padding: 1.7rem 1.4rem; }
  .package-card { padding: 1.9rem 1.5rem; }
  .package-actions { grid-template-columns: 1fr; }
  .form-lux { padding: 1.5rem; }
  .cta-band { text-align: center; }
  .cta-band .btn { width: 100%; margin-bottom: 0.6rem; }
  .trust-item { padding: 1.1rem 0.3rem; gap: 0.7rem; }
  .trust-item .icon-inline { width: 2.1rem; height: 2.1rem; }
  .trust-item span { font-size: 0.72rem; }
  .stat-number { font-size: 2rem; }
  .brand-logo .brand-mark { height: 44px; }
  .brand-logo .brand-word .w1 { font-size: 0.98rem; }
  .brand-logo .brand-word .w2 { font-size: 0.86rem; letter-spacing: 0.12em; }
  .mobile-sticky-bar { display: flex; }
  .floating-actions { bottom: 5.8rem; }
  .lightbox-nav { width: 44px; height: 44px; }
  .lightbox-nav.prev { left: 0.5rem; }
  .lightbox-nav.next { right: 0.5rem; }
  .contact-map-card iframe { min-height: 240px; }
}

/* ---- Small mobile ---- */
@media (max-width: 420px) {
  .brand-logo .brand-word { display: none; }
  .brand-logo .brand-mark { height: 42px; }
  .hero-badge { font-size: 0.64rem; letter-spacing: 0.16em; }
  .package-badge { font-size: 0.62rem; }
  .badge-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Never allow sideways scroll */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

@media (max-width: 767.98px) {
  a, button, .btn, .nav-link, .header-icon-btn { min-height: 44px; }
}