/* =========================
   GLOBAL MOBILE OVERRIDES
   ========================= */

:root {
  --space-xs: clamp(8px, 3vw, 16px);
  --space-sm: clamp(16px, 4vw, 28px);
  --space-md: clamp(24px, 6vw, 48px);
  --space-lg: clamp(32px, 8vw, 72px);
}

@media (max-width: 768px) {

  /* 🔹 Kill excessive vertical spacing everywhere */
  section,
  .home-section,
  .power-section,
  .our-craft-section,
  .section-three,
  .center-image-section {
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-md) !important;
  }

  /* 🔹 Shrink big padded boxes */
  .hero-box,
  .craft-text-box,
  .blue-box-right,
  .ph-card {
    padding: var(--space-sm) !important;
    border-radius: 20px;
  }

  /* 🔹 Stack layouts automatically */
  .craft-row,
  .section-three-row,
  .environment-row,
  .section-8-inner {
    flex-direction: column !important;
    gap: var(--space-sm) !important;
  }

  /* 🔹 Make images behave */
  img {
    max-width: 100%;
    height: auto;
  }

  /* 🔹 Fix navbar crowding */
  .nav-container {
    padding: 0 16px !important;
    margin-right: 0 !important;
  }

  /* 🔹 Reduce huge typography */
  h1 { font-size: clamp(28px, 7vw, 36px); }
  h2 { font-size: clamp(22px, 6vw, 30px); }
  h3 { font-size: clamp(18px, 5vw, 24px); }

}

/* =========================
   MOBILE FIX PACK (REAL ONE)
   ========================= */

@media (max-width: 768px) {

  /* Stop horizontal cut-off */
  html, body {
    overflow-x: hidden !important;
  }

  /* Kill the desktop “negative margin” hacks on mobile */
  #logo-img { 
    margin-left: 0 !important; 
    width: 140px !important;
    height: auto !important;
  }

  .nav-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
  }

  /* If your navbar is fixed, reduce its height for mobile */
  :root { --nav-h: 72px; }
  body { padding-top: var(--nav-h) !important; }

  /* Hide desktop nav pills (Home/About/Products/Contact) on mobile */
  #nav-box,
  .nav-box {
    display: none !important;
  }

  /* Keep language + hamburger visible and aligned */
  .lang-switcher {
    margin-right: 0 !important;
    transform: none !important;
  }

  .menu-wrapper {
    display: inline-block !important;
    margin-left: 8px !important;
  }

  /* Make the drawer full-width on phone */
  .drawer {
    width: 85% !important;
    right: -85% !important;
  }

  /* Global section padding cleanup */
  section,
  .home-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Images that are full-screen sections: force them to fit */
  .home-image,
  .section-3-bg,
  .section-4-img,
  .section-5-img,
  .section-7-img,
  .section-9-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important; /* prevents cropping */
  }

  /* If any section uses 100vw and causes sideways scroll, clamp it */
  img {
    max-width: 100% !important;
  }
}