/* Karuzela szkoleń na zdjęciu (K33, task03.24) — blok feuer/karuzela-szkolen; front i edytor.
   Punkt wyjścia: makieta K33 (task01.43). Wg FeuerDS: grupy 5501:5659 (odmiana jasna) i 5501:5660
   (odmiana ciemna) z widoku Home Desktop; mobile wg widoku Home Mobile (sekcja na końcu pliku).
   Pas zdjęcia 1440×496 bez woalu (odmiana ciemna — przyciemnienie wyłącznie pod tekstem); tekst (H2 + lead + link) i kreski zakotwiczone do dołu pasa:
   kreski 36 nad kartami, link 12 wyżej; karty od 431 (nachodzą 65 na zdjęcie). Karta bieżąca
   586 = 2 × 277 + 32, pozostałe 277, odstęp 32.
   Mechanika szerokości: dla Swipera każdy slajd ma stałe 277 (siatka zatrzaśnięć się nie zmienia);
   pole karty bieżącej rozszerza się o 309 poza swój slajd, a slajdy za nią przesuwa transform
   o 309 — oba przejścia w CSS. Odmiana .karuzela-szkolen-ciemna: tekst na zdjęciu biały (klasa
   .tlo-ciemne na napisie; na mobile zdejmuje ją skrypt — tekst stoi na tle strony), karta bieżąca
   ciemna. Klasę tła karty bieżącej (.tlo-czerwone / .tlo-ciemne) daje render pierwszej karcie,
   dalej przekłada ją view.js — atomy przemapowują się same. W edytorze (bez Swipera) karty stoją
   statycznie w stanie startowym: pierwsza bieżąca.
   CSS Swipera i arkusze motywu ładują się po tym pliku — reguły nadpisujące slajdy, paginację
   i klasy tła mają wyższą specyficzność. Wartości px z Figmy zapisane w rem (baza 16). */

.karuzela-szkolen {
  --karta-szerokosc: 17.3125rem;          /* 277 = 3 kolumny siatki */
  --karta-poszerzenie: 19.3125rem;        /* 309 = karta + odstęp → bieżąca 586 */
  --karta-odstep: 2rem;                   /* 32; to samo daje Swiperowi view.js (spaceBetween) */
  --karta-przejscie: 0.4s;
  position: relative;
  max-width: 90rem;                       /* stop skali (siatka) */
  margin-inline: auto;
  overflow: hidden;                       /* karty spoza kontenera ucina krawędź sekcji */
}

.karuzela-szkolen-scena {
  position: relative;
  height: 31rem;                          /* 496 */
  overflow: hidden;
}

/* Zdjęcie: <picture> (osobne zdjęcie mobile), a przy brakującym zdjęciu albo w edytorze — osobne
   warstwy desktop i mobile przełączane szerokością; brak pliku = obraz zastępczy. */
.karuzela-szkolen-scena img,
.karuzela-szkolen-medium {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.karuzela-szkolen-medium-mobile { display: none; }

/* Rząd kart nachodzi 65 na pas (karty od 431 przy pasie 496). */
.karuzela-szkolen > .karuzela-szkolen-karty {
  position: relative;
  margin-top: -4.0625rem;                 /* 65 */
}

/* Tekst i kreski: zakotwiczone do dołu pasa — dół kresek 101 nad dołem pasa (36 nad kartami),
   dół linku 12 wyżej (ramki: link 359–383, kreski 391–395, karty od 431); tekst rośnie w górę. */
.karuzela-szkolen-naglowek {
  position: absolute;                     /* względem sekcji — pas zdjęcia zaczyna się u jej góry */
  inset: 0 0 auto;
  height: 24.6875rem;                     /* 496 − 101 */
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--odstep-4);
  color: var(--kolor-tekstu);
}

.karuzela-szkolen-napis {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0.75rem;                 /* 12 */
}

.karuzela-szkolen .karuzela-szkolen-napis.tlo-ciemne { background-color: transparent; }   /* klasa niesie tylko mapowanie tokenów, tłem jest zdjęcie */

/* Odmiana ciemna, tekst na zdjęciu (≥ 640): miękkie przyciemnienie wyłącznie pod tekstem — reszta zdjęcia
   bez woalu (poprawka po UAT 2026-09-29, task03.24). Warstwa pod tekstem w kontekście nagłówka (z-index 1). */
@media (min-width: 640px) {
  .karuzela-szkolen-ciemna .karuzela-szkolen-napis { position: relative; }

  .karuzela-szkolen-ciemna .karuzela-szkolen-napis::before {
    content: "";
    position: absolute;
    inset: -5rem -8rem -4rem -10rem;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0));
    pointer-events: none;
  }
}

