/**
 * LogarGo landing — touch-first mobile layout.
 * Loaded alongside index.html (local file or hosted).
 * Targets real phones via coarse pointer + narrow width.
 */

@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .logargo-landing {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .logargo-landing section {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .logargo-landing [style*="max-width:1200px"],
  .logargo-landing [style*="max-width:760px"] {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .logargo-landing [style*="min-width:320px"],
  .logargo-landing [style*="min-width:160px"] {
    min-width: 0 !important;
  }

  .logargo-landing img,
  .logargo-landing svg {
    max-width: 100%;
    height: auto;
  }

  /* ── Nav ── */
  .logargo-landing nav > div {
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }

  .logargo-landing nav > div > div[style*="gap:28px"] {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    margin: 0 !important;
    gap: 10px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 14px !important;
    white-space: nowrap;
  }

  .logargo-landing nav > div > a[href="#join"] {
    order: 2;
    margin: 0 !important;
    margin-inline-start: auto !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
  }

  /* ── Hero ── */
  .lg-hero {
    overflow: hidden !important;
  }

  .lg-hero > div[style*="position:absolute"] {
    display: none !important;
  }

  .lg-hero > div[style*="padding:96px"] {
    flex-direction: column !important;
    padding: 36px 16px 44px !important;
    gap: 20px !important;
  }

  .lg-hero h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.1 !important;
  }

  .lg-hero p[style*="font-size:23px"] {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  .lg-hero > div[style*="padding:96px"] > div {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .lg-hero > div[style*="padding:96px"] > div:last-child {
    min-height: 200px !important;
  }

  .lg-hero div[style*="bottom:-26px"] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 12px auto 0 !important;
  }

  .lg-hero svg[style*="position:absolute"] {
    display: none !important;
  }

  .lg-hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .lg-hero-actions a {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 0 !important;
    justify-content: center !important;
    font-size: clamp(12px, 3.5vw, 15px) !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
  }

  /* ── Stats ── */
  .lg-stats > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
    padding: 20px 16px !important;
  }

  .lg-stats > div > div[style*="width:1px"] {
    display: none !important;
  }

  .lg-stats [data-reveal] {
    min-width: 0 !important;
  }

  /* ── Section headings ── */
  .logargo-landing h2[style*="font-size:46px"],
  .logargo-landing h2[style*="font-size:44px"],
  .logargo-landing h2[style*="font-size:56px"] {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    line-height: 1.15 !important;
  }

  #how { padding: 48px 16px 36px !important; }
  #features.lg-features { padding: 48px 16px !important; }
  #sides > div { padding: 48px 16px !important; }
  #pricing > div { padding: 48px 16px !important; }

  /* ── How / sides / pricing: single column ── */
  #how > div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #sides > div > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  #pricing > div > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Matching engine (הלב של המערכת) ── */
  .lg-matching {
    overflow: hidden !important;
  }

  .lg-matching > div[style*="position:absolute"],
  .lg-matching > svg {
    display: none !important;
  }

  .lg-matching > div[style*="max-width:1200px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 44px 16px !important;
    gap: 20px !important;
  }

  .lg-matching > div > [data-reveal] {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
  }

  .lg-matching p[style*="max-width:520px"] {
    max-width: 100% !important;
    font-size: 15px !important;
  }

  .lg-matching-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .lg-matching-grid > div {
    min-width: 0 !important;
    padding: 14px 10px !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  .lg-matching-grid [style*="font-size:20px"] {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .lg-matching-grid p {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin-top: 6px !important;
  }

  /* ── Features grid ── */
  .lg-features-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .lg-features-grid > div {
    min-width: 0 !important;
    padding: 16px 12px !important;
    box-sizing: border-box !important;
  }

  .lg-features-grid h3 {
    font-size: 15px !important;
  }

  .lg-features-grid p {
    font-size: 13px !important;
  }

  /* ── Join (הצטרפו עכשיו) ── */
  .lg-join {
    overflow: hidden !important;
  }

  .lg-join > div[style*="position:absolute"],
  .lg-join > svg {
    display: none !important;
  }

  .lg-join > div[style*="padding:90px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 44px 16px !important;
    gap: 20px !important;
  }

  .lg-join [data-reveal] {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .lg-join p[style*="font-size:21px"] {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  .lg-join div[style*="margin-top:30px"] {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .lg-join-panels {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    box-sizing: border-box !important;
  }

  .lg-join-panels > div {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px 14px !important;
    box-sizing: border-box !important;
  }

  .lg-join-panels [style*="font-size:22px"] {
    font-size: 17px !important;
  }

  .lg-store-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .lg-store-row a {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 4px) !important;
    justify-content: center !important;
    padding: 10px 6px !important;
    box-sizing: border-box !important;
  }

  .lg-store-row a [style*="font-size:16px"] {
    font-size: 12px !important;
  }

  /* ── Shipper / freighter cards ── */
  #shipper [style*="padding:36px 38px"],
  #freighter [style*="padding:36px 38px"] {
    padding: 24px 18px 24px 64px !important;
  }

  #shipper [style*="padding:32px 38px"],
  #freighter [style*="padding:32px 38px"] {
    padding: 20px 16px 24px !important;
  }

  #shipper img[style*="position:absolute"],
  #freighter img[style*="position:absolute"] {
    width: 42px !important;
    top: 14px !important;
    left: 14px !important;
  }

  #sides > div > div[style*="grid-template-columns:1fr 1fr"] > div {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* ── Footer ── */
  .logargo-landing footer > div {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 24px 16px !important;
    gap: 14px !important;
  }

  .logargo-landing footer > div > div[style*="gap:26px"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 14px !important;
  }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .lg-hero-actions a {
    flex: 1 1 100% !important;
  }

  .lg-store-row a {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .lg-matching-grid {
    gap: 8px !important;
  }

  .lg-matching-grid > div {
    padding: 12px 8px !important;
  }
}