/* ============================================
   KEYHUB PRO — Mobile UI Fixes
   Only affects screens ≤1024px
   ============================================ */

/* Mobile menu hidden by default on all screens */
#mobile-menu {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(4,13,24,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 24px 20px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  z-index: 999;
  display: none;
}
#mobile-menu.open {
  transform: translateX(0) !important;
}

/* --- NAVBAR MOBILE --- */
@media (max-width:1024px) {
  #navbar {
    padding: 0 16px !important;
    height: 64px !important;
    justify-content: space-between !important;
  }
  .nav-brand {
    gap: 10px !important;
  }
  .nav-brand img {
    height: 36px !important;
  }
  .nav-name-main {
    font-size: 0.85rem !important;
  }
  .nav-name-sub {
    font-size: 0.55rem !important;
  }
  .nav-center {
    display: none !important;
  }
  .nav-actions {
    display: none !important;
  }
  /* Hamburger — far right corner */
  .nav-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    background: none !important;
    border: none !important;
    padding: 10px !important;
    cursor: pointer;
    z-index: 1002;
    position: relative;
    margin-left: auto;
  }
  .nav-toggle span {
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
  }
  /* Hamburger X animation */
  .nav-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Mobile menu */
  #mobile-menu {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(4,13,24,0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 24px 20px !important;
    overflow-y: auto !important;
    transform: translateX(100%) !important;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1) !important;
    z-index: 999 !important;
    display: block !important;
  }
  #mobile-menu.open {
    transform: translateX(0) !important;
  }
  #mobile-menu a {
    display: block !important;
    padding: 14px 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    text-decoration: none !important;
  }
  #mobile-menu a:last-child {
    border-bottom: none !important;
  }
  #mobile-menu a:hover,
  #mobile-menu a:active {
    color: #c9a227 !important;
  }
  #mobile-menu .mobile-quote {
    margin-top: 20px !important;
    display: block !important;
    text-align: center !important;
    padding: 14px 24px !important;
    background: linear-gradient(135deg,#9a7a1b,#c9a227) !important;
    color: #040d18 !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    border-bottom: none !important;
  }
}

/* --- HERO MOBILE --- */
@media (max-width:768px) {
  .hero {
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  .hero-content {
    padding: 100px 20px 60px !important;
  }
  .hero-title {
    font-size: 2.2rem !important;
    line-height: 1.12 !important;
  }
  .hero-sub {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    margin-bottom: 28px !important;
  }
  .hero-cta {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 40px !important;
  }
  .hero-cta .btn-primary,
  .hero-cta .btn-secondary {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 24px !important;
  }
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  .hero-stat .num {
    font-size: 1.8rem !important;
  }
  .hero-stat .label {
    font-size: 0.68rem !important;
  }
  .hero-scroll {
    display: none !important;
  }
  .hero-eyebrow {
    font-size: 0.6rem !important;
    padding: 5px 12px !important;
  }
  /* 3D canvas subtle on mobile */
  #hero-3d-canvas {
    opacity: 0.4 !important;
  }
}

/* Very small phones */
@media (max-width:400px) {
  .hero-title {
    font-size: 1.9rem !important;
  }
  .hero-content {
    padding: 90px 16px 40px !important;
  }
  .hero-sub {
    font-size: 0.88rem !important;
  }
  .hero-stat .num {
    font-size: 1.5rem !important;
  }
}

/* --- PAGE HERO MOBILE --- */
@media (max-width:768px) {
  .page-hero {
    padding: 110px 0 50px !important;
  }
  .page-title {
    font-size: 1.8rem !important;
  }
  .page-subtitle {
    font-size: 0.92rem !important;
  }
}

/* --- SECTIONS MOBILE --- */
@media (max-width:768px) {
  section {
    padding: 60px 0 !important;
  }
  .container {
    padding: 0 16px !important;
  }
  .section-title {
    font-size: 1.6rem !important;
  }
  .section-desc {
    font-size: 0.92rem !important;
  }
}

/* --- PRODUCT CARDS MOBILE --- */
@media (max-width:768px) {
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .product-card {
    padding: 20px !important;
  }
  .product-tabs {
    top: 64px !important;
  }
  .product-tabs-inner {
    padding: 0 12px !important;
  }
  .tab-btn {
    padding: 14px 16px !important;
    font-size: 0.7rem !important;
  }
}

