/* --------------------------------------------------------------------------
   Poprawki mobilne do statycznych stron (home.html / home-pl.html).
   Trzymane w osobnym pliku, żeby ponowny eksport /lovable/styles.css
   ich nie nadpisał. Ładowane PO styles.css.
   -------------------------------------------------------------------------- */

/* Sekcja "The story" / faza "Scattered" ("Rozproszone").
   Kafelki są tam pozycjonowane absolutnie w procentach (left:6%…84%) i mają
   whitespace:nowrap, więc na wąskim ekranie wychodziły poza kadr i były ucinane
   przez overflow:hidden. Na małych ekranach układamy je w zwykły strumień
   z zawijaniem — wszystkie widoczne w całości, bez animacji unoszenia. */
@media (max-width: 900px) {
  .story-phase-1 > .relative {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    height: auto !important;
  }

  .story-phase-1 > .relative > div {
    position: static !important;
    inset: auto !important;
    animation: none !important;
    white-space: normal !important;
    max-width: 100%;
  }
}

/* Zabezpieczenie: na wąskich ekranach strona nie ma prawa przewijać się w bok.
   To siatka bezpieczeństwa, a nie naprawa konkretnego elementu — jeśli coś
   jeszcze wystaje poza kadr, zostanie przycięte zamiast rozjechać layout. */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Makiety aplikacji (.ls-app) mają sztywne min-width 900px/720px i domyślnie
   przewijają się w bok. Skalę dopasowuje /lovable/mobile-fit.js — tutaj tylko
   chowamy pasek przewijania, gdy skalowanie zostało zastosowane. */
.ls-app > .overflow-x-auto[data-ls-fitted] {
  overflow-x: hidden;
}