/* ============================================================
 * mobile-fix.css
 * Fix pentru problema "pot sa fac zoom out si swipe stanga-dreapta"
 * pe mobile (boostedmode.com).
 *
 * Cauze:
 *   1. SVG cu min-w-[820px] (diagrama flow) - forțează lățimea la 820px+
 *   2. Glow orbs (fixed, ies din viewport)
 *   3. Lipsa overflow-x: hidden pe body ca safety net
 *
 * Se încarcă pe toate paginile, după page-glow.css.
 * ============================================================ */

/* ---- 1. Safety net: nu lasa niciodata body-ul sa fie mai lat
   decat viewport-ul. Asta opreste swipe-ul lateral si zoom out. */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

/* iOS Safari pinch-to-zoom: fortam body si html sa nu permita zoom-out
   pe continut mai lat decat viewport-ul. Cu position: relative pe body,
   iOS nu mai expandeaza viewport-ul cand face pinch-out agresiv. */
body {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}

/* ---- 2. SVG-uri cu min-w fixată: anulează pe mobile ---- */
@media (max-width: 768px) {
  /* Diagrama flow din hero si alte SVG-uri cu min-w hardcodat */
  svg.min-w-\[820px\],
  svg.min-w-\[700px\],
  svg.min-w-\[600px\],
  svg.min-w-\[500px\],
  svg.min-w-\[400px\],
  svg[style*="min-width"],
  svg[style*="minWidth"] {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100vw !important;
  }

  /* SVG-uri din wrapper-e custom (ex: .flow-svg-wrap pe LGM) */
  .flow-svg-wrap svg,
  .diagram-wrap svg,
  .chart-wrap svg {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Forțam toate SVG-urile sa se încadreze */
  svg {
    max-width: 100% !important;
  }
}

/* ---- 3. Glow orbs: ascunde pe mobile sau micșorează-le ---- */
@media (max-width: 768px) {
  .glow-orb {
    display: none !important;
  }
}

/* ---- 4. Elemente cu lățime fixă mare (tablele, diagrame) ---- */
@media (max-width: 768px) {
  /* Tabele de comparatie - scroll orizontal intern */
  table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  /* Containere cu overflow hidden parinte */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Orice element cu width hardcoded mai mare de 500px pe desktop */
  [style*="width: 600px"],
  [style*="width: 700px"],
  [style*="width: 800px"],
  [style*="width: 900px"],
  [style*="width:1000px"],
  [style*="width: 1100px"] {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Clase Tailwind cu min-w setate */
  .min-w-\[700px\],
  .min-w-\[820px\],
  .min-w-\[600px\],
  .min-w-\[500px\],
  .min-w-\[400px\],
  .min-w-\[300px\] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ---- 5. Header / nav prea lat pe mobile ---- */
@media (max-width: 768px) {
  header,
  nav {
    max-width: 100vw !important;
  }

  /* Ascunde elementele care nu incap pe un singur rand */
  .nav-desktop {
    display: none !important;
  }
}

/* ---- 6. Flex/Grid items: impiedica sa se extinda dincolo de parinte ----
   Bug clasic: un flex item cu continut lung (text, SVG) se extinde
   peste dimensiunea parintelui. Cu min-width: 0, item-ul se poate
   micsora si textul face wrap normal. */
@media (max-width: 768px) {
  .flex > *,
  [class*="flex-"] *,
  .grid > * {
    min-width: 0 !important;
  }

  /* Permite text lung sa faca wrap */
  p, h1, h2, h3, h4, h5, h6, span, div {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* ---- 7. Dezactivează zoom-out-ul agresiv pe iOS Safari ----
   Meta viewport-ul existent probabil are user-scalable=yes.
   Pastram asta pentru accesibilitate, dar overflow-x: hidden
   de mai sus opreste pinch-to-zoom-ul orizontal sa "vada"
   continutul ascuns. */

/* ---- 9. Force-flux headline pe mobil ----
   .asym-card h3 avea <br> hardcodate; acum HTML-ul e curat,
   fara <br>. Regula e pastrata ca safety net pt orice continut
   vechi ce ar putea fi adaugat ulterior. */
@media (max-width: 640px) {
  .asym-card h3 br {
    display: none !important;
  }
  .asym-card h3 {
    margin-bottom: 0.75rem !important;
  }
}

/* ---- 8. Hero lab badge — text mai mic pe mobile ----
   Badge "LABORATORUL DE OPERAȚIUNI ELITE active" din hero.
   Pe desktop ramane text-xs (12px), pe mobile scade la 10px (70% in 16-Iul). */
@media (max-width: 640px) {
  .hero-lab-badge {
    font-size: 7px !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
  }
}