/* ============================================================
   VibeForge Landing — MOBILE-ONLY overrides (≤820px)
   Wczytywane PO styles.css, więc wygrywa specyficznością/kolejnością.
   Desktop (≥821px) całkowicie nietknięty — wszystko w media query.
   Zakres ograniczony do .vibeforge-root (tylko landing).
   ============================================================ */

@media (max-width: 820px) {
  /* ---- Kontener: mniejsze marginesy boczne ---- */
  .vibeforge-root .container { padding: 0 20px !important; }

  /* ---- HEADER ---- */
  .vibeforge-root .hd { height: 64px !important; }
  .vibeforge-root .hd-inner { gap: 12px !important; grid-template-columns: auto 1fr auto !important; }
  .vibeforge-root .hd-nav { display: none !important; }
  .vibeforge-root .hd-brand { font-size: 13px !important; letter-spacing: 0.1em !important; }
  .vibeforge-root .hd-mark { width: 38px !important; height: 38px !important; }
  .vibeforge-root .hd-cta { display: flex !important; gap: 8px !important; }
  .vibeforge-root .hd-cta .btn { padding: 9px 12px !important; font-size: 12.5px !important; }
  /* Na telefonie zostaw oba: „Zaloguj się" (białe) obok „Dołącz" (limonka). Ukryj tylko ewentualny ghost. */
  .vibeforge-root .hd-cta .btn-ghost { display: none !important; }

  /* ---- HERO ---- */
  .vibeforge-root .hero { min-height: 0 !important; padding: 28px 0 44px !important; }
  .vibeforge-root .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .vibeforge-root .hero h1 { font-size: clamp(30px, 8.5vw, 40px) !important; margin-bottom: 18px !important; }
  .vibeforge-root .hero-desc { font-size: 16px !important; margin-bottom: 26px !important; }
  .vibeforge-root .hero-eyebrow { margin-bottom: 20px !important; }
  .vibeforge-root .hero-cta { flex-direction: column !important; align-items: stretch !important; }
  .vibeforge-root .hero-cta .btn { justify-content: center !important; width: 100% !important; }
  .vibeforge-root .hero-trust { flex-wrap: wrap !important; gap: 10px 16px !important; }

  /* Hero mockup: to skomplikowana, absolutnie pozycjonowana mapa —
     na telefonie się rozjeżdża, więc ją ukrywamy (czysto dekoracyjna, aria-hidden). */
  .vibeforge-root .hero-mockup { display: none !important; }

  /* ============================================================
     GENERYCZNE ZABEZPIECZENIA UKŁADU
     Wymuszają czytelny, jednokolumnowy układ w typowych sekcjach.
     ============================================================ */

  /* Każdy wielokolumnowy grid → jedna kolumna (poza .eco-grid = slajder) */
  .vibeforge-root [class*="-grid"]:not(.eco-grid) { grid-template-columns: 1fr !important; }

  /* Sekcje z układem 2-kolumnowym (tekst + wizual) → stack */
  .vibeforge-root .news-grid,
  .vibeforge-root .why-grid,
  .vibeforge-root .results-grid,
  .vibeforge-root .platform-grid,
  .vibeforge-root .pricing-grid,
  .vibeforge-root .price-grid,
  .vibeforge-root .footer-grid,
  .vibeforge-root .ft-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Poziome „tory" / karuzele z przewijaniem → naturalne zawijanie zamiast overflow.
     WYJĄTEK: .metrics-track i .tools-track — obsługiwane osobno jako slajdery (patrz niżej). */
  .vibeforge-root [class*="-track"]:not(.metrics-track):not(.tools-track),
  .vibeforge-root [class*="-rail"],
  .vibeforge-root [class*="-scroller"] {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    width: auto !important;
    overflow: visible !important;
  }
  /* Karty w torach: nie wymuszaj stałej szerokości */
  .vibeforge-root [class*="-track"]:not(.metrics-track):not(.tools-track) > *,
  .vibeforge-root [class*="-rail"] > * {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }

  /* Elementy pozycjonowane na sztywno w pikselach, które wychodzą poza ekran */
  .vibeforge-root [style*="width: 540px"],
  .vibeforge-root [style*="width:540px"] { width: 100% !important; }

  /* Nagłówki sekcji — clamp, by nie przelewały się poza ekran */
  .vibeforge-root h2 { font-size: clamp(26px, 6.5vw, 36px) !important; line-height: 1.15 !important; }
  .vibeforge-root h3 { font-size: clamp(19px, 5vw, 24px) !important; }

  /* Duże paddingi sekcji → mniejsze na telefonie */
  .vibeforge-root section { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Karty / bloki — nie pozwól im wyjść poza kontener */
  .vibeforge-root .container * { max-width: 100%; }

  /* ============================================================
     SEKCJA WYNIKÓW (.metrics) — SLAJDER NA TELEFONIE
     Zamiast poziomego toru (który blokował scroll strony), robimy
     przewijalny palcem slajder: jedna karta = jeden ekran, ze snapem.
     Sterowanie (strzałki, kropki, auto-timer) dokłada metrics-mobile.js.
     ============================================================ */
  .vibeforge-root .metrics-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 14px !important;
    padding-bottom: 4px !important;
    /* pozwól scrollować palcem w poziomie, a stronę w pionie */
    touch-action: pan-x pan-y !important;
  }
  .vibeforge-root .metrics-track::-webkit-scrollbar { display: none !important; }
  .vibeforge-root .metrics-track > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }
  /* Wyłącz poziomy scroll-linked ruch całej sekcji na mobile */
  .vibeforge-root .metrics { overflow: hidden !important; }

  /* ============================================================
     EKOSYSTEM (.eco-grid) i NARZĘDZIA (.tools-track) — SLAJDER
     Ten sam mechanizm co .metrics-track: poziomy snap, jedna karta
     na ekran, sterowanie dokłada metrics-mobile.js.
     ============================================================ */
  .vibeforge-root .eco-grid,
  .vibeforge-root .tools-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 14px !important;
    padding-bottom: 4px !important;
    touch-action: pan-x pan-y !important;
  }
  .vibeforge-root .eco-grid::-webkit-scrollbar,
  .vibeforge-root .tools-track::-webkit-scrollbar { display: none !important; }
  .vibeforge-root .eco-grid > *,
  .vibeforge-root .tools-track > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }
  /* Wyłącz poziomy scroll-linked ruch tych sekcji na mobile */
  .vibeforge-root .tools-track-viewport { overflow: hidden !important; }

  /* Pasek sterowania slajderem (wstrzykiwany przez JS) */
  .vibeforge-root .m-slider-controls {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
  }
  .vibeforge-root .m-slider-arrow {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--card-dark, #202020);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    flex-shrink: 0;
    transition: background .2s ease, border-color .2s ease, opacity .2s ease;
  }
  .vibeforge-root .m-slider-arrow:active { background: rgba(255,255,255,0.08); }
  .vibeforge-root .m-slider-arrow svg { width: 18px; height: 18px; }
  .vibeforge-root .m-slider-dots { display: flex; align-items: center; gap: 8px; }
  .vibeforge-root .m-slider-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.22);
    border: none; padding: 0;
    transition: background .2s ease, width .2s ease;
  }
  .vibeforge-root .m-slider-dot.active {
    background: var(--lime, #C8FF2E);
    width: 22px; border-radius: 4px;
  }

  /* ---- CENNIK ---- */
  .vibeforge-root .price-card,
  .vibeforge-root .pricing-card { width: 100% !important; }
  /* Wyróżniona karta nie powinna być skalowana na mobile (transform: scale) */
  .vibeforge-root .price-card-featured,
  .vibeforge-root .pricing-card-featured { transform: none !important; }

  /* ---- STOPKA ---- */
  .vibeforge-root .ft-cols,
  .vibeforge-root .footer-cols { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .vibeforge-root .ft-bottom,
  .vibeforge-root .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; align-items: center !important; }
}

/* Bardzo wąskie ekrany (≤480px) — dodatkowe drobne korekty */
@media (max-width: 480px) {
  .vibeforge-root .container { padding: 0 16px !important; }
  .vibeforge-root .ft-cols,
  .vibeforge-root .footer-cols { grid-template-columns: 1fr !important; }
}