/* --- BRAND CARDS MOBILE --- */
@media (max-width:768px) {
  .brands-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- SERVICE CARDS MOBILE --- */
@media (max-width:768px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .service-card {
    padding: 28px 20px !important;
  }
}

/* --- ABOUT LAYOUT MOBILE --- */
@media (max-width:768px) {
  .about-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .about-highlights {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .mv-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .values-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

/* --- TEAM GRID MOBILE --- */
@media (max-width:768px) {
  .team-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .team-info {
    padding: 16px 12px !important;
  }
  .team-name {
    font-size: 0.88rem !important;
  }
  .team-role {
    font-size: 0.68rem !important;
  }
  .team-desc {
    font-size: 0.72rem !important;
    display: none !important;
  }
}

/* --- PROJECTS GRID MOBILE --- */
@media (max-width:768px) {
  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* --- QUOTE/CONTACT LAYOUT MOBILE --- */
@media (max-width:768px) {
  .quote-layout,
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .quote-form-wrap {
    padding: 28px 20px !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }
}

/* --- QUOTE MODAL MOBILE --- */
@media (max-width:768px) {
  .quote-modal-inner {
    padding: 32px 20px !important;
    width: 96% !important;
    max-height: 92vh !important;
  }
  .modal-title {
    font-size: 1.3rem !important;
  }
}

/* --- PRICING TABLE MOBILE --- */
@media (max-width:768px) {
  .pricing-tiers {
    overflow-x: auto !important;
  }
  .pricing-tier-row {
    grid-template-columns: 1.5fr 1fr 1fr !important;
    min-width: 500px !important;
  }
  .pricing-tier-cell {
    padding: 12px 10px !important;
    font-size: 0.72rem !important;
  }
}

/* --- FOOTER MOBILE — CLEAN & COMPACT --- */
@media (max-width:768px) {
  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 16px 12px !important;
  }
  .footer-brand-col {
    grid-column: 1 / -1 !important;
  }
  /* Hide logo image */
  .footer-brand-col .footer-logo-wrap img {
    display: none !important;
  }
  .footer-brand-col .footer-logo-wrap {
    margin-bottom: 6px !important;
  }
  .footer-brand-name {
    font-size: 0.9rem !important;
  }
  .footer-tagline {
    display: none !important;
  }
  .footer-cert {
    display: none !important;
  }
  .footer-social {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
  /* Hide ALL footer-col on mobile */
  .footer-col {
    display: none !important;
  }
  /* Bottom bar compact */
  .footer-bottom {
    padding: 12px 16px !important;
    flex-direction: column !important;
    gap: 5px !important;
    text-align: center !important;
  }
  .footer-copy {
    font-size: 0.65rem !important;
  }
  .footer-legal a {
    font-size: 0.65rem !important;
  }
}

/* Small mobile - same footer rules already handled above */
@media (max-width:480px) {
  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 16px 12px !important;
  }
  .footer-brand-col {
    grid-column: 1 / -1 !important;
  }
}

/* --- BRAND TICKER MOBILE --- */
@media (max-width:768px) {
  .brand-ticker {
    padding: 10px 0 !important;
  }
  .ticker-item {
    font-size: 0.65rem !important;
    gap: 8px !important;
  }
  .ticker-track {
    gap: 40px !important;
  }
}

/* --- WHATSAPP BUTTON MOBILE --- */
@media (max-width:768px) {
  #whatsapp-btn {
    width: 50px !important;
    height: 50px !important;
    bottom: 20px !important;
    right: 20px !important;
  }
  #whatsapp-btn svg {
    width: 26px !important;
    height: 26px !important;
  }
  .wa-tooltip {
    display: none !important;
  }
}

/* --- GENERAL MOBILE OVERFLOW FIX --- */
@media (max-width:768px) {
  html, body {
    overflow-x: hidden !important;
  }
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Fix any wide grids */
  [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- HOME SERVICES SECTION (photo cards) MOBILE --- */
@media (max-width:768px) {
  .services-grid img {
    height: 140px !important;
  }
}

/* --- PRODUCT PAGE HERO MOBILE --- */
@media (max-width:768px) {
  .product-page-hero {
    min-height: 40vh !important;
    padding-bottom: 40px !important;
  }
}

/* --- INLINE GRID FIXES for 2-column layouts --- */
@media (max-width:768px) {
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Fix inline 4-column stat grids */
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  /* Counter stats grid */
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  /* Fix wide min content */
  [style*="min-width:500"] {
    min-width: unset !important;
  }
  /* About page Why Choose Us inline grid */
  [style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
  /* Contact detail cards */
  .contact-card {
    padding: 16px !important;
  }
  .contact-card-icon {
    width: 40px !important;
    height: 40px !important;
  }
}

/* --- VIEWPORT META safety --- */
@media (max-width:768px) {
  * {
    max-width: 100vw;
  }
  .container, .footer-main, .footer-bottom {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}