/* ============================================================
   kumamTO-fixes.css — poprawki CLS
   Podłącz PO kumamTOstyles.min.css, żeby reguły miały pierwszeństwo.

   ------------------------------------------------------------
   PLIK KOMPLETNY — nie ma nic do uzupełnienia.

   Wszystkie proporcje odczytane z plików źródłowych:
     #zbiorowa-container   16 / 9    (LP_loop_v05.json, 1920x1080)
     #octopus-container     1 / 1    (1080x1080)
     #levelUp-container     1 / 1    (1080x1080)
     telefon1, telefon2    11 / 20   (550x1000)
     kurs1, kurs2, kurs3   11 / 20   (550x1000 i 245x445)
   ------------------------------------------------------------
   ============================================================ */

/* ---------- 1. Kontenery animacji Lottie ----------
   Najważniejsza poprawka w całym pliku.

   To puste divy. Lottie pobiera JSON przez sieć i dopiero potem wstrzykuje
   do nich grafikę. Do tego momentu mają wysokość 0, więc cała treść pod nimi
   siedzi wyżej niż docelowo — a gdy animacja się wczyta, wszystko zjeżdża
   w dół. W przypadku #zbiorowa-container dzieje się to w pierwszym widoku,
   tuż obok H1 i przycisku CTA, czyli w miejscu, gdzie CLS boli najbardziej.

   WAŻNE: podstaw prawdziwe proporcje. Otwórz każdy plik JSON w edytorze,
   na samym początku znajdziesz pola "w" i "h" — to szerokość i wysokość
   kompozycji. aspect-ratio wpisz jako w / h.
   Nazwy plików sugerują kwadrat dla dwóch z nich, ale sprawdź. */

#zbiorowa-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* LP_loop_v05.json: 1920 x 1080 */
  display: block;
}

#octopus-container,
#levelUp-container {
  width: 100%;
  aspect-ratio: 1 / 1; /* oba JSON-y: 1080 x 1080 */
  display: block;
}

/* Lottie z rendererem "svg" wstawia <svg> — niech wypełni kontener */
#zbiorowa-container svg,
#octopus-container svg,
#levelUp-container svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- 2. Karuzele — GOTOWE, nic nie uzupełniasz ----------
   Zanim Swiper się zainicjalizuje, slajdy renderują się jeden pod drugim
   na pełną szerokość. Po inicjalizacji ustawiają się obok siebie i wysokość
   sekcji gwałtownie spada.

   Rozwiązanie nie wymaga żadnych zmierzonych wartości: przed inicjalizacją
   ustawiamy wrapper jako flex z ukrytym nadmiarem, więc jego wysokość jest
   równa wysokości najwyższego slajdu — czyli dokładnie tyle, ile zajmie
   po inicjalizacji. Swiper po starcie dodaje klasę .swiper-initialized
   i reguła sama się wyłącza. */

.swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  overflow: hidden;
}
.swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 100%;
}
.swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  overflow: hidden;
}
.swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 100%;
}

/* ---------- 3. Obrazki bez wymiarów ----------
   W index.html jest 51 tagów <img> i żaden nie ma atrybutów width/height.
   Docelowo dopisz je w HTML (instrukcja jak zdobyć wymiary w INSTRUKCJA.md).
   Poniżej awaryjna siatka bezpieczeństwa dla największych obrazków,
   czyli tych, które przesuwają najwięcej treści. */

/* Wszystkie pięć makiet aplikacji ma ten sam format 550 x 1000 px */
.img_container img[src$="telefon1.png"],
.img_container img[src$="telefon2.png"],
.kursy_image img {
  aspect-ratio: 11 / 20;
  height: auto;
}

/* Ikony etapów i awatary opinii — małe, ale jest ich sporo */
.etap_ic img,
.opinie_container img[src*="opinia_ico"] {
  aspect-ratio: 1 / 1;
  height: auto;
}

/* ---------- 4. Ogólna zasada dla SVG dekoracyjnych ----------
   Elementy bg_el_* i bg_txt_* są pozycjonowane absolutnie i nie powinny
   wpływać na układ. Upewniamy się, że tak jest, i wyłączamy je z interakcji. */

.bg_anim_img {
  pointer-events: none;
}

.bg_anim_img img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- 5. Uszanowanie prefers-reduced-motion ----------
   Strona ma sporo animacji wjazdu, autoplay w dwóch karuzelach i trzy
   zapętlone Lottie. Dla osób z włączoną redukcją ruchu w systemie
   (a to także wiele osób z zaburzeniami przetwarzania sensorycznego,
   czyli realna część uczniów) wyłączamy je. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .zero_opacity {
    opacity: 1 !important;
  }
}

/* ---------- 6. Widoczny focus klawiaturowy ----------
   Reset CSS zeruje style, a nigdzie nie ma reguły :focus-visible.
   Bez tego nie da się nawigować stroną z klawiatury. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
.cta_btn:focus-visible,
.plany_btn:focus-visible {
  outline: 3px solid #ff5f00;
  outline-offset: 3px;
  border-radius: 4px;
}