/* H2: ramka 32/42 Bold z wierszem 36/48 ExtraBold → kanon H2 32/44.8 Bold, wyróżnienie .akcent
   (ExtraBold), czerwień .akcent-marki (A65). */
.karuzela-szkolen-tytul {
  margin: 0 0 var(--odstep-2);            /* 16 do leadu */
  font-size: var(--tekst-32);
  line-height: var(--interlinia-32);
  font-weight: var(--waga-gruba);
}

.karuzela-szkolen-lead { margin: 0; max-width: 36rem; }
.karuzela-szkolen-napis .link-akcji { margin-top: var(--odstep-2); }   /* 16 pod tekstem (ramka) */
/* Bez leadu (opcjonalny): link 16 pod nagłówkiem (2:949 → 2:952), sam nagłówek bez odstępu pod spodem. */
.karuzela-szkolen-napis .karuzela-szkolen-tytul + .link-akcji { margin-top: 0; }
.karuzela-szkolen-tytul:last-child { margin-bottom: 0; }

/* Kreski jak w projekcie: nieaktywne białe także na jasnym zdjęciu (decyzja użytkownika
   2026-09-21 — świadomie inaczej niż A56 na jasnym tle); przy wielu kartach zwężają się
   (maks. 40 % kontenera) zamiast wypychać tekst. */
.karuzela-szkolen .karuzela-szkolen-naglowek .wskazniki-karuzeli {
  flex: 0 1 auto;
  width: auto;                            /* Swiper daje paginacji width: 100% */
  max-width: 40%;
}

.karuzela-szkolen-naglowek .wskazniki-karuzeli .wskaznik:not(.wskaznik-aktywny) { background: var(--kolor-tla); }
.karuzela-szkolen-naglowek .wskazniki-karuzeli .wskaznik { cursor: pointer; }

/* ---- Karuzela ---- */

.karuzela-szkolen .swiper { overflow: visible; }

.karuzela-szkolen .karuzela-szkolen-lista {
  display: flex;                          /* także w edytorze (bez CSS Swipera) */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bez Swipera (edytor, front przed startem skryptu) odstęp daje CSS; po starcie — spaceBetween. */
.karuzela-szkolen .swiper:not(.swiper-initialized) .karuzela-szkolen-lista { gap: var(--karta-odstep); }

.karuzela-szkolen .karta-szkolenia {
  flex-shrink: 0;
  width: var(--karta-szerokosc);
  height: auto;                           /* wszystkie karty równe najwyższej (lista = flex) */
  transition: transform var(--karta-przejscie) var(--karta-krzywa, ease);   /* krzywa jak ruch rzędu — w ostatnim kroku skoku skrypt daje ease-out */
}

/* Wypełniacz za ostatnią kartą (tylko bez pętli, dokłada skrypt): kontener − karta − odstęp, więc
   ostatnie zatrzaśnięcie wypada dokładnie na ostatniej karcie; +1 px chroni je przed ułamkami rem. */
.karuzela-szkolen .karuzela-szkolen-wypelniacz {
  width: calc(100% - var(--karta-szerokosc) - var(--karta-odstep) + 1px);
  height: 1px;
  pointer-events: none;
}

.karuzela-szkolen .karta-szkolenia.swiper-slide-active { z-index: 1; }
.karuzela-szkolen .karta-szkolenia.swiper-slide-active ~ .karta-szkolenia { transform: translateX(var(--karta-poszerzenie)); }

.karta-szkolenia-pole {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--karta-szerokosc);
  height: 100%;
  padding: var(--odstep-3);               /* 24 */
  background: var(--kolor-tla-wyroznionego);
  color: var(--kolor-tekstu);
  overflow: hidden;
  cursor: pointer;                        /* klik w wąską kartę czyni ją bieżącą */
  transition: width var(--karta-przejscie) var(--karta-krzywa, ease), background-color var(--karta-przejscie) ease, color var(--karta-przejscie) ease;
}

.swiper-slide-active > .karta-szkolenia-pole {
  width: calc(var(--karta-szerokosc) + var(--karta-poszerzenie));   /* 586 */
  cursor: default;
}

/* Przelot przez kilka kart (klik w dalszą kartę / kreskę; klasę na czas przelotu daje view.js):
   karty pośrednie nie przyjmują wyglądu karty bieżącej — zostają wąskie, bez przesunięcia rzędu
   i bez przenikania tytułu; rozszerza się dopiero karta docelowa, w ostatnim — zwykłym — kroku. */
.karuzela-szkolen-przelot .karta-szkolenia.swiper-slide-active ~ .karta-szkolenia { transform: none; }
.karuzela-szkolen-przelot .karta-szkolenia.swiper-slide-active > .karta-szkolenia-pole { width: var(--karta-szerokosc); cursor: pointer; }
.karuzela-szkolen-przelot .karta-szkolenia.swiper-slide-active .karta-szkolenia-tytul {
  width: calc(var(--karta-szerokosc) - 2 * var(--odstep-3));
  font-size: var(--tekst-20);
  line-height: var(--interlinia-20);
  font-weight: var(--waga-najgrubsza);
  animation-name: karta-szkolenia-przenikanie-a;
}

/* Pomiar wysokości rzędu (view.js): wszystkie karty wąskie, bez przejść. */
.karuzela-szkolen-pomiar .karta-szkolenia-pole { width: var(--karta-szerokosc); transition: none; }
.karuzela-szkolen-pomiar .karta-szkolenia .karta-szkolenia-tytul { width: calc(var(--karta-szerokosc) - 2 * var(--odstep-3)); transition: none; }   /* opóźniona zmiana stopnia fałszowałaby pomiar */

/* Łuk znaku na karcie bieżącej (2:415 biel 23 % na czerwieni, 2:494 biel 10 % na ciemnym):
   maska 505×251 dosunięta do prawej krawędzi karty. */
.karta-szkolenia-pole::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  aspect-ratio: 505 / 251;                /* maska z ramki na pełną wysokość karty — łuk zawsze schodzi do dolnej krawędzi */
  background: url("../ikony/luk-znaku.svg") right top / 100% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--karta-przejscie) ease;
}

/* Kolor tła klasy tła musi wygrać z tłem spoczynkowym karty. */
.karta-szkolenia-pole.tlo-czerwone { background-color: var(--kolor-marki); }
.karta-szkolenia-pole.tlo-ciemne { background-color: var(--kolor-ciemny); }

.karta-szkolenia-pole.tlo-czerwone::after { opacity: 0.23; }
.karta-szkolenia-pole.tlo-ciemne::after { opacity: 0.1; }

.karta-szkolenia-pole > * { position: relative; z-index: 1; }

/* Badge A45 i data 14/22 — oba opcjonalne; badge 8 nad datą / tytułem, data 4 nad tytułem (ramki). */
.karta-szkolenia-pole > .tag { margin-bottom: 0.5rem; }

.karta-szkolenia-data {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--tekst-14);
  line-height: var(--interlinia-14);
}

/* Tytuł: wąska karta 20/28 ExtraBold (2:426), bieżąca 26/34 Bold (2:407) → kanon 26/36.4.
   Przy zmianie karty bieżącej tytuł przenika — przełamywanie wierszy jest niewidoczne; wysokość rzędu
   jest na ten czas sztywna (view.js), więc chwilowo wyższy tytuł niczego nie przesuwa. Dwie nazwy
   animacji, żeby ruszała przy wejściu w stan bieżący i przy wyjściu z niego. */
.karta-szkolenia-tytul {
  display: block;
  margin-bottom: var(--odstep-3);         /* min. 24 do przycisku */
  font-size: var(--tekst-20);
  line-height: var(--interlinia-20);
  font-weight: var(--waga-najgrubsza);
  /* Stopień zmienia się w 60 % przejścia — w oknie, w którym tytuł jest niewidoczny (keyframes niżej).
     Szerokość tytułu sztywna (docelowa dla stanu), niezależna od animowanej szerokości karty —
     inaczej wiersze przełamywały się jeszcze raz pod koniec rozszerzania. Nadmiar ucina overflow karty. */
  width: calc(var(--karta-szerokosc) - 2 * var(--odstep-3));
  transition: color 0.12s ease, font-size 0s linear calc(var(--karta-przejscie) * 0.6),
              line-height 0s linear calc(var(--karta-przejscie) * 0.6), font-weight 0s linear calc(var(--karta-przejscie) * 0.6),
              width 0s linear calc(var(--karta-przejscie) * 0.6);
  animation: karta-szkolenia-przenikanie-a calc(var(--karta-przejscie) * 1.5) ease;
}

.swiper-slide-active .karta-szkolenia-tytul {
  width: calc(var(--karta-szerokosc) + var(--karta-poszerzenie) - 2 * var(--odstep-3));
  animation-name: karta-szkolenia-przenikanie-b;
}

@media (min-width: 640px) {
  .swiper-slide-active .karta-szkolenia-tytul {
    font-size: var(--tekst-26);
    line-height: var(--interlinia-26);
    font-weight: var(--waga-gruba);
  }

  .karuzela-szkolen-pomiar .karta-szkolenia-tytul {
    font-size: var(--tekst-20);
    line-height: var(--interlinia-20);
    font-weight: var(--waga-najgrubsza);
  }
}

/* Miękkie przenikanie z rozmyciem: tytuł gaśnie i rozmywa się, w oknie niewidoczności
   (30–50 % z 1,5 × przejścia = 45–75 % przejścia) zmienia stopień i łamanie wierszy, potem wraca. */
@keyframes karta-szkolenia-przenikanie-a {
  0% { opacity: 1; filter: blur(0); }
  30%, 50% { opacity: 0; filter: blur(0.5rem); }
  100% { opacity: 1; filter: blur(0); }
}
@keyframes karta-szkolenia-przenikanie-b {
  0% { opacity: 1; filter: blur(0); }
  30%, 50% { opacity: 0; filter: blur(0.5rem); }
  100% { opacity: 1; filter: blur(0); }
}

.karta-szkolenia-pole > .przycisk { margin-top: auto; }   /* przycisk przy dole karty */
/* Edytor: RichText tekstu przycisku dostaje w stylu inline white-space: pre-wrap — przycisk A41 nie łamie wiersza. */
.karta-szkolenia-pole > .przycisk .rich-text { white-space: pre !important; }

/* Hover całej karty: tytuł jak hover linku tekstowego na danym tle (szara karta — kolor marki;
   czerwona — A42.14; ciemna — A42.10), przycisk dostaje .stan-hover z view.js. */
.karta-szkolenia-pole:hover .karta-szkolenia-tytul { color: var(--kolor-marki); }
.karta-szkolenia-pole:is(.tlo-ciemne, .tlo-czerwone):hover .karta-szkolenia-tytul { color: var(--stan-hover); }

/* Edytor: komunikat w miejscu kart, gdy brak aktualnych terminów (na froncie blok się nie renderuje). */
.karuzela-szkolen-brak {
  margin: 0;
  padding: var(--odstep-3);
  background: var(--kolor-tla-wyroznionego);
  color: var(--kolor-marki);
  font-size: var(--tekst-14);
  line-height: var(--interlinia-14);
  font-weight: var(--waga-gruba);
}

/* ---- Mobile wg widoku Home Mobile (tekst 2:1304, pas 2:1290, kreski 2:1299, karty 2:1311):
   tekst nad zdjęciem na tle strony (24 nad pasem), pas 274, kreski na zdjęciu 24 nad kartami,
   karty 320 nachodzą 66; wszystkie karty tej samej szerokości — bieżąca różni się tylko kolorem.
   Nagłówek rozpada się (display: contents): napis, pas, kreski i karty układa kolumna flex sekcji. ---- */

@media (max-width: 639px) {
  .karuzela-szkolen {
    --karta-szerokosc: 20rem;             /* 320 */
    --karta-poszerzenie: 0rem;
    --karta-odstep: 1rem;                 /* 16 */
    display: flex;
    flex-direction: column;
    padding-top: var(--odstep-6);         /* 48 — bez wartości w projekcie (sekcje strony głównej) */
  }

  .karuzela-szkolen-naglowek { display: contents; }

  .karuzela-szkolen-napis {
    order: 1;
    flex: none;
    margin: 0 0 var(--odstep-3);          /* 24 do pasa */
    padding-inline: var(--odstep-2);
  }

  .karuzela-szkolen-scena { order: 2; height: 17.125rem; }      /* 274 */

  .karuzela-szkolen-medium-desktop { display: none; }
  .karuzela-szkolen-medium-mobile { display: block; }

  .karuzela-szkolen .karuzela-szkolen-naglowek .wskazniki-karuzeli {
    order: 3;
    position: relative;
    inset: auto;                          /* Swiper daje paginacji bottom: 8px */
    z-index: 1;
    width: auto;
    max-width: none;
    margin: -5.875rem var(--odstep-2) 0;  /* dół kresek 90 nad dołem pasa = 24 nad kartami */
  }

  .karuzela-szkolen-naglowek .wskazniki-karuzeli .wskaznik { flex: 1; width: auto; }

  .karuzela-szkolen > .karuzela-szkolen-karty {
    order: 4;
    width: 100%;                          /* margin auto kontenera wyłącza rozciąganie w kolumnie flex */
    margin-top: var(--odstep-3);          /* karty 24 pod kreskami → nachodzą 66 na pas */
  }

  .karuzela-szkolen-tytul {
    font-size: var(--tekst-24);           /* 2:1304: 24/32 Bold → kanon 24/34; wiersz 32 ExtraBold → .akcent */
    line-height: var(--interlinia-24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .karuzela-szkolen { --karta-przejscie: 0s; }
}