/* ============================================================
   Foreto Hero — zamiennik Revolution Slidera
   Wartości zdjęte z renderu produkcyjnego lukasiewicz.gov.pl.
   Tokeny na komponencie, nie na :root — żeby nie wyciekały na stronę.
   Krój dziedziczony z motywu (TT Supermolot dostarcza szablon).
   ============================================================ */
.fea-hero {
  --luk-green:    #3ee522;
  --luk-ink:      #000000;
  --luk-ink-soft: #030014;
  --luk-ground:   #f5f6f7;
  --font-luk:     inherit;
}

/* ============================================================
   WIDGET — odwzorowanie identyfikacji Łukasiewicza.
   Zawsze jasny, niezależnie od motywu podglądu: to wierna kopia.
   Responsywność na container queries — widget reaguje na swoją
   kolumnę w Elementorze, nie na okno przeglądarki.
   ============================================================ */
.fea-hero {
  /* WYGŁADZANIE PISMA jak w oryginale. RevSlider ustawia na swoich warstwach
     `-webkit-font-smoothing: antialiased`, a nasz widget dziedziczył domyślne
     `auto` (subpiksel) — te same litery w tym samym kroju i rozmiarze
     wychodziły przez to grubsze. Zgłoszenie 2026-09-14 dotyczyło podpisu
     przypinki na /akcelerator-lukasiewicza/; po ustawieniu tej jednej
     własności zrzut naszego podpisu i produkcyjnego różnią się ZEREM pikseli
     (przedtem 13 205 z 214 240). */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  container-type: inline-size;
  container-name: hero;
  position: relative;
  background: transparent;
  color: var(--luk-ink);
  font-family: inherit;
  isolation: isolate;
}

.fea-hero__stage {
  position: relative;
  min-height: 640px;
  display: grid;
  /* Jedna kolumna o szerokosci KADRU, nie tresci: domyslna kolumna auto
     rosla do min-content slajdu (kolumny slajdu z --fea-kol: 815 + 769 px
     przy kadrze 1440 na ilot /), scena miala 1676 px, a tlo slajdu
     (object-fit: cover) bylo o 16% za duze (CLR-35 poz. 116). */
  grid-template-columns: minmax(0, 1fr);
  /* RevSlider przycina scene tak samo (<rs-slides style="overflow:hidden">).
     Bez tego zdjecie szersze od siatki wypycha caly dokument: na /kariera/
     icso przy 1280px documentElement.scrollWidth rosl do 1595px. min-height
     niczego nie zabiera - wiersz gridu rosnie razem z trescia - wiec ciete
     jest wylacznie to, co wystaje POZA kadr, dokladnie jak w oryginale. */
  overflow: hidden;
}

.fea-hero__slide {
  grid-area: 1 / 1;
  /* Slajd nie moze byc szerszy od kadru: w ukladzie tekstowym kolumny
     siatki slajdu (--fea-kol z odleglosci warstwy 2282 px) rozpychaly go
     do 1676 px przy kadrze 1440 i tlo slajdu (object-fit: cover) bylo
     o 16% za duze - ilot /, slajd 2 (CLR-35 poz. 116). */
  max-width: 100%;
  min-width: 0;
  /* Wysokosc sceny ZRODLA, przeliczona ta sama jednostka co wspolrzedne
     warstw. Sztywne 640px sceny przy siatce 3840 znaczyly, ze przycisk
     stojacy na y=1161 wypadal przy 1920px o 59px PONIZEJ dolnej krawedzi
     slajdu, na sekcje pod sliderem (overflow sceny to visible, wiec nic go
     nie przycinalo). Produkcja ma tam rs-module wysokosci 720px = 1440 * 0,5.
     max() pilnuje, zeby przy waskim kontenerze nic sie nie skurczylo ponizej
     dotychczasowego stanu. */
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: 0;
  padding: 0 clamp(20px, 4cqi, 64px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s cubic-bezier(.645,.045,.355,1), visibility 0s linear .6s;
}

/* Gdy scena zrodla jest ZNANA, to ona rozstrzyga - takze wtedy, gdy jest
   NIZSZA niz 640px. Dotychczasowe max(640px, ...) znaczylo, ze podloga bije
   scene zrodla dla kazdego kontenera wezszego niz 3840 * 640/1440 = 1706px,
   czyli praktycznie zawsze: slajd imn miał 640px zamiast 450px, ktore ma
   rs-module na produkcji. Te 190px nadmiaru centrowalo kolumne tekstu 120px
   za nisko i naglowek wchodzil na grafike (CLR-21, poz. 10); na slajdach
   konferencyjnych git zostawalo ~100px pustego pola pod rzedem przyciskow.

   min-height niczego nie przycina - wiersz gridu urosnie, gdy tresc bedzie
   wyzsza - wiec zejscie ponizej 640px jest bezpieczne.

   Selektor atrybutowy (0,2,0) bije pozniejsze reguly klasowe (0,1,0)
   w zapytaniach kontenera, wiec scena zrodla obowiazuje az do progu
   skladania, gdzie jest jawnie zdejmowana. */
.fea-hero__stage[style*="--fea-scena"],
.fea-hero__slide[style*="--fea-scena"] {
  min-height: calc(var(--fea-scena) * var(--fea-jedn));
}

/* Pionowe zakotwiczenie kolumny tekstu ze ZRODLA.
   Slajd centrowal tekst w scenie (align-items: center), a grafika byla
   zakotwiczona do zrodla przez --fea-img-top - jedno z drugim sie rozjezdzalo.
   Na /en/ imn blok tekstu ma 261px, scena 640px, wiec centrowanie stawialo
   naglowek na y=190 zamiast zrodlowego 227 * jedn = 70. Te 120px roznicy
   wpychalo naglowek w pasmo, gdzie PNG baterii siega samej lewej krawedzi
   kadru - i dopiero tam tekst REALNIE nachodzil na grafike (CLR-21, poz. 10).
   W oryginale zachodzacy pas jest ten sam, ale na tej wysokosci przezroczysty.

   Slajdy bez --fea-tekst-gora zostaja przy dotychczasowym centrowaniu. */
.fea-hero__slide[style*="--fea-tekst-gora"] { align-items: start; }
.fea-hero__slide[style*="--fea-tekst-gora"] .fea-hero__text {
  margin-top: var(--fea-tekst-gora);
  /* Zakotwiczenie pionowe liczy sie od gornej krawedzi sceny, wiec stale
     48px gornego wciecia doklada sie do niego i naglowek stoi 48px za
     nisko - jednakowo na kazdej szerokosci, bo ta wartosc nie skaluje
     sie z siatka (CLR-21, poz. 10).

     Dolnego wciecia tez nie ma: kolumna zakotwiczona do gory nie potrzebuje
     zapasu pod spodem, a doliczal on 48px do wysokosci calego slidera -
     przy scenie 394px wychodzilo 467px (weryfikacja 2026-09-10). */
  padding-block: 0;
}

.fea-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .6s cubic-bezier(.645,.045,.355,1), visibility 0s;
  z-index: 1;
}

.fea-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding-block: 48px;
  max-width: 700px;
}

.fea-hero__title {
  margin: 0;
  font-size: clamp(30px, 5cqi, 64px);
  line-height: 1.125;
  font-weight: 300;
  letter-spacing: -0.005em;
  color: var(--luk-ink);
}

.fea-hero__lead {
  margin: 0;
  font-size: clamp(17px, 1.9cqi, 24px);
  line-height: 1.42;
  font-weight: 400;
  max-width: 34ch;
  color: var(--luk-ink);
}

.fea-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

/* Przycisk ze ściętym narożnikiem — clip-path zdjęty z produkcji */
.fea-btn {
  --notch: 18px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 40px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 36px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--luk-ink);
  border: 0;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.645,.045,.355,1), filter .18s;
}

.fea-btn--primary {
  background: var(--luk-green);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - 9px) calc(100% - 9px),
    calc(100% - var(--notch)) 100%,
    0 100%
  );
}

.fea-btn--ghost { background: transparent; padding-inline: 0; }

.fea-btn:hover { transform: translateX(3px); }
.fea-btn:focus-visible { outline: 3px solid var(--luk-ink); outline-offset: 3px; }

.fea-btn__arrow { flex: none; }
.fea-btn:hover .fea-btn__arrow { transform: translateX(4px); }
.fea-btn__arrow { transition: transform .18s cubic-bezier(.645,.045,.355,1); }

.fea-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Szerokosc warstwy ze zrodla: na itr blok ma tam 1288px (483px @1440),
     a bez niej ciagnal sie na cala kolumne tekstu i wchodzil na zdjecie
     (CLR-21, kolumny pkt 3). */
  max-width: var(--fea-t-w, none);
}

.fea-hero__tags li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.fea-hero__tags li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--luk-green);
  flex: none;
}

.fea-hero__media {
  position: relative;
  justify-self: end;
  align-self: stretch;
  width: 100%;
  display: grid;
  place-items: center;
}

.fea-hero__media img {
  grid-area: 1 / 1;
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
}

.fea-hero__media img.is-back { opacity: .9; transform: scale(1.18); }

/* pasek postępu */
.fea-hero__progress {
  position: relative;
  height: 5px;
  background: transparent;
  overflow: hidden;
}
.fea-hero__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: rgba(62, 229, 34, .5);
}
.fea-hero__progress span.is-running {
  animation: feaProgress var(--fea-delay, 9000ms) linear forwards;
}
@keyframes feaProgress { from { width: 0; } to { width: 100%; } }
/* Jeden slajd: pasek stoi wypełniony, bez animacji — dokładnie tak rysuje go
   RevSlider, gdy nie ma czego odliczać. Drugi selektor MUSI powtórzyć klasę
   `is-running`, którą dokłada skrypt: bez tego reguła animacji (0,2,1) bije
   samą klasę wariantu i pasek i tak się przewijał (pomiar: 877 z 1440 px). */
.fea-hero__progress--pelny span,
.fea-hero__progress--pelny span.is-running { width: 100%; animation: none; }

/* nawigacja */
.fea-hero__nav {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px clamp(20px, 4cqi, 64px) 34px;
}

.fea-hero__arrow {
  width: 47px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--luk-ink-soft);
  transition: transform .18s cubic-bezier(.645,.045,.355,1), opacity .18s;
}
.fea-hero__arrow:hover { opacity: .6; }
.fea-hero__arrow--prev:hover { transform: translateX(-4px); }
.fea-hero__arrow--next:hover { transform: translateX(4px); }
.fea-hero__arrow:focus-visible { outline: 2px solid var(--luk-ink-soft); outline-offset: 6px; }

.fea-hero__counter {
  font-size: 16px;
  font-weight: 600;
  color: var(--luk-ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* animacja wejścia warstw — odwzorowanie timeline'u RevSlidera */
/* The rise is added on top of the layer's own transform: replacing it dropped
   the translateX(-50%) of centred text for 1 s, so the text jumped (CLR-47). */
.fea-hero__slide.is-active .fea-anim {
  animation: feaIn 1s cubic-bezier(.645,.045,.355,1) backwards,
             feaRise 1s cubic-bezier(.645,.045,.355,1) backwards;
  animation-composition: replace, add;
}
.fea-hero__slide.is-active .fea-anim:nth-child(1) { animation-delay: 0ms; }
.fea-hero__slide.is-active .fea-anim:nth-child(2) { animation-delay: 90ms; }
.fea-hero__slide.is-active .fea-anim:nth-child(3) { animation-delay: 180ms; }
.fea-hero__slide.is-active .fea-anim:nth-child(4) { animation-delay: 270ms; }

@keyframes feaIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes feaRise {
  from { transform: translateY(-38px); }
  to   { transform: translateY(0); }
}

.fea-hero__slide.is-active .fea-hero__media {
  animation: feaFade 1s cubic-bezier(.645,.045,.355,1) backwards;
}
@keyframes feaFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- container queries: układ reaguje na kolumnę, nie na okno ---- */
@container hero (max-width: 999px) {
  .fea-hero__stage { min-height: 540px; }
  .fea-hero__slide { min-height: 540px; }
  .fea-hero__slide { padding-inline: clamp(18px, 3cqi, 40px); }
  .fea-hero__text { gap: 20px; }
}

@container hero (max-width: 780px) {
  .fea-hero__stage,
  .fea-hero__stage[style*="--fea-scena"],
  .fea-hero__slide[style*="--fea-scena"] { min-height: 580px; }
  /* Kolumna wraca do toku tresci, wiec odsuniecie od gory sceny nie ma
     juz do czego sie odnosic. */
  .fea-hero__slide[style*="--fea-tekst-gora"] .fea-hero__text {
    margin-top: 0;
    /* i wraca zwykle wciecie mobilne - inaczej regula z zakotwiczeniem
       pionowym (0 48px) bije ogolna .fea-hero__text ponizej */
    padding-block: 8px 32px;
  }
  .fea-hero__slide {
    /* Ponizej progu skladania przyciski wracaja do toku tresci, wiec scena
       zrodla przestaje cokolwiek wyznaczac - zostaje samo minimum. */
    min-height: 580px;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 4px;
  }
  .fea-hero__media { order: -1; justify-self: center; padding-top: 24px; }
  .fea-hero__media img { max-height: 260px; }
  .fea-hero__text { padding-block: 8px 32px; gap: 18px; }
  .fea-hero__lead { max-width: none; }
  .fea-hero__actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .fea-btn { justify-content: space-between; }
  .fea-btn--ghost { justify-content: flex-start; gap: 14px; }
  .fea-hero__tags { flex-direction: column; gap: 10px; }
  .fea-hero__nav { padding-block: 14px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .fea-hero__slide,
  .fea-hero__slide.is-active .fea-anim,
  .fea-hero__slide.is-active .fea-hero__media,
  .fea-btn, .fea-hero__arrow { animation: none !important; transition: none !important; }
  .fea-hero__progress span.is-running { animation: none; width: 100%; }
}

/* ============================================================
   WARIANTY KOMPONENTU fea-hero
   Modyfikatory na tym samym komponencie — jeden widget, cztery układy.
   Pokrycie ustalone na 219 slajdach ze 135 żywych stron.
   ============================================================ */

/* ---- wariant COVER: tekst na tle pełnoekranowym (3% slajdów) ---- */
/* Zdjęcie musi sięgać krawędzi, więc slajd oddaje swój padding do warstwy tekstu. */
.fea-hero--cover .fea-hero__slide {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
}

.fea-hero--cover .fea-hero__media {
  grid-area: 1 / 1;
  place-items: stretch;
  z-index: 0;
}

.fea-hero--cover .fea-hero__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center right;
}

/* Przyciemnienie od lewej — bez niego ciemny tekst ginie na jasnym zdjęciu.
   Kryje ~55% szerokości, czyli dokładnie tyle, ile zajmuje kolumna tekstu. */
.fea-hero--cover .fea-hero__slide::after {
  content: "";
  grid-area: 1 / 1;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(245, 246, 247, .97) 0%,
    rgba(245, 246, 247, .95) 34%,
    rgba(245, 246, 247, .78) 50%,
    rgba(245, 246, 247, .18) 74%,
    rgba(245, 246, 247, 0) 100%);
  pointer-events: none;
}

.fea-hero--cover .fea-hero__text {
  grid-area: 1 / 1;
  z-index: 2;
  justify-content: center;
  max-width: 38ch;
  padding: 64px clamp(20px, 4cqi, 64px);
}

.fea-hero--cover .fea-hero__title { font-size: clamp(30px, 4.4cqi, 56px); }

@container hero (max-width: 780px) {
  .fea-hero--cover .fea-hero__media { order: 0; padding-top: 0; }
  .fea-hero--cover .fea-hero__media img { object-position: center; }
  .fea-hero--cover .fea-hero__slide::after {
    background: linear-gradient(180deg,
      rgba(245, 246, 247, .30) 0%,
      rgba(245, 246, 247, .82) 34%,
      rgba(245, 246, 247, .97) 58%,
      rgba(245, 246, 247, .99) 100%);
  }
  .fea-hero--cover .fea-hero__text {
    max-width: none;
    justify-content: flex-end;
    padding-block: 32px;
  }
}

/* ---- wariant TEXT: sam tekst, bez grafiki (1% slajdów) ---- */
.fea-hero--text .fea-hero__slide { grid-template-columns: minmax(0, 1fr); }
.fea-hero--text .fea-hero__media { display: none; }
.fea-hero--text .fea-hero__text { max-width: 46ch; padding-block: 72px; }
.fea-hero--text .fea-hero__title { font-size: clamp(34px, 6cqi, 76px); }

/* ---- wariant EVENT: panel wydarzenia (9% slajdów) ---- */
.fea-hero--event .fea-hero__slide {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}

.fea-hero--event .fea-hero__text {
  max-width: none;
  gap: 20px;
  padding-block: 44px;
}

.fea-hero--event .fea-hero__title { font-size: clamp(28px, 3.6cqi, 46px); line-height: 1.16; }

/* metryczka wydarzenia: data i miejsce */
.fea-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fea-hero__meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 500;
}

.fea-hero__meta li::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--luk-green);
  transform: rotate(45deg);
}

.fea-hero__tagline {
  margin: 0;
  font-size: clamp(16px, 1.7cqi, 20px);
  font-weight: 400;
  max-width: 52ch;
}

/* Zdanie opisowe nad metryczka. Osobny wiersz BEZ punktora - w liscie tagow
   dostawalo zielony romb z .fea-hero__meta li::before, ktorego oryginal nie
   ma. Kursywa tylko wtedy, gdy niesie ja kroj ze zrodla: slajd spawalniczy
   ma TT Supermolot Light Italic, ale warsztaty EJ zwykly Light. */
.fea-hero__subline {
  margin: 0;
  font-size: var(--fea-s-size, clamp(16px, 1.6cqi, 19px));
  line-height: var(--fea-s-lh, 1.4);
  color: var(--fea-s-color, inherit);
  font-family: var(--fea-s-font, inherit);
  font-style: var(--fea-s-style, normal);
  font-weight: 400;
  max-width: 52ch;
}

/* pasek odnośników do sekcji — te slajdy mają po 4–7 przycisków */
.fea-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fea-hero__links a {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--luk-ink);
  border: 1px solid rgba(3, 0, 20, .28);
  background: transparent;
  transition: background .16s, border-color .16s, color .16s;
}

.fea-hero__links a:hover {
  background: var(--luk-ink);
  border-color: var(--luk-ink);
  color: #fff;
}

.fea-hero__links a.is-primary {
  --notch: 14px;
  background: var(--luk-green);
  border-color: var(--luk-green);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - 7px) calc(100% - 7px),
    calc(100% - var(--notch)) 100%,
    0 100%
  );
}
.fea-hero__links a.is-primary:hover { background: var(--luk-ink); color: #fff; }
.fea-hero__links a:focus-visible { outline: 3px solid var(--luk-ink); outline-offset: 3px; }

/* pasek logotypów organizatorów */
.fea-hero__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  padding-top: 6px;
  border-top: 1px solid rgba(3, 0, 20, .12);
  margin-top: 6px;
}

.fea-hero__logos img { max-height: 46px; width: auto; display: block; }

.fea-hero__logos .placeholder {
  display: grid;
  place-items: center;
  min-width: 116px;
  height: 46px;
  border: 1px dashed rgba(3, 0, 20, .3);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(3, 0, 20, .45);
}

@container hero (max-width: 780px) {
  .fea-hero--event .fea-hero__links { flex-direction: column; align-items: stretch; }
  .fea-hero--event .fea-hero__links a { justify-content: center; }
  .fea-hero__meta { flex-direction: column; gap: 8px; }
}

/* ---- nawigacja bulletowa: dla sliderów z 5+ slajdami (16 stron) ---- */
.fea-hero__dots {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fea-hero__dots button {
  width: 26px;
  height: 4px;
  padding: 0;
  border: 0;
  background: rgba(3, 0, 20, .22);
  cursor: pointer;
  transition: background .18s, transform .18s;
}

.fea-hero__dots button[aria-current="true"] {
  background: var(--luk-green);
  transform: scaleY(1.75);
}

.fea-hero__dots button:hover { background: rgba(3, 0, 20, .45); }
.fea-hero__dots button[aria-current="true"]:hover { background: var(--luk-green); }
.fea-hero__dots button:focus-visible { outline: 2px solid var(--luk-ink-soft); outline-offset: 4px; }

/* przy bulletach licznik jest zbędny */
.fea-hero--dots .fea-hero__counter { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fea-hero__dots button,
  .fea-hero__links a { transition: none !important; }
}

/* ---- opcjonalne tło slajdu ----
   Zdjęcie tła NIE jest w tej bazie warstwą: przegląd 138 stron dał zero
   warstw slidebg (dokumentacja RevSlidera obiecuje je zawsze) i 11 slajdów
   ze zdjęciem w params.bg slajdu — ILOT pl i en oraz PIAP, same strony
   główne. Na blogu 43 (PIAP) tło leży POD układem dwukolumnowym, a na ILOT
   pod tekstem na współrzędnych, więc nie wystarczy wariant --cover: tło
   musi być dostępne w każdym wariancie (pomiar 2026-09-16). */
.fea-hero__slide { position: relative; }

.fea-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.fea-hero__slide > .fea-hero__text,
.fea-hero__slide > .fea-hero__media { position: relative; z-index: 1; }

/* Wariant --cover ma własną warstwę tła i własny gradient — tam backdrop
   jest zbędny i nie może nadpisać object-position: center right. */
.fea-hero--cover .fea-hero__backdrop { display: none; }

/* ============================================================
   ZAMEK TYPOGRAFICZNY
   Motyw ma regułę o specyficzności (0,1,1) — prawdopodobnie
   `.elementor-widget-container h2` — która bije pojedynczą klasę
   i wymuszała 50px/400 zamiast 64px/300. Stąd selektory z dwiema
   klasami: wygrywają bez uciekania się do !important.

   Wartości są zdjęte pomiarem z RevSlidera na tej samej stronie,
   nie dobrane na oko. RevSlider ustawia krój inline per warstwa,
   dlatego tu też nazywamy go wprost zamiast dziedziczyć.
   ============================================================ */
.fea-hero {
  --fea-fallback: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fea-light:   "TT Supermolot Light", var(--fea-fallback);
  --fea-regular: "TT Supermolot Regular", var(--fea-fallback);
  --fea-bold:    "TT Supermolot Bold", var(--fea-fallback);
}

.fea-hero .fea-hero__title {
  font-family: var(--fea-light);
  font-size: clamp(30px, 5cqi, 64px);
  line-height: 72px;
  font-weight: 300;
  letter-spacing: normal;
}

.fea-hero .fea-hero__lead {
  font-family: var(--fea-light);
  font-size: clamp(17px, 1.9cqi, 24px);
  line-height: 34px;
  font-weight: 400;
  letter-spacing: normal;
}

/* Kroj i grubosc przyciskow z WYKRZYKNIKIEM: motyw ipo ma regule
   "p, span, li, a { font-family: ... !important; font-weight: 400 !important }",
   ktora bije kazda nasza regule i kazdy styl w atrybucie bez !important.
   Oryginalu nie dotyka, bo tam przycisk to <sr7-btn>, a nie <a> - stad
   napis "see job offers" wychodzil u nas 400 Regular przy 500 Bold
   w oryginale (pomiar 2026-09-29). Styl warstwy ze zrodla ma w rendererze
   wlasne !important i dalej bije te wartosci. */
.fea-hero .fea-btn {
  /* Kroj z arkusza, gdy zrodlo nie podaje wlasnego. Pismo z OTOCZENIA
     (inherit) sprawdzilem i jest gorsze: na trzech stronach dawalo trzy
     rozne kroje (system-ui, Regular, Roboto), a oryginal ma tam Bold
     (pomiar 2026-09-29). Zostaje jedna pewna odmiana; wyjatkiem sa pigulki
     slajdow konferencyjnych git, gdzie oryginal nie ma zadnego kroju
     i wypada na Roboto - roznica dotyczy szerokosci napisu o 20px. */
  font-family: var(--fea-bold) !important;
  font-size: 18px;
  line-height: 36px;
  font-weight: 500 !important;
  letter-spacing: normal;
}

.fea-hero .fea-hero__tags li {
  font-family: var(--fea-regular);
  /* Stopien pisma i interlinia ze zrodla, gdy renderer je podaje
     (--fea-t-size / --fea-t-lh): na wit /kariera/ wiersze maja w zrodle
     33 px na siatce 3840, czyli 12 px przy 1440, u nas szly sztywne 14 px
     (CLR-32 poz. 91). */
  font-size: var(--fea-t-size, 14px);
  line-height: var(--fea-t-lh, 16px);
  font-weight: 400;
  letter-spacing: normal;
}

/* Wiersz ze znacznikiem listy ze zrodla (<i class="fa-square">): znacznik
   stoi w tresci, wiec punktor z arkusza schodzi, a wielkosc liter i odstep
   biora sie ze zrodla, nie z wersalikow metryczki. Glif Font Awesome
   laduje Elementor, wiec kwadrat przezyje zdjecie RevSlidera. */
/* Wyrownanie do linii bazowej: wiersz ma min-height rowna krokowi listy
   (24 px przy 15 px pisma), a centrowanie stawialo napis 5 px nizej niz
   w oryginale, ktory sklada wiersz od gory. */
.fea-hero .fea-hero__tags li.ma-kwadrat { text-transform: var(--fea-t-tt, none); letter-spacing: normal; gap: 0; white-space: nowrap; align-items: baseline; }
.fea-hero .fea-hero__tags li.ma-kwadrat::before { display: none; }
.fea-hero .fea-hero__tags li.ma-kwadrat i[class*="fa-"] { flex: none; line-height: 1; }

/* Przy węższym kontenerze interlinia 72px byłaby za luźna dla
   mniejszego stopnia — poniżej progu wracamy do proporcjonalnej. */
@container hero (max-width: 999px) {
  .fea-hero .fea-hero__title { line-height: 1.14; }
  .fea-hero .fea-hero__lead  { line-height: 1.42; }
}

.fea-hero .fea-hero__meta li,
.fea-hero .fea-hero__tagline { font-family: var(--fea-regular); letter-spacing: normal; }
.fea-hero .fea-hero__links a { font-family: var(--fea-bold); letter-spacing: normal; }
.fea-hero .fea-hero__counter { font-family: var(--fea-bold); letter-spacing: normal; }

/* ============================================================
   ZAMEK GEOMETRYCZNY
   Wartości z pomiaru RevSlidera na tej samej stronie, slajd 1
   zatrzymany i po wygaśnięciu animacji wejścia.
   ============================================================ */

/* Kolor: motyw wymuszał #030014 (specyficzność 0,1,1).
   RevSlider ma czystą czerń na wszystkich warstwach tekstowych. */
.fea-hero .fea-hero__title,
.fea-hero .fea-hero__lead,
.fea-hero .fea-hero__tags li,
.fea-hero .fea-btn { color: var(--luk-ink); }

/* Odstęp między CTA: 56px, a drugi przycisk zachowuje pełny padding
   poziomy 40px — razem daje 96px od krawędzi pierwszego do tekstu
   drugiego, dokładnie jak w RevSliderze. */
.fea-hero .fea-hero__actions { gap: 8px 56px; }
.fea-hero .fea-btn--ghost { padding: 16px 40px; }

/* Grafika: RevSlider skaluje ją do pełnej wysokości slajdu i pozwala
   wyjść poza obrys. Ograniczenie max-height:600px zmniejszało ją
   o ~27%, a opacity .9 i skala 1.18 na warstwie tła były moim
   dodatkiem, którego oryginał nie ma. */
.fea-hero .fea-hero__media { place-items: stretch; }

.fea-hero .fea-hero__media img {
  max-height: none;
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}

.fea-hero .fea-hero__media img.is-back {
  opacity: 1;
  transform: none;
}

@container hero (max-width: 780px) {
  .fea-hero .fea-hero__media img { height: auto; max-height: 260px; }
  .fea-hero .fea-hero__actions { gap: 4px; }
  .fea-hero .fea-btn--ghost { padding: 16px 0; }
}

/* ------------------------------------------------------------
   Grafika zachodzi na kolumnę tekstu — tak robi RevSlider.
   Pomiar oryginału: tekst 700px od x=10, obraz 780px od x=513,
   czyli ~200px nakładki.

   Grafika jest wyjęta z układu (position:absolute). Próba trzymania
   jej w gridzie kończyła się tym, że przy height:100% sama napędzała
   wysokość wiersza i rozpychała slider z 640px do 824px.
   Poza układem wysokość dyktuje wyłącznie tekst i min-height sceny.
   Dotyczy tylko układu podstawowego; event/cover/text mają swoje.
   ------------------------------------------------------------ */
.fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text) .fea-hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(-1 * clamp(20px, 4cqi, 64px));
  left: auto;
  width: min(780px, 66cqi);
  z-index: 0;
}

.fea-hero .fea-hero__text { position: relative; z-index: 1; }

@container hero (max-width: 780px) {
  .fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text) .fea-hero__media {
    position: static;
    width: 100%;
  }
}

/* ------------------------------------------------------------
   Lewy margines treści.
   RevSlider ma siatkę 1280px wyśrodkowaną w module 1300px, więc
   zaczyna się 10px od krawędzi, a warstwy siedzą na xo:20px —
   razem 30px. Moje clamp(20px, 4cqi, 64px) dawało 53px, czyli
   tekst był wcięty o 23px za głęboko.
   ------------------------------------------------------------ */
.fea-hero { --fea-pad: clamp(20px, 2.3cqi, 40px); }

.fea-hero .fea-hero__slide { padding-inline: var(--fea-pad); }

.fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text) .fea-hero__media {
  right: calc(-1 * var(--fea-pad));
}

.fea-hero .fea-hero__nav { padding-inline: var(--fea-pad); }

.fea-hero--cover .fea-hero__slide { padding-inline: 0; }
.fea-hero--cover .fea-hero__text { padding-inline: var(--fea-pad); }

/* --- korekta wariantu COVER (ostatnia w kolejnosci, wiec wygrywa) ---
   width:auto na kontenerze absolutnym daje shrink-to-fit, wiec obraz
   przyjmowal naturalne 785x671 i rozpychal scene. Zamek geometryczny
   nadpisal tez object-fit na contain, a cover potrzebuje cover. */
.fea-hero--cover .fea-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.fea-hero--cover .fea-hero__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center right;
}

/* Kolejnosc warstw w wariancie COVER.
   Gradient (::after) i tekst mialy oba z-index:1, wiec o kolejnosci
   decydowal DOM - a pseudoelement idzie po tekscie, czyli malowal sie
   NA nim i wypierał kontrast. Jawna hierarchia: obraz 0, gradient 2,
   tekst 3. Specyficznosc (0,3,0) bije zamek geometryczny. */
.fea-hero.fea-hero--cover .fea-hero__text { z-index: 3; }
.fea-hero.fea-hero--cover .fea-hero__slide::after { z-index: 2; }
.fea-hero.fea-hero--cover .fea-hero__media { z-index: 0; }


/* ============================================================
   SIATKA TRESCI — jak w RevSliderze
   RevSlider nie ma paddingu od krawedzi. Ma siatke o STALEJ
   szerokosci 1280px (gridwidth), wysrodkowana w module, a warstwy
   siedza na offsetach wzgledem tej siatki (xo:20px).

   Moje clamp(20px, 2.3cqi, 40px) przypadkiem zgadzalo sie przy
   kontenerze 1320px, ale przy 1680px dawalo 39px zamiast 220px.
   Teraz padding = polowa nadmiaru ponad 1280 + 20px offsetu warstwy,
   czyli tekst trzyma sie siatki niezaleznie od szerokosci okna.
   ============================================================ */
.fea-hero {
  --fea-grid: 1280px;
  --fea-inset: 20px;
  --fea-gutter: calc(max(0px, 100% - var(--fea-grid)) / 2);
}

.fea-hero .fea-hero__slide,
.fea-hero .fea-hero__nav {
  /* --fea-tekst-lewa niesie x warstwy naglowka ze ZRODLA, przeliczone
     jednostka siatki tego slidera. Zaszyta siatka tresci 1280 dawala przy
     oknie 1920 wciecie 340px, a slajd o siatce 3840 i naglowku na x=300 ma
     miec 150px - tekst startowal 190px za daleko w prawo i wchodzil na
     grafike 149px zamiast 23px. Nawigacja zmiennej nie dostaje (renderer
     stawia ja na slajdzie), wiec zostaje przy dotychczasowym wcieciu. */
  padding-inline: var(--fea-tekst-lewa, calc(var(--fea-gutter) + var(--fea-inset)));
}

/* Grafika dosuwa sie do prawej krawedzi siatki, nie kontenera. */
.fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text) .fea-hero__media {
  right: var(--fea-gutter);
  width: min(780px, calc(var(--fea-grid) - 500px));
}

/* Wariant na tle zostaje pelnoekranowy, tylko tekst trzyma siatke. */
.fea-hero.fea-hero--cover .fea-hero__slide { padding-inline: 0; }
.fea-hero.fea-hero--cover .fea-hero__text {
  padding-inline: calc(var(--fea-gutter) + var(--fea-inset));
}

@container hero (max-width: 780px) {
  .fea-hero .fea-hero__slide,
  .fea-hero .fea-hero__nav { padding-inline: var(--fea-pad); }
  .fea-hero.fea-hero--cover .fea-hero__text { padding-inline: var(--fea-pad); }
}


/* Grafika NIE trzyma sie siatki 1280 - RevSlider dosuwa ja do krawedzi
   modulu. Sprawdzone przy dwoch szerokosciach: prawa krawedz obrazu
   lezy 7px od prawej krawedzi modulu i przy 1300, i przy 1700. */
.fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text) .fea-hero__media {
  right: 0;
  width: min(780px, 62cqi);
}


/* ============================================================
   STANY HOVER PRZYCISKOW — odwzorowane z RevSlidera
   Zrodla: data-frame_hover na warstwie (c:#000;bgc:#fff;sp:200;
   e:power1.inOut) oraz reguly .button_rev02:hover:before i
   .button_rev02_white:hover svg z wlasnego CSS slidera.
   Zweryfikowane prawdziwym najechaniem, nie syntetycznym zdarzeniem.
   ============================================================ */
.fea-hero .fea-btn {
  position: relative;
  z-index: 0;
  gap: 0;
  transition: background-color .2s cubic-bezier(.455,.03,.515,.955),
              color .2s cubic-bezier(.455,.03,.515,.955);
}

/* Strzalka: 1.8em szerokosci i margin-left 10px, jak w oryginale.
   Wczesniej mialem sztywne 30px i flexowy gap 14px, przez co przycisk
   byl o 13px wezszy niz RevSliderowy. */
.fea-hero .fea-btn__arrow {
  width: 1.8em;
  height: auto;
  margin-left: 10px;
  transform: none;
  transition: margin-left .5s;
}

/* Zaden przycisk sie nie przesuwa - to byl moj dodatek. */
.fea-hero .fea-btn:hover { transform: none; }
.fea-hero .fea-btn:hover .fea-btn__arrow { transform: none; }

/* Zielony: tlo bieleje, a ::before rysuje zielona obwodke 2px
   podazajaca za scietym narozem. Clip-path zdjety z oryginalu -
   zewnetrzny obrys plus wewnetrzny, co daje pierscien. */
/* background-COLOR, nie skrot: skrot zeruje takze background-image, wiec
   przycisk z grafika tracil ja na najechaniu (git /miedzynarodowa-
   konferencja-spawalnicza/, 2026-09-16). */
.fea-hero .fea-btn--primary:hover { background-color: #fff; }

.fea-hero .fea-btn--primary:hover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #3EE622;
  pointer-events: none;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - 1em),
    calc(100% - 0.5em) calc(100% - 0.5em),
    calc(100% - 1em) 100%,
    0 100%,
    0 0,
    2px 2px,
    2px calc(100% - 2px),
    calc(100% - 1em - 1px) calc(100% - 2px),
    calc(100% - 0.5em - 2px) calc(100% - 0.5em - 1px),
    calc(100% - 2px) calc(100% - 1em - 1px),
    calc(100% - 2px) 2px,
    2px 2px
  );
}

/* Drugi: tlo bieleje, strzalka odjezdza z 10px na 25px przez 0.5s. */
.fea-hero .fea-btn--ghost:hover { background-color: #fff; }   /* patrz komentarz wyzej */
.fea-hero .fea-btn--ghost:hover .fea-btn__arrow { margin-left: 25px; }
.fea-hero .fea-btn--ghost:focus-visible { outline: 0; border: 2px solid #000; }

@media (prefers-reduced-motion: reduce) {
  .fea-hero .fea-btn,
  .fea-hero .fea-btn__arrow { transition: none !important; }
}


/* Motyw zmienia kolor tekstu na zielony przy hover na przyciskach
   i linkach. RevSlider trzyma czarny (frame_hover c:#000). */
.fea-hero .fea-btn:hover,
.fea-hero .fea-btn:focus,
.fea-hero .fea-btn:active,
.fea-hero .fea-btn:hover .fea-btn__arrow { color: var(--luk-ink); }


/* Strzalki nawigacji: RevSlider trzyma je na opacity .5 i rozjasnia
   do 1 przy najechaniu. Bez przesuwania w bok - to byl moj dodatek.
   Kolor #030014 juz sie zgadzal. */
.fea-hero .fea-hero__arrow {
  opacity: .5;
  transform: none;
  transition: opacity .2s cubic-bezier(.455,.03,.515,.955);
}

.fea-hero .fea-hero__arrow:hover,
.fea-hero .fea-hero__arrow:focus-visible { opacity: 1; transform: none; }

.fea-hero .fea-hero__arrow--prev:hover,
.fea-hero .fea-hero__arrow--next:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fea-hero .fea-hero__arrow { transition: none !important; }
}


/* Panel wydarzenia: grafika tez poza ukladem, inaczej obraz 1240x692
   rozpychal scene z 640 do 1064px. Wezsza niz w split, bo tekst
   wydarzenia (tytul + metryczka + rzad odnosnikow) potrzebuje miejsca. */
.fea-hero--event .fea-hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: min(620px, 46cqi);
  z-index: 0;
}

.fea-hero--event .fea-hero__text {
  max-width: min(780px, 58cqi);
  position: relative;
  z-index: 1;
}

@container hero (max-width: 780px) {
  .fea-hero--event .fea-hero__media { position: static; width: 100%; }
  .fea-hero--event .fea-hero__text  { max-width: none; }
}


/* ============================================================
   PRZYPINKA Z NAZWISKIEM + SZEROKOSC ZDJECIA
   RevSlider zapisuje jawna szerokosc warstwy obrazu (np. 450px).
   Bez jej uwzglednienia slot rozciagal zdjecie do 780px - stad
   uwaga "foto za duze". Slot bierze teraz mniejsza z dwoch wartosci.

   Przypinka to w oryginale dwie warstwy: tekst z bialym tlem
   i lewym paddingiem 60px oraz SVG pinezki wsunietej w to miejsce.
   Lezy przy dolnej krawedzi zdjecia. Wzorzec na 100 slajdach.
   ============================================================ */
/* --fea-img-w niesie szerokosc warstwy ze zrodla, przeskalowana siatka
   (na /kariera/ icso: min(1440px, 112,5cqw)). Dotychczasowe
   min(var(--fea-img-w), 62cqi) znaczylo, ze 62cqi wygrywa ZAWSZE, bo
   0,62*W < 1,125*W przy kazdej szerokosci - zmienna ze zrodla nie dochodzila
   do skutku. Zdjecie renderowalo sie 893px zamiast 1440px (-38%), a wraz
   z nim kurczyly sie pinezka i plakietka, ktore stoja w procentach TEGO
   pudelka: podpis 396px wchodzil w 246px i lamal sie na trzy wiersze
   (CLR-21, poz. 18).

   Wartosc zapasowa min(780px, 62cqi) zostaje dla slajdow bez geometrii -
   zmiana dotyka wylacznie tych, ktore --fea-img-w niosa. */
.fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text) .fea-hero__media {
  width: var(--fea-img-w, min(780px, 62cqi));
}

.fea-hero__badge {
  position: absolute;
  left: 45%;
  bottom: 6%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 62cqi;
  padding: 10px 15px;
  background: #fff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--luk-ink);
  text-align: left;
}

.fea-hero__badge-pin {
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: -30px;   /* pinezka wystaje poza lewa krawedz plakietki */
}

.fea-hero__badge span { display: block; }
/* Pogrubienie w podpisie waga 700 — tak jak w warstwie źródłowej. */
.fea-hero__badge strong { font-weight: 700; }

@container hero (max-width: 999px) {
  .fea-hero__badge { font-size: 16px; left: 30%; }
}

@container hero (max-width: 780px) {
  .fea-hero__badge {
    position: static;
    left: auto;
    bottom: auto;
    max-width: none;
    margin: 10px 0 0 30px;
  }
}


/* Przypinka wychodzi poza prawa krawedz zdjecia - w oryginale ma 412px
   przy zdjeciu 450px, zaczynajac sie w 45% jego szerokosci. */
.fea-hero__media { overflow: visible; }

.fea-hero__badge {
  width: max-content;
  max-width: min(420px, 34cqi);
  bottom: 8%;
}


/* Plakietka jest dzieckiem siatki .fea-hero__media, ktora ma
   place-items: stretch - to rozciagalo ja na cala wysokosc (410px
   zamiast 86px). Jawna wysokosc z tresci i zakotwiczenie do dolu. */
.fea-hero__badge {
  top: auto;
  height: auto;
  align-self: end;
  justify-self: start;
}


/* Pinezka to obrazek w .fea-hero__media, wiec lapal ja zamek geometryczny
   (.fea-hero .fea-hero__media img { height:100% }) i rozdymal do 390px,
   a za nim cala plakietke do 410px. Selektor z ta sama specyficznoscia
   (0,2,1), ale pozniej w kolejnosci - wygrywa bez !important. */
.fea-hero .fea-hero__badge img {
  width: 40px;
  height: 40px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  flex: none;
  margin-left: -30px;
}


/* Plakietka kotwiczona do prawej krawedzi zdjecia, nie do 45% jego
   szerokosci. W oryginale zdjecie ma zapas przy krawedzi modulu i
   plakietka moze z niego wystawac; tutaj zdjecie stoi rowno w krawedzi
   kontenera, wiec tekst by sie ucinal. Pinezka nadal lezy na zdjeciu. */
.fea-hero__badge {
  left: auto;
  right: 0;
}

@container hero (max-width: 999px) {
  .fea-hero__badge { left: auto; right: 0; }
}


/* ============================================================
   PRZYPINKA — ODSLANIANA HOVEREM
   W RevSliderze steruje tym akcja warstwy pinezki:
     mouseenter -> start_in  frame_1 warstwy plakietki
     mouseleave -> start_out
   Plakietka NIE jest widoczna w spoczynku. Wczesniej mialem ja
   na stale, bo pomiar zlapal automatyczne wejscie timeline (st:4960)
   i uznalem, ze tak ma byc.

   Pinezka nosi zielony pierscien #00d824 W SPOCZYNKU, a przy najechaniu
   go GUBI. Wczesniej bylo odwrotnie, bo odczytalem sam blok hover i uznalem
   go za stan docelowy. Zrodlo (UM16w_34_revslider_slides, warstwy uid 8 i 11)
   mowi jednoznacznie:
       idle.borderColor = "#00d824", idle.borderWidth = 1px, borderRadius 90px
       hover.borderWidth = 0px
   Kropka bez pierscienia jest wyraznie mniej widoczna niz wzorzec - stad
   zapewne zarzut "brak znacznika" w CLR-21 poz. 18.
   ============================================================ */
.fea-hero__pin {
  position: absolute;
  /* Pozycja z DANYCH, nie zaszyta. 43%/78% mijalo sie z oryginalem
     /kariera/ o 569px w poziomie i 46px w pionie (zrodlo: 82,50%/85,67%).
     Wartosc zapasowa zostaje dla slajdow, ktore geometrii nie dowioza. */
  left: var(--fea-pin-x, 43%);
  top: var(--fea-pin-y, 78%);
  z-index: 3;
  width: var(--fea-pin-size, 40px);
  height: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  /* Pierscien Z DANYCH warstwy, nie zaszyty. Wartosci zapasowe odtwarzaja
     dotychczasowe zachowanie (icso: 1px #00d824 w spoczynku), ale slajd,
     ktory niesie wlasna obwodke, rozstrzyga sam - imn ma idle 0px i 2px
     dopiero na hover (CLR-21, poz. 10 pkt 4). */
  border: var(--fea-pin-ring-w, 1px) solid var(--fea-pin-ring-c, #00d824);
  border-radius: 90px;
  cursor: pointer;
  transition: border-color .25s cubic-bezier(.455,.03,.515,.955),
              border-width .25s cubic-bezier(.455,.03,.515,.955);
}

.fea-hero__pin:hover,
.fea-hero__pin:focus-visible {
  border-width: var(--fea-pin-ring-hw, 1px);
  border-color: var(--fea-pin-ring-hc, transparent);
  outline: none;
}

.fea-hero .fea-hero__pin-icon {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.fea-hero__badge {
  position: absolute;
  left: calc(100% - 10px);
  bottom: -22px;
  z-index: 2;
  display: block;
  width: max-content;
  max-width: min(400px, 30cqi);
  padding: 10px 15px 10px 22px;
  background: #fff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--luk-ink);
  text-align: left;

  /* Ukryta w spoczynku. Uzywam opacity, nie display:none - dzieki temu
     tresc zostaje w drzewie dostepnosci i czytniki ekranu ja widza. */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity .3s cubic-bezier(.455,.03,.515,.955),
              transform .3s cubic-bezier(.455,.03,.515,.955);
}

.fea-hero__pin:hover .fea-hero__badge,
.fea-hero__pin:focus-visible .fea-hero__badge,
.fea-hero__pin:focus-within .fea-hero__badge {
  opacity: 1;
  transform: none;
}

/* Pogrubienie w podpisie waga 700 — tak jak w warstwie źródłowej. */
.fea-hero__badge strong { font-weight: 700; }

@container hero (max-width: 999px) {
  .fea-hero__badge { font-size: 16px; max-width: min(320px, 34cqi); }
}

/* Na dotyku nie ma hoveru - plakietka pokazuje sie od razu, pod zdjeciem. */
@container hero (max-width: 780px) {
  .fea-hero__pin { position: static; width: auto; height: auto; border: 0; display: flex; gap: 12px; align-items: center; }
  .fea-hero__badge {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    max-width: none;
    padding: 10px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fea-hero__badge, .fea-hero__pin { transition: none !important; }
}

/* --- kotwica pozioma zdjecia i plakietki (zgodnie z RevSliderem) ---------
   RevSlider kotwiczy warstwy do siatki tresci 1280, nie do krawedzi okna.
   Zdjecie na /kariera/ stalo 272px za daleko w prawo, przez co plakietka
   z nazwiskiem wychodzila poza ekran. --fea-img-right niesie offset ze
   zrodla; max() pilnuje, zeby przy waskim kontenerze zdjecie nie uciekalo. */
.fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text) .fea-hero__media {
  /* Margines siatki liczony z gridwidth SLIDERA, nie z siatki tresci 1280.
     Przy gridwidth 3840 siatka jest szersza niz kontener, wiec marginesu nie
     ma wcale i warstwa kotwiczy sie do krawedzi sceny - tak jak w oryginale. */
  --fea-img-gut: max(0px, calc((100cqw - min(var(--fea-grid-img, 1280px), 100cqw)) / 2));
  /* Clamp obejmuje TYLKO margines siatki. Wczesniej max(0px, ...) obejmowal
     cala sume i zerowal ujemne odsuniecie warstwy, ktora ma w zrodle
     wychodzic poza siatke. */
  right: calc(var(--fea-img-gut) + var(--fea-img-right, 0px));
}

/* Plakietka wraca pod pinezke: lewa krawedz 10px w prawo od niej,
   gora 6px nizej - dokladnie jak warstwa Napis-tooltip w oryginale. */
.fea-hero .fea-hero__badge {
  /* Podpis ma w zrodle WLASNE wspolrzedne, niezalezne od kropki: na
     /kariera/ stoi w lewo-w-gore od niej (71,18%/62,00% przy kropce
     82,50%/85,67%), a nie w prawo-w-dol jak przy zaszytych 8px/4px. */
  left: var(--fea-badge-x, 8px);
  right: auto;
  top: var(--fea-badge-y, 4px);
  bottom: auto;
  /* Pinezka (40px) zachodzi na plakietke o 30px, wiec wciecie 22px z
     oryginalu chowalo pierwsza litere za kropka. 30px zachodzenia + 12px
     oddechu. */
  padding: 10px 15px 10px 42px;
  max-width: 400px;
}

/* Obramowanie elementu maluje sie NIZEJ niz jego pozycjonowani potomkowie -
   takze ci z ujemnym z-index. Zeby zielony pierscien i sama pinezka zostaly
   nad bialym tlem plakietki, ring przenosimy na pseudoelement, a ikone
   podnosimy warstwe wyzej. */
.fea-hero .fea-hero__pin::after {
  content: "";
  position: absolute;
  /* Ujemny inset o szerokosc obwodki, bo inset liczy sie od padding-boxa
     (przy inset:0 pierscien wychodzil wezszy niz kropka). */
  inset: calc(-1 * var(--fea-pin-ring-w, 1px));
  box-sizing: border-box;
  border: var(--fea-pin-ring-w, 1px) solid var(--fea-pin-ring-c, #00d824);
  border-radius: 90px;
  pointer-events: none;
  z-index: 4;   /* plakietka ma 2 */
  transition: border-color .25s cubic-bezier(.455, .03, .515, .955),
              border-width .25s cubic-bezier(.455, .03, .515, .955),
              inset .25s cubic-bezier(.455, .03, .515, .955);
}

/* Stan po najechaniu TAKZE ze zrodla. icso pierscien tu gubi
   (hover.borderWidth = 0px), imn przeciwnie - dopiero go zaklada
   (hover 2px #00d824). Wartosci zapasowe zostawiaja dotychczasowe
   zachowanie dla slajdow bez tych danych. */
.fea-hero .fea-hero__pin:hover::after,
.fea-hero .fea-hero__pin:focus-visible::after {
  inset: calc(-1 * var(--fea-pin-ring-hw, 1px));
  border-width: var(--fea-pin-ring-hw, 1px);
  border-color: var(--fea-pin-ring-hc, transparent);
}

/* Pulsowanie kropki (timeline.loop w zrodle: skala 0,8, 2000ms, yoyo).
   Pod prefers-reduced-motion nie ruszamy niczego. */
@keyframes fea-pin-puls {
  from { transform: scale(1); }
  to   { transform: scale(var(--fea-pin-puls, .8)); }
}

@media (prefers-reduced-motion: no-preference) {
  .fea-hero__przypinka[style*="--fea-pin-puls"] .fea-hero__pin-icon {
    animation: fea-pin-puls var(--fea-pin-puls-czas, 2000ms) linear infinite alternate;
  }
}

.fea-hero .fea-hero__pin-icon {
  position: relative;
  z-index: 4;
}

.fea-hero .fea-hero__pin:hover .fea-hero__badge,
.fea-hero .fea-hero__pin:focus-visible .fea-hero__badge,
.fea-hero .fea-hero__pin:focus-within .fea-hero__badge {
  opacity: 1;
  transform: none;
}

@container hero (max-width: 780px) {
  .fea-hero .fea-hero__badge {
    position: static; left: auto; top: auto; max-width: none;
    opacity: 1; transform: none;
    padding-left: 15px;   /* pinezka nie zachodzi, wiec bez zapasu */
  }
}


/* ============================================================
   MOBILE: przypinka i zdjecie
   RevSlider na waskim ekranie chowa OBIE warstwy - i pinezke (layer-5),
   i podpis (layer-4) - a zdjecie daje 216x260 wysrodkowane. My podpis
   zostawiamy, bo niesie tresc (imie i nazwisko osoby ze zdjecia), ale
   kropka znika: na dotyku nie ma najechania, wiec nie ma czego wyzwalac.
   Podpis ladzie NA zdjeciu, przy jego dolnej krawedzi.

   Zdjecie: --fea-img-w niesie skale desktopowa (tu 137px), a sam obrazek
   renderowal sie 427px i wychodzil poza ekran. Na mobile oddajemy mu
   pelna szerokosc kontenera i naturalna wysokosc.
   ============================================================ */
@container hero (max-width: 780px) {
  .fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text) .fea-hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    justify-items: center;
  }

  .fea-hero .fea-hero__media img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* Przypinki i podpisu na telefonie nie ma wcale - chowa je blok
     "PRZYPINKA - UKLAD OSTATECZNY" ponizej, zeby regula stala w jednym
     miejscu i wygrywala kaskade. */
}


/* ============================================================
   PRZYPINKA — UKLAD OSTATECZNY
   Plakietka jest rodzenstwem pinezki, wiec pozycjonuje sie wzgledem
   zdjecia. Wyzwala ja hover pinezki przez :has() na kontenerze.
   Trzy zakresy, bo przy jednym ukladzie plakietka albo wychodzila poza
   ekran (834px: 103px za krawedz), albo naklada sie na pinezke:

     >= 1200px  obok pinezki, jak w RevSliderze (dx 10, dy 6)
     781-1199   pasem POD pinezka, na pelna szerokosc zdjecia
     <= 780     pasem przy dolnej krawedzi zdjecia, bez pinezki
                (na dotyku nie ma najechania, wiec nie ma czego wyzwalac)
   ============================================================ */
.fea-hero .fea-hero__badge {
  position: absolute;
  z-index: 2;
  display: block;
  width: max-content;
  background: #fff;
  line-height: 1.3;
  font-weight: 400;
  color: var(--luk-ink);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity .3s cubic-bezier(.455, .03, .515, .955),
              transform .3s cubic-bezier(.455, .03, .515, .955);
}

/* Opakowanie pary kropka + podpis. display: contents, zeby obie warstwy
   nadal pozycjonowaly sie wzgledem zdjecia, a nie wzgledem opakowania -
   niesie wylacznie zmienne geometrii i domyka selektor :has(). */
.fea-hero__przypinka { display: contents; }

/* :has() na PARZE, nie na kontenerze mediow: przy dwoch przypinkach
   najechanie na jedna kropke zapalalo oba podpisy naraz. */
.fea-hero__przypinka:has(.fea-hero__pin:hover) .fea-hero__badge,
.fea-hero__przypinka:has(.fea-hero__pin:focus-visible) .fea-hero__badge,
.fea-hero__przypinka:has(.fea-hero__pin:focus-within) .fea-hero__badge {
  opacity: 1;
  transform: none;
}

/* Przegladarki bez :has() — plakietka widoczna na stale, zeby tresc
   nie przepadla zupelnie. */
@supports not selector(:has(*)) {
  .fea-hero .fea-hero__badge { opacity: 1; transform: none; }

  /* Bez wspolrzednych ze zrodla wszystkie podpisy siadaja w tym samym
     miejscu (zapasowe 43%/78%) i przy dwoch parach jeden przykrywa drugi.
     Wtedy wracaja do toku tresci i staja jeden pod drugim. Przypinki
     z wlasna geometria zostaja tam, gdzie stoja w oryginale. */
  .fea-hero__przypinka:not([style*="--fea-badge-x"]) {
    display: block;
    width: 100%;
  }
  .fea-hero__przypinka:not([style*="--fea-badge-x"]) .fea-hero__badge {
    position: static;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 2px 0 0;
  }
}

/* --- obok pinezki: 43% + 10px w poziomie, 78% + 6px w pionie --- */
@container hero (min-width: 1200px) {
  .fea-hero .fea-hero__badge {
    left: var(--fea-badge-x, calc(43% + 10px));
    right: auto;
    top: var(--fea-badge-y, calc(78% + 6px));
    bottom: auto;
    /* Zapas na chowanie pierwszej litery potrzebny tylko wtedy, gdy kropka
       faktycznie nachodzi na podpis - czyli przy pozycji zapasowej. Gdy
       podpis ma wlasne wspolrzedne ze zrodla, stoi obok kropki i wciecie
       jest takie jak w oryginale.

       Wciecie i stopien pisma ida ze ZRODLA (idle.padding, idle.fontSize),
       przeliczone --fea-jedn - ta sama jednostka co wspolrzedne warstw.
       Warstwa podpisu imn ma padding [20,40,20,140] i pismo 41px, czyli
       @1440 wciecie 52,5px i litery 15,4px. Zaszyte 10px 15px / 18px
       stawialo napis 37px za wczesnie, wprost pod zielonym pierscieniem
       kropki (CLR-21, poz. 10 pkt D). */
    padding: var(--fea-badge-pad, 10px 15px);
    /* Szerokosc plakietki ze zrodla, nie max-content: oryginal ma 261,4px
       @1440, nasza dopasowywala sie do tresci i miala 173,3px. */
    width: var(--fea-badge-w, max-content);
    max-width: var(--fea-badge-w, 400px);
    /* Wysokosc plakietki ze zrodla. Warstwa imn ma jawne 136px siatki
       (51px @1440), a nasza dopasowywala sie do tresci i konczyla na 35px -
       bialego tla brakowalo od dolu (CLR-21, poz. 10 pkt E). min-height,
       nie height: dluzszy podpis ma sie rozrosnac, nie wyciec. */
    min-height: var(--fea-badge-h, auto);
    font-size: var(--fea-badge-fs, 18px);
    /* Interlinia ze ZRODLA (s:18;l:22 na /kariera/), przeliczona ta sama
       jednostka co stopien pisma. Zaszyte 1,3 stopnia pisma dawalo 23,4px
       zamiast 22px i rozpychalo pudelko o 11-15px (CLR-21, poz. 18 pkt A). */
    line-height: var(--fea-badge-lh, 1.3);
  }

  .fea-hero__przypinka:not([style*="--fea-badge-x"]) .fea-hero__badge {
    padding-left: 42px;
  }
}

/* --- pod pinezka: pinezka zostaje na zdjeciu, plakietka pod nia --- */
@container hero (min-width: 781px) and (max-width: 1199px) {
  .fea-hero .fea-hero__badge {
    left: 0;
    right: 0;
    top: calc(var(--fea-pin-y, 78%) + 46px);
    bottom: auto;
    width: auto;
    max-width: none;
    padding: 10px 15px;
    font-size: 16px;
    transform: translateY(-8px);
  }

  .fea-hero__przypinka:has(.fea-hero__pin:hover) .fea-hero__badge,
  .fea-hero__przypinka:has(.fea-hero__pin:focus-visible) .fea-hero__badge {
    transform: none;
  }
}

/* --- przy dolnej krawedzi zdjecia, bez pinezki --- */
@container hero (max-width: 780px) {
  .fea-hero .fea-hero__pin { display: none; }

  /* Para przestaje byc display:contents i wraca do toku tresci. Reguly
     ponizej pisano dla JEDNEJ przypinki: kazda plakietka dostawala
     position:absolute i bottom:0, wiec przy dwoch parach (na /kariera/
     icso sa dwie - Marek i Simona) obie ladowaly w tym samym prostokacie
     (zmierzone: x=20 y=209 w=178 h=137 dla obu), widac bylo tylko
     ostatnia w DOM, a druga lezala pod nia jako "nadmiarowy tekst"
     (CLR-21, poz. 18). Teraz podpisy staja jeden POD drugim. */
  .fea-hero__przypinka {
    display: block;
    width: 100%;
  }

  /* Podpis, ktorego ZRODLO na telefonie nie pokazuje (visibility.m = false
     albo hover bez odpowiednika na dotyku). Chowamy tylko taki: wczesniej
     regula obejmowala KAZDY podpis i kasowala takze te, ktore oryginal na
     telefonie rysuje - plakietka "Thermal batteries" na imn /en/ stoi na
     produkcji przy 390 px pod adresem 135,165 i ma 99x56 px
     (pomiar 2026-09-30). Tresc zostaje w drzewie dostepnosci. */
  .fea-hero .fea-hero__badge--bez-mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    inset: auto;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 1;
    transform: none;
    pointer-events: none;
  }

  /* visibility.m = false w zrodle: tej pary na telefonie NIE MA. Na
     /kariera/ icso dotyczy to obu kropek i obu podpisow - pomiar produkcji
     @390 daje dla warstw 8-11 prostokat 0x0, a my zostawialismy podpisy na
     stale i wygladalo to jak nadmiarowy tekst (CLR-21, poz. 18).

     Chowamy je z KADRU, a nie z drzewa dostepnosci: tresc niesie imie
     i nazwisko osoby ze zdjecia i czytnik ekranu ma prawo ja przeczytac.
     Stad schowek 1x1 z clip-path zamiast display: none. */
  .fea-hero .fea-hero__przypinka--bez-mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Podpis bez kropki: nie ma wyzwalacza, wiec stoi na stale pasem przy
   dolnej krawedzi zdjecia - w kazdym zakresie szerokosci. */
.fea-hero .fea-hero__badge--stala {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: auto;
  max-width: none;
  padding: 10px 15px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}


/* ============================================================
   TYPOGRAFIA ZE ZRODLA
   Stopien pisma, interlinia, kolor i kroj sa zapisane per warstwa
   RevSlidera. Zaszyte 64px/72px pochodzilo ze slidera bloga 1; w sieci
   naglowki maja od 24 do 205px, a kroje to Light (1479 warstw), Regular
   (211) i Bold (9). Wartosci wchodza zmiennymi z atrybutu style slajdu,
   a domyslne clamp() zostaje dla slajdow bez zapisanej typografii.
   ============================================================ */
.fea-hero .fea-hero__slide .fea-hero__title {
  font-family: var(--fea-h-font, "TT Supermolot Light"), var(--fea-fallback);
  font-size: var(--fea-h-size, clamp(30px, 5cqi, 64px));
  /* Interlinia ze zrodla jest liczona dla JEDNEJ linii. Gdy naglowek sie
     zawija - a zawija sie, bo kolumna tekstu jest wezsza niz scena
     RevSlidera - odstep 67px przy pismie 35px rozjezdza sie na dwie linie.
     Limit 1.35em nie rusza naglowkow, ktore i tak sie miescily. */
  line-height: min(var(--fea-h-lh, 1.14em), 1.35em);
  color: var(--fea-h-color, inherit);
}

.fea-hero .fea-hero__slide .fea-hero__lead,
.fea-hero .fea-hero__slide .fea-hero__tagline {
  font-family: var(--fea-d-font, "TT Supermolot Light"), var(--fea-fallback);
  font-size: var(--fea-d-size, clamp(17px, 1.9cqi, 24px));
  line-height: var(--fea-d-lh, 1.42);
  color: var(--fea-d-color, inherit);
}


/* ============================================================
   ARCHETYP: TABLICA WYDARZEN
   Nadtytul, tytul i rzad kart; z prawej osobny blok odnosnika.
   Wszystkie wymiary sa wielokrotnoscia --fea-jedn, czyli jednego
   piksela siatki projektowej slidera. Renderer emituje ja jako
   min(1px, 100cqw / siatka), wiec przy waskim kontenerze uklad
   skaluje sie proporcjonalnie, a przy szerokim zatrzymuje na 1:1 -
   dokladnie tak, jak RevSlider skaluje swoje warstwy.
   ============================================================ */
/* Klasa siedzi na SLAJDZIE, nie na kontenerze: jeden slider miesza
   uklady, wiec ustawienie calego slidera nie wystarcza. */
.fea-hero .fea-hero__slide--tablica,
.fea-hero .fea-hero__slide--rozdroze {
  display: block;
  padding-block: calc(78 * var(--fea-jedn)) calc(120 * var(--fea-jedn));
  padding-inline: 0;
}

.fea-tablica, .fea-rozdroze { container-type: inline-size; }

.fea-tablica__nad,
.fea-tablica__tytul {
  margin: 0 0 0 calc(186 * var(--fea-jedn));
  font-family: "TT Supermolot Regular", var(--fea-fallback);
  font-weight: 400;
  font-size: calc(101 * var(--fea-jedn));
  line-height: calc(122 * var(--fea-jedn));
  letter-spacing: normal;
}

.fea-tablica__nad   { color: #32d619; }
.fea-tablica__tytul { color: var(--luk-ink, #0c0c0c); }

.fea-tablica__rzad {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: calc(180 * var(--fea-jedn));
  margin: calc(150 * var(--fea-jedn)) calc(186 * var(--fea-jedn)) 0;
}

.fea-tablica__karty {
  display: flex;
  flex-wrap: wrap;
  gap: calc(208 * var(--fea-jedn));
}

/* Karta trzyma szerokosc ze zrodla zamiast rozpychac sie na kolumne. */
.fea-tablica__karta {
  flex: 0 1 calc(454 * var(--fea-jedn));
  display: flex;
  flex-direction: column;
  /* 23px w zrodle: dol plakatu 1228, gora pigulki 1251 */
  gap: calc(23 * var(--fea-jedn));
  align-items: flex-start;
}

.fea-hero .fea-tablica__karta img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 454 / 723;
  object-fit: cover;
}

.fea-tablica__pigulka {
  display: block;
  /* Pigulka jest wezsza od karty: 408 przy plakacie 454, wyrownana do lewej. */
  width: calc(408 * var(--fea-jedn));
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  background: #44d62c;
  color: #0c0c0c;
  border-radius: 999px;
  /* Pomiar na git / przy 1440: oryginal ma pigulke 153x24 z interlinia 24
     i wcieciem 0 15, a napis wage 500. Nasza skladala te sama wysokosc
     z interlinii 14 i wciecia 5,25, wiec napis siedzial wyzej i byl
     cienszy (CLR-21, poz. 1). Liczby w pikselach siatki: 24/0,375 = 64
     interlinii i 15/0,375 = 40 wciecia. */
  padding: 0 calc(40 * var(--fea-jedn));
  font-family: "TT Supermolot Regular", var(--fea-fallback);
  font-weight: 500;
  font-size: calc(25 * var(--fea-jedn));
  line-height: calc(64 * var(--fea-jedn));
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background-color .2s cubic-bezier(.455, .03, .515, .955);
}

.fea-tablica__pigulka:hover,
.fea-tablica__pigulka:focus-visible { background: #33c01c; outline: none; }

.fea-tablica__blok { justify-self: end; }
.fea-hero .fea-tablica__blok img {
  display: block;
  width: calc(519 * var(--fea-jedn));
  height: auto;
  max-height: none;
}

/* Cztery karty plus blok nie mieszcza sie w jednym rzedzie na waskim
   ekranie - blok schodzi pod karty, karty lamia sie po dwie. */
@container (max-width: 1100px) {
  .fea-tablica__rzad { grid-template-columns: 1fr; gap: calc(120 * var(--fea-jedn)); }
  .fea-tablica__blok { justify-self: stretch; }
  .fea-hero .fea-tablica__blok img { width: 100%; max-width: calc(1000 * var(--fea-jedn)); }
}

@container (max-width: 560px) {
  .fea-tablica__karta { flex-basis: calc(50% - calc(104 * var(--fea-jedn))); }
  .fea-tablica__nad,
  .fea-tablica__tytul { font-size: calc(150 * var(--fea-jedn)); line-height: 1.18; }
}


/* ============================================================
   ARCHETYP: ROZDROZE
   Zdanie nad panorama, a na panoramie etykiety przypiete do jej
   punktow. Wspolrzedne w procentach grafiki, nie w pikselach.
   ============================================================ */
.fea-rozdroze__zdanie {
  margin: 0 0 0 calc(186 * var(--fea-jedn));
  font-family: "TT Supermolot Regular", var(--fea-fallback);
  font-weight: 400;
  font-size: calc(101 * var(--fea-jedn));
  line-height: calc(122 * var(--fea-jedn));
  color: var(--luk-ink, #0c0c0c);
  letter-spacing: normal;
}

.fea-rozdroze__zdanie strong { font-weight: 400; color: #44d62c; }

.fea-rozdroze__panorama {
  position: relative;
  margin: calc(120 * var(--fea-jedn)) 0 0;
}

.fea-hero .fea-rozdroze__panorama > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}

.fea-rozdroze__pin {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--fea-jedn));
  text-decoration: none;
  color: var(--luk-ink, #0c0c0c);
  font-family: "TT Supermolot Regular", var(--fea-fallback);
  font-weight: 400;
  font-size: calc(40 * var(--fea-jedn));
  line-height: calc(45 * var(--fea-jedn));
  max-width: calc(620 * var(--fea-jedn));
}

.fea-hero .fea-rozdroze__ikona {
  flex: none;
  width: calc(44 * var(--fea-jedn));
  height: auto;
  max-height: none;
  margin-top: calc(2 * var(--fea-jedn));
  transition: transform .2s cubic-bezier(.455, .03, .515, .955);
}

/* Etykieta jest odnosnikiem, wiec musi to po sobie pokazac - w oryginale
   nie reaguje na najechanie wcale. */
.fea-rozdroze__pin span { border-bottom: 1px solid transparent; }
a.fea-rozdroze__pin:hover span,
a.fea-rozdroze__pin:focus-visible span { border-bottom-color: #44d62c; }
a.fea-rozdroze__pin:hover .fea-rozdroze__ikona,
a.fea-rozdroze__pin:focus-visible .fea-rozdroze__ikona { transform: translateX(25%); }

@container (max-width: 560px) {
  .fea-rozdroze__zdanie { font-size: calc(150 * var(--fea-jedn)); line-height: 1.18; }
  .fea-rozdroze__pin { font-size: calc(64 * var(--fea-jedn)); line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
  .fea-tablica__pigulka,
  .fea-rozdroze__ikona { transition: none !important; }
}

/* Drugi naglowek slajdu: ten sam stopien i kroj co pierwszy, tylko bez
   dodatkowego odstepu nad soba - w zrodle obie linie stoja jedna pod druga. */
.fea-hero .fea-hero__slide .fea-hero__title--drugi {
  margin-top: calc(var(--fea-h-lh, 1.14em) * 0.18);
  /* Drugi naglowek ma czesto inny kolor i kroj niz pierwszy - w sieci to
     zwykle zestawienie czarnego z zielonym. Fallback na wartosci pierwszego,
     zeby slajdy bez zapisanego koloru wygladaly jak dotad. */
  color: var(--fea-h2-color, var(--fea-h-color, inherit));
  font-family: var(--fea-h2-font, var(--fea-h-font, "TT Supermolot Light")), var(--fea-fallback);
}

/* Kreska dekoracyjna pod naglowkiem. W zrodle to osobna warstwa z plaska
   grafika (456x4 px), a nie text-decoration - dlatego <img>, nie podkreslenie. */
.fea-hero .fea-hero__kreska {
  display: block;
  width: min(456px, 36cqi);
  height: auto;
  max-height: none;
  margin: 10px 0 18px;
}

/* Grafika stojaca we wlasnym miejscu sceny (np. logotyp w rogu slajdu).
   Wspolrzedne przychodza z rendererem jako wielokrotnosc --fea-jedn,
   czyli jednego piksela siatki projektowej slidera. */
.fea-hero .fea-hero__naklejka {
  position: absolute;
  /* Wysokosc z proporcji obrazu; w zrodle warstwy bywaja wyzsze niz scena
     i sa przycinane - u nas tez, bo slajd ma overflow: hidden. */
  height: auto;
  max-height: none;
  max-width: none;
  z-index: 4;
  pointer-events: none;
}

/* Pinezka-naklejka: kropka na slajdzie BEZ zdjecia (iel /kariera/).
   W oryginale ma pierscien ze zrodla (1 px #00d824, border-box: obrazek
   38 px w pudelku 40), po najechaniu pierscien znika (frame_hover
   bow:0), a akcja mouseenter pokazuje podpis - choc pusty, to biale
   pudelko 412x42. U nas kropka na nic nie reagowala, a na telefonie,
   gdzie zrodlo jej nie pokazuje, wychodzila 195 px wielka
   (CLR-34 poz. 102). Podpis stoi w DOM-ie tuz za kropka. */
.fea-hero .fea-hero__naklejka--pinezka {
  pointer-events: auto;
  cursor: pointer;
  box-sizing: border-box;
  border: var(--fea-n-ring, 0);
  border-radius: 50%;
  z-index: 5;
  outline: none;
}
.fea-hero .fea-hero__naklejka--pinezka:hover,
.fea-hero .fea-hero__naklejka--pinezka:focus-visible {
  border: var(--fea-n-ring-h, var(--fea-n-ring, 0));
}
.fea-hero .fea-hero__naklejka-podpis {
  position: absolute;
  z-index: 5;
  margin: 0;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  font-family: inherit;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  pointer-events: none;
}
.fea-hero .fea-hero__naklejka--pinezka:hover + .fea-hero__naklejka-podpis,
.fea-hero .fea-hero__naklejka--pinezka:focus-visible + .fea-hero__naklejka-podpis {
  opacity: 1;
  visibility: visible;
}

/* Ponizej progu skladania slajd przestaje byc plansza o stalych
   wspolrzednych - naklejka wraca do toku tresci. */
@container hero (max-width: 780px) {
  .fea-hero .fea-hero__naklejka {
    position: static;
    width: min(220px, 50cqi) !important;
    left: auto;
    top: auto;
    margin: 18px 0 0;
  }
}

/* Odsuniecie glownej grafiki od gory sceny. Ustawiane tylko wtedy, gdy
   silnik potrafil je policzyc z kotwicy pionowej warstwy - wiec slajdy
   bez jawnej wysokosci zachowuja dotychczasowe rozciagniecie na wysokosc. */
/* Ta sama specyficznosc co regula ustawiajaca media na top:0; bottom:0,
   plus atrybut - inaczej odsuniecie od gory przegrywalo i nie dzialalo. */
.fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text)
  .fea-hero__media[style*="--fea-img-top"] {
  top: calc(var(--fea-img-top) * var(--fea-jedn));
  bottom: auto;
  height: auto;
}

@container hero (max-width: 780px) {
  .fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text)
    .fea-hero__media[style*="--fea-img-top"] {
    top: auto;
    height: auto;
  }
}

/* Przycisk stojacy we wlasnym miejscu sceny. Wspolrzedne przychodza
   z rendererem jako wielokrotnosc --fea-jedn, czyli jednego piksela siatki
   projektowej slidera - tak samo jak przy naklejkach. */
.fea-hero .fea-btn--stoi {
  position: absolute;
  z-index: 5;
  white-space: nowrap;
}

/* Ponizej progu skladania slajd przestaje byc plansza o stalych
   wspolrzednych: przyciski wracaja do toku tresci i ukladaja sie w rzad. */
@container hero (max-width: 780px) {
  .fea-hero .fea-btn--stoi {
    position: static;
    width: auto !important;
    left: auto;
    right: auto;
    top: auto;
    margin: 0 10px 10px 0;
  }
}

/* Przycisk z ksztaltem przeniesionym ze zrodla: bez wcietego obrysu
   Lukasiewicza, bo w oryginale jest pigulka albo samym tekstem. */
.fea-hero .fea-btn--wlasny {
  clip-path: none;
  border: 0;
  box-shadow: none;
  /* Napis zostaje taki, jaki jest w zrodle. Wymuszone wersaliki i odstepy
     miedzyliterowe rozpychaly pigulki o 40px i sasiednie wchodzily na siebie. */
  text-transform: none;
  letter-spacing: normal;
}
.fea-hero .fea-btn--wlasny::before,
.fea-hero .fea-btn--wlasny::after { content: none; }
/* Takze PO NAJECHANIU: regula pierscienia (.fea-btn--primary:hover::before)
   ma pseudoklase, wiec bije sam reset wyzej i obwodka wracala na kazdy
   przycisk primary o ksztalcie ze zrodla - takze tam, gdzie oryginal jej
   nie ma (przezroczysty "Poznaj cala oferte" na /produkty-i-uslugi/,
   pomiar 2026-09-14). Przyciski z klasa button_rev02 dostaja pierscien
   z powrotem regula portowana nizej - pozniejsza w arkuszu, wiec wygrywa. */
.fea-hero .fea-btn--wlasny:hover::before { content: none; }

/* Tlo po najechaniu z danych warstwy (hover.backgroundColor). Zmienna
   przychodzi inline z rendererem; !important, bo tlo spoczynkowe tez
   stoi inline i regula z arkusza normalnie by z nim przegrala:
   wypelniony guzik na /produkty-i-uslugi/ ma bielec, a nie bielal. */
.fea-hero .fea-btn[style*="--fea-btn-bg-h"]:hover {
  /* background-COLOR, nie skrot: skrot zeruje background-image, a zrodlo
     podaje tu czesto "rgba(0,0,0,0)" wlasnie dlatego, ze tlo ma zostac
     nietkniete - pigulka z grafika tracila ja na najechaniu. */
  background-color: var(--fea-btn-bg-h) !important;
}

/* ============================================================
   PRZYCISK STOJACY WE WLASNYM MIEJSCU
   Wspolrzedne przychodza jako zmienne --bx / --by / --bw (piksele siatki
   projektowej), osobno dla trzech szerokosci: bez sufiksu desktop,
   -t tablet, -m telefon. Arkusz przelacza je zapytaniami kontenera,
   bo atrybut style nie pomiesci zapytan medialnych.
   ============================================================ */
.fea-hero .fea-btn--stoi {
  --bx-akt: var(--bx, 0);
  --by-akt: var(--by, 0);
  --bw-akt: var(--bw, 0);
  position: absolute;
  top: calc(var(--by-akt) * var(--fea-jedn));
  white-space: nowrap;
  z-index: 5;
}

.fea-hero .fea-btn--stoi.fea-btn--kot-lewo {
  left: calc(var(--fea-margines) + var(--bx-akt) * var(--fea-jedn));
}
.fea-hero .fea-btn--stoi.fea-btn--kot-prawo {
  right: calc(var(--fea-margines) + var(--bx-akt) * var(--fea-jedn));
}
.fea-hero .fea-btn--stoi.fea-btn--kot-srodek {
  left: calc(50% + var(--bx-akt) * var(--fea-jedn));
  transform: translateX(-50%);
}

/* Szerokosc tylko wtedy, gdy podana - inaczej z tresci.
   --bw to data-dim w:... warstwy zrodlowej, czyli szerokosc ZAWIJANIA,
   a nie szerokosc jednej linii. RevSlider lamie w niej "CENTRUM NAPEDOW
   I MASZYN ELEKTRYCZNYCH" na dwa wiersze (h=58 zamiast 28). Przy nowrap
   napis wychodzil poza pudelko, a na /konferencja-pemine/,
   /en/...-pemine/ i /wyposazenie-ce/ takze poza scene - o 60, 61 i 32px
   przy 1920 (CLR-21, regresja przyciskow). Nowrap zostaje wylacznie tam,
   gdzie szerokosci ze zrodla nie ma i wynika ona z tresci. */
/* Selektor z DWUKROPKIEM. Bez niego [style*="--bw"] lapie takze zmienne
   telefonowe i tabletowe (--bw-m, --bw-t), ktore przy szerokim ekranie nie
   dotycza niczego: --bw-akt schodzilo wtedy do zapasowego 0 i pigulka
   kurczyla sie do samego wciecia. Na git /29-seminarium-ptm/ "Organizatorzy"
   mialo 56 px zamiast 124, a "Rejestracja i dane do przelewu" zawijalo sie
   na trzy wiersze (pomiar 2026-10-07). */
.fea-hero .fea-btn--stoi[style*="--bw:"] {
  width: calc(var(--bw-akt) * var(--fea-jedn));
  white-space: normal;
}

@container hero (max-width: 1024px) {
  .fea-hero .fea-btn--stoi {
    --bx-akt: var(--bx-t, var(--bx, 0));
    --by-akt: var(--by-t, var(--by, 0));
    --bw-akt: var(--bw-t, var(--bw, 0));
  }
  /* Szerokosc zawijania podana dopiero dla tabletu - patrz uwaga wyzej. */
  .fea-hero .fea-btn--stoi[style*="--bw-t:"] {
    width: calc(var(--bw-akt) * var(--fea-jedn));
    white-space: normal;
  }
}

@container hero (max-width: 780px) {
  .fea-hero .fea-btn--stoi {
    --bx-akt: var(--bx-m, var(--bx-t, var(--bx, 0)));
    --by-akt: var(--by-m, var(--by-t, var(--by, 0)));
    --bw-akt: var(--bw-m, var(--bw-t, var(--bw, 0)));
  }
  .fea-hero .fea-btn--stoi[style*="--bw-m:"] {
    width: calc(var(--bw-akt) * var(--fea-jedn));
    white-space: normal;
  }
}

/* Przycisk graficzny: grafika jest calym tlem, napis lezy na niej,
   a wciecie robi mu miejsce obok albo pod ikona. */
.fea-hero .fea-btn--graf {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  clip-path: none;
  text-transform: none;
  letter-spacing: normal;
}

.fea-hero .fea-btn--graf::before,
.fea-hero .fea-btn--graf::after { content: none; }

/* Strzalka widgetu nie ma sensu na przycisku, ktory niesie wlasna grafike. */
.fea-hero .fea-btn--graf .fea-btn__arrow { display: none; }

/* ============================================================
   PASEK AKCJI
   Jeden rzad pod kolumna tekstu: akcje glowne, nawigacja w
   dotychczasowym stylu, narzedzia odsuniete na koniec i oddzielone
   kreska. Kolejnosc i zawijanie wynikaja z rol, nie ze wspolrzednych.
   ============================================================ */
.fea-hero .fea-hero__akcje {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 22px;
  margin-top: 26px;
}

/* Przyciski zawijaja sie w swojej kolumnie; narzedzia stoja przy prawej
   krawedzi calego paska, a nie na koncu przypadkowego wiersza. */
.fea-hero .fea-hero__akcje-lewa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 12px;
}

/* Rzad odnosnikow wchodzi do paska jako zwykle pozycje, wiec jego
   wlasne opakowanie juz nie ustawia kierunku ani odstepow. */
.fea-hero .fea-hero__akcje .fea-hero__links { display: contents; }

/* --- akcja glowna: pigulka z grafika ze zrodla --- */
.fea-hero .fea-glowna {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 30px 0 62px;
  border: 0;
  border-radius: 999px;
  background: no-repeat left center / auto 100%;
  color: var(--fea-kolor, var(--luk-ink, #0c0c0c));
  font-family: var(--fea-bold), var(--fea-fallback);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34, 1.36, .64, 1),
              box-shadow .2s cubic-bezier(.455, .03, .515, .955),
              color .2s cubic-bezier(.455, .03, .515, .955),
              filter .2s cubic-bezier(.455, .03, .515, .955);
}

/* Najechanie: uniesienie z cieniem plus zmiana koloru napisu ze zrodla
   (na pigulkach bialy). Sama zmiana jasnosci o 6% byla praktycznie
   niewidoczna, bo grafika przycisku i tak jest mocno nasycona. */
.fea-hero .fea-glowna:hover,
.fea-hero .fea-glowna:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -6px rgba(3, 0, 20, .38);
  color: var(--fea-kolor-hover, #fff);
  filter: brightness(1.05) saturate(1.08);
  outline: none;
}

.fea-hero .fea-glowna:focus-visible {
  box-shadow: 0 12px 24px -6px rgba(3, 0, 20, .38), 0 0 0 3px rgba(68, 214, 44, .5);
}

.fea-hero .fea-glowna:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px -3px rgba(3, 0, 20, .34);
}

/* --- narzedzia: ikona z podpisem, na koncu paska --- */
.fea-hero .fea-hero__narzedzia {
  display: inline-flex;
  gap: 22px;
  padding-left: 22px;
  border-left: 1px solid rgba(3, 0, 20, .18);
}

/* Pasek narzedzi we WLASNYM miejscu sceny.
   Zrodlo daje ikonom "Kontakt" i "Do pobrania" jawne x = 3470 / 3620 przy
   siatce 3840 - prawa krawedz sceny - i tam stoja na produkcji. U nas szly
   w toku tresci kolumny tekstu, czyli 1607px od swojego miejsca, i wchodzily
   na pigulki (76px na /konferencja-pemine/, 56px na /wyposazenie-ce/,
   lacznie 11 stron).

   Blok jest dzieckiem SLAJDU (renderer odklada go przez bufor stojacych),
   wiec odsuniecia licza sie od krawedzi sceny - tak samo jak dla .fea-btn--stoi.
   Kreska oddzielajaca znika: nie ma juz czego oddzielac od reszty paska. */
.fea-hero .fea-hero__narzedzia--stoi {
  position: absolute;
  top: calc(var(--by, 0) * var(--fea-jedn));
  padding-left: 0;
  border-left: 0;
  z-index: 5;
  /* Odstep ikon ze ZRODLA (3620 - 3470 - 122 = 28 na slajdach git),
     przeliczony ta sama jednostka co odsuniecie calego paska. */
  gap: calc(var(--ng, 28) * var(--fea-jedn));
}

/* Pudelko stojacego paska skaluje sie razem z odsunieciem.
   Odsuniecie szlo przez --fea-jedn, ale ikona miala sztywne 76px szerokosci,
   wiec pasek zajmowal 12,1% sceny przy kontenerze 1440 i 17,0% przy 1024,
   przy 7,1% w oryginale (274 z 3840). Dwuikonowy pasek /konferencja-pemine/
   wychodzil przez to 35px poza scene @1440, a .fea-hero__stage ma
   overflow:hidden - "Do pobrania" bylo przyciete o polowe.
   Wartosci --nw / --nh / --ng wypuszcza renderer z wymiarow warstwy
   zrodlowej; liczby zapasowe (122 / 157 / 28) odpowiadaja ikonie uzywanej
   dzis w calej sieci i chronia slajdy sprzed migracji. */
.fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie {
  width: calc(var(--nw, 122) * var(--fea-jedn));
  /* Wysokosc pudelka TEZ ze zrodla, nie z tresci. Bez niej podpis lamiacy
     sie na dwa wiersze rozpychal ikone w dol i pasek schodzil ponizej
     kadru mimo poprawnego odsuniecia - na seminariach git warstwa konczy
     sie w zrodle na 1170+248 = 1418 z 1440, a nasze pudelko schodzilo
     do 1477. */
  height: calc(var(--nh, 157) * var(--fea-jedn));
  justify-content: flex-end;
  gap: calc(var(--nw, 122) * .08 * var(--fea-jedn));
  font-size: calc(var(--nf, 24) * var(--fea-jedn));
  line-height: 1.2;
}

/* Ikona zabiera to, co zostaje po podpisie - dzieki temu pudelko trzyma
   wysokosc warstwy, a dluzszy napis skraca grafike zamiast wychodzic poza
   kadr. Proporcje pilnuje background-size: contain z reguly wyzej. */
.fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie i {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
}

.fea-hero .fea-hero__narzedzia--stoi.fea-hero__narzedzia--kot-lewo {
  left: calc(var(--fea-margines) + var(--bx, 0) * var(--fea-jedn));
}
.fea-hero .fea-hero__narzedzia--stoi.fea-hero__narzedzia--kot-prawo {
  right: calc(var(--fea-margines) + var(--bx, 0) * var(--fea-jedn));
}

.fea-hero .fea-narzedzie {
  display: inline-flex;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  color: var(--luk-ink, #0c0c0c);
  /* Kroj ze zrodla, gdy warstwa go podaje - inaczej odmiana Bold z arkusza.
     Z !important z tego samego powodu co przy .fea-btn: motyw ipo narzuca
     krój i grubość wszystkim <span> regula z !important. */
  font-family: var(--fea-narz-font, var(--fea-bold)), var(--fea-fallback) !important;
  /* Grubosc ze zrodla, gdy warstwa ja podaje - oryginal ma pod ikona 500. */
  font-weight: var(--fea-narz-waga, 700) !important;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.fea-hero .fea-narzedzie i {
  display: block;
  width: 44px;
  height: 52px;
  background: var(--fea-ikona) no-repeat center / contain;
  transition: transform .18s cubic-bezier(.455, .03, .515, .955);
}

.fea-hero .fea-narzedzie:hover i,
.fea-hero .fea-narzedzie:focus-visible i { transform: translateY(-4px) scale(1.08); }

/* Ikona narzedzia o szerokosci podanej PRZY OBRAZKU w zrodle. To literalne
   piksele, te same na kazdej szerokosci okna: oryginal renderuje
   <img width="60"> i dolicza wysokosc z proporcji pliku, wiec ikona ma
   60x77 i przy 390, i przy 1440. Nasza byla tlem pustego elementu, ktory
   bral "co zostalo" w pudelku - 41x53 na telefonie i 45x42 na desktopie
   (git /seminarium-bhp.../, CLR-31 poz. 79, 80, 83, 85). */
.fea-hero .fea-narzedzie[style*="--fea-narz-ikw"] i {
  width: calc(var(--fea-narz-ikw) * 1px);
  height: calc(var(--fea-narz-ikw) * var(--fea-narz-ikp, 1) * 1px);
  min-height: 0;
  flex: none;
  background-size: contain;
  background-position: center center;
}

/* Ikona o literalnej szerokosci stoi w oryginale U GORY pudelka (blok
   <center>: najpierw <img>, pod nim podpis, ktory wychodzi poza pudelko),
   a nie przy jego dole: git /seminarium-bhp.../ @1440 ikona na 438 px,
   u nas na 420 px (CLR-31 poz. 79; pomiar 2026-10-12). W poziomie stoi od
   LEWEGO wciecia warstwy, gdy jest szersza niz wnetrze pudelka, inaczej
   na srodku - tak sklada ja <center>. */
.fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie[style*="--fea-narz-ikw"] {
  justify-content: flex-start;
  overflow: visible;
  box-sizing: border-box;
  padding: 0 calc(var(--narz-bok, 0) * var(--fea-jedn));
}
.fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie[style*="--fea-narz-ikw"] i {
  align-self: flex-start;
  margin-left: max(0px, calc((100% - var(--fea-narz-ikw) * 1px) / 2));
}

/* Podpis narzedzia na WLASNYCH wspolrzednych desktopu (kafelek zlozony
   z ikony i osobnej warstwy tekstu; --narz-nx/--narz-ny od naroznika ikony,
   --narz-nw jego szerokosc). Pudelko kafelka jest pudelkiem IKONY, a podpis
   stoi pod nim, poza pudelkiem - jak osobna warstwa w zrodle. Dzielenie
   pudelka kurczylo ikone: git /wyposazenie-ce/ @1440 41,6x39 zamiast
   41,6x53,3 (CLR-31 poz. 88). Tylko powyzej progu telefonu - scena telefonu
   ma wlasne pudelka ikony i podpisu (--narz-m-ikh). */
@container hero (min-width: 561px) {
  .fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie[style*="--narz-ny:"] {
    position: relative;
    display: block;
    overflow: visible;
  }
  .fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie[style*="--narz-ny:"] i {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie[style*="--narz-ny:"] span {
    position: absolute;
    left: calc(var(--narz-nx, 0) * var(--fea-jedn));
    top: calc(var(--narz-ny, 0) * var(--fea-jedn));
    width: calc(var(--narz-nw, var(--nw, 122)) * var(--fea-jedn));
    text-align: center;
    white-space: nowrap;
  }
}

/* AF) ODSUNIECIE SPOCZYNKOWE W PIKSELACH EKRANU.
   RevSlider zostawia warstwe po animacji wejscia na odsunieciu z koncowej
   ramki (timeline.frames.frame_1.transform) i wypisuje je inline jako
   transform: translate(29px, -36px) - w pikselach EKRANU, nie siatki.
   Silnik dolicza to odsuniecie do wspolrzednej pudelka (w siatce) i osobno
   wypuszcza sama liczbe (--fea-img-ox, --wox-m, ...). Stad translate
   o roznice miedzy pikselem ekranu a jednostka siatki: ox * (1px - jedn).
   Przy jednostce 1px roznica jest zerowa. Wlasnosc `translate` sklada sie
   z `transform` animacji wejscia, wiec nie gryza sie ze soba.
   Desktop: 22 grafik na kit (do -62 px). Telefon: git / naglowek 6 px
   w lewo i 7 px nizej (CLR-31 poz. 81; pomiar 2026-10-12). */
@container hero (min-width: 561px) {
  .fea-hero .fea-hero__media[style*="--fea-img-ox:"],
  .fea-hero .fea-hero__media[style*="--fea-img-oy:"] {
    translate: calc(var(--fea-img-ox, 0) * (1px - var(--fea-jedn)))
               calc(var(--fea-img-oy, 0) * (1px - var(--fea-jedn)));
  }
}

/* Kolor podpisu ze zrodla - przy ikonach zielony. */
.fea-hero .fea-narzedzie {
  transition: color .2s cubic-bezier(.455, .03, .515, .955);
}
.fea-hero .fea-narzedzie:hover,
.fea-hero .fea-narzedzie:focus-visible { color: var(--fea-kolor-hover, #44d62c); }
.fea-hero .fea-narzedzie:focus-visible { outline: none; }
.fea-hero .fea-narzedzie:focus-visible span { box-shadow: 0 2px 0 var(--luk-green, #44d62c); }

/* Ponizej progu skladania akcje glowne biora pelna szerokosc - sa
   najwazniejsze i palec ma w co trafic.
   Gdy kolumna tekstu robi sie waska, narzedzia schodza pod przyciski -
   kreska pionowa nie ma juz czego oddzielac, wiec zmienia sie w pozioma.
   Dotyczy WYLACZNIE paska plynacego w toku tresci. Pasek stojacy ma
   wlasne wspolrzedne az do progu skladania i gornej kreski nie dostaje -
   w oryginale jej tam nie ma. */
@container hero (max-width: 900px) {
  .fea-hero .fea-hero__akcje { grid-template-columns: minmax(0, 1fr); }
  .fea-hero .fea-hero__narzedzia:not(.fea-hero__narzedzia--stoi) {
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    border-top: 1px solid rgba(3, 0, 20, .18);
  }
}

/* PROG SKLADANIA PASKA NARZEDZI: 780px, czyli ten sam, ktory sklada reszte
   sceny (.fea-btn--stoi). Wczesniej stalo tu 900px i w pasmie 781-900px pasek
   wypadal z ukladu sceny do toku tresci, podczas gdy przyciski wciaz staly na
   wspolrzednych. Pasek ladowal wtedy kilkaset pikseli od swojego miejsca
   (spawalnicza @900: l=416 t=32 zamiast l=813 t=256) i na 7 stronach wchodzil
   pod pigulke znacznika - obie maja z-index 5, wiec wygrywal ten pozniejszy
   w drzewie. Kolizji bylo 16, oryginal w tym pasmie nie ma zadnej.

   Dawne uzasadnienie progu 900 - "x = 3470 wyprowadzi pasek poza kadr" -
   liczylo szerokosc ikony jako sztywne 76px z arkusza. Od czasu, gdy
   Renderer::pasek_akcji() wypuszcza --nw/--nh/--ng ze zrodla, ikona skaluje
   sie razem z odsunieciem: przy kontenerze 780px najdalszy pasek w sieci
   (konferencja-pemine, x=3470, nw=124 x2, ng=28) konczy sie na 760,9px,
   czyli w kadrze. Sprawdzone dla wszystkich 12 slajdow z akcje_x.

   Blok MUSI stac po deklaracjach bazowych .fea-hero__narzedzia--stoi
   (position: absolute, width ikony z --nw) - ma ta sama swoistosc, wiec
   wygrywa tylko kolejnoscia. Przeniesiony wyzej staje sie martwy i pasek
   przy 390px rozpycha sie na 100% szerokosci POZA kadr. */
@container hero (max-width: 780px) {
  .fea-hero .fea-hero__narzedzia--stoi {
    position: static;
    padding-top: 18px;
    border-top: 1px solid rgba(3, 0, 20, .18);
    margin-top: 26px;
    gap: 22px;
  }
  /* Pasek wrocil do toku tresci, wiec przestaje byc czescia sceny i nie ma
     juz powodu, by kurczyl sie z nia dalej. Ponizej tego progu jednostka
     siatki daje 5-6px pisma - nieczytelne i za male dla palca. Wracamy do
     wymiarow dotykowych z arkusza. */
  .fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie {
    width: 76px;
    height: auto;
    gap: 6px;
    font-size: 12px;
  }
  .fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie i {
    flex: 0 0 auto;
    width: 44px;
    height: 52px;
  }
}

@container hero (max-width: 560px) {
  .fea-hero .fea-glowna { width: 100%; justify-content: flex-start; }
  .fea-hero .fea-hero__narzedzia { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fea-hero .fea-glowna,
  .fea-hero .fea-narzedzie i { transition: none !important; }
}

/* ------------------------------------------------------------------
   Szerokosc blokow tekstu przepisana ze zrodla (CLR-21)

   W RevSliderze kazda warstwa tekstu ma wlasna szerokosc i to ona
   wyznacza miejsce lamania wierszy. Widget lamal tekst na krawedzi
   swojej kolumny, przez co naglowki i opisy ukladały sie inaczej niz
   w oryginale - zglosilo to 8 z 20 pozycji zgloszenia.

   Zmienne ustawia renderer, w tej samej skali co stopien pisma:
   min(<px zrodla>, <udzial siatki>cqw). Gdy warstwa nie miala jawnej
   szerokosci, zmiennej nie ma i zostaje zachowanie dotychczasowe.

   Blok moze byc szerszy niz kolumna tekstu - tak jest w oryginale,
   gdzie naglowek wchodzi na obszar grafiki. Kolumna tekstu ma juz
   z-index 1, wiec tekst zostaje nad grafika.
   ------------------------------------------------------------------ */

/* Szerokosc JAWNA, nie max-width: blok tekstu bywa w zrodle szerszy niz
   kolumna widgetu, a max-width potrafi tylko zwezac. Bez tego naglowek
   dalej lamal sie na krawedzi kolumny mimo poprawnej zmiennej. */
.fea-hero .fea-hero__title { width: var(--fea-h-w, auto); max-width: none; }
.fea-hero .fea-hero__title--drugi { width: var(--fea-h2-w, var(--fea-h-w, auto)); max-width: none; }
.fea-hero .fea-hero__lead,
.fea-hero .fea-hero__tagline { width: var(--fea-d-w, auto); max-width: none; }

/* Na waskich ekranach szerokosc ze zrodla przestaje obowiazywac -
   liczy sie dostepne miejsce, inaczej tekst wychodzilby poza ekran. */
@container hero (max-width: 900px) {
  .fea-hero .fea-hero__title,
  .fea-hero .fea-hero__title--drugi,
  .fea-hero .fea-hero__lead,
  .fea-hero .fea-hero__tagline { width: auto; max-width: 100%; }
}


/* ------------------------------------------------------------------
   Przycisk po kliknieciu (CLR-21, poz. 8 i 9)

   Motyw maluje ogniskowanym przyciskom tlo --luk-ink (#030014), a nasz
   napis jest czarny - po kliknieciu i odsunieciu kursora zostawal
   czarny prostokat z niewidocznym tekstem. Zmierzone w przegladarce:
   background-color: rgb(3,0,20), color: rgb(0,0,0), :focus bez :hover.

   RevSlider nie ma stanu ogniskowania w ogole - warstwa zmienia wyglad
   wylacznie przy najechaniu (frame_hover: c:#000, bgc:#fff). Dlatego
   ogniskowanie ma wygladac jak stan spoczynku, a bialy kolor zostaje
   zarezerwowany dla najechania.

   Obrys :focus-visible zostaje nietkniety - to jedyna wskazowka dla
   osob poruszajacych sie klawiatura.
   ------------------------------------------------------------------ */

.fea-hero .fea-btn--primary:focus { background: var(--luk-green); color: var(--luk-ink); }
.fea-hero .fea-btn--ghost:focus { background: transparent; color: var(--luk-ink); }

/* Najechanie ma pierwszenstwo nad ogniskowaniem. */
.fea-hero .fea-btn--primary:focus:hover,
.fea-hero .fea-btn--ghost:focus:hover { background: #fff; }

/* To samo dla akcji glownej w pasku i przyciskow z wlasnym tlem: tam
   tlo niesie zmienna albo grafika, wiec ogniskowanie nie moze go zmyc. */
.fea-hero .fea-glowna:focus:not(:hover),
.fea-hero .fea-btn--wlasny:focus:not(:hover),
.fea-hero .fea-btn--graf:focus:not(:hover) { background-color: inherit; }


/* ------------------------------------------------------------------
   Znaczniki metryczki wydarzenia (CLR-21, poz. 2-5)

   W oryginale przy dacie stoi kalendarz, a przy miejscu pinezka -
   osobne warstwy grafiki po lewej stronie napisu (data.webp 58x57,
   miejsce.webp 56x56 na slajdzie MKS). Widget rysowal w tych miejscach
   zielone romby, bo znaczniki nie byly w ogole przenoszone.

   Wiersz ze znacznikiem gasi domyslny punktor i pokazuje grafike ze
   zrodla. Wiersze bez znacznika zostaja przy rombie.
   ------------------------------------------------------------------ */

.fea-hero .fea-hero__meta li.ma-znacznik::before {
  width: 22px;
  height: 22px;
  background: var(--fea-znacznik) center / contain no-repeat;
  transform: none;
}

@container hero (max-width: 900px) {
  .fea-hero .fea-hero__meta li.ma-znacznik::before { width: 18px; height: 18px; }
}


/* ------------------------------------------------------------------
   Podzial kolumn slajdu wg zrodla (CLR-21, poz. 10, 11, 12, 20)

   Widget dzielil slajd na sztywno: 1.06fr / 0.94fr, czyli 53% na tekst.
   W zrodle grafika zaczyna sie raz na 54% siatki (ai), raz na 44% (imn),
   a raz zostawia szeroki odstep (ai/oferta). Stad raz tekst wchodzil na
   grafike, raz miedzy nimi byla dziura.

   --fea-kol ustawia renderer z pozycji warstwy grafiki. Gdy zmiennej
   nie ma, zostaje dotychczasowy podzial.
   ------------------------------------------------------------------ */

.fea-hero .fea-hero__slide:not(.fea-hero__slide--tablica):not(.fea-hero__slide--rozdroze) {
  grid-template-columns: var(--fea-kol, minmax(0, 1.06fr)) minmax(0, 1fr);
}

@container hero (max-width: 900px) {
  .fea-hero .fea-hero__slide { grid-template-columns: minmax(0, 1fr); }
}


/* Panel wydarzenia: proba pozycjonowania blokow tekstu ze zrodla zostala
   COFNIETA. Powod w docs/CLR-21-model-warstw.md - nasze pola heading/
   description/tags nie odpowiadaja warstwom zrodla jeden do jednego,
   wiec wspolrzedne trafialy do niewlasciwych blokow (naglowek zjechal
   z y=152 na y=286). Wraca przeplyw; wlasciwa poprawka wymaga zmiany
   modelu danych, nie regul w arkuszu. */


/* ------------------------------------------------------------------
   Warstwy tekstu na scenie (CLR-21, nowy model)

   Kazda warstwa ze zrodla dostaje wlasna pozycje, szerokosc i typografie.
   Powod w docs/CLR-21-model-warstw.md: elementy pozycjonowane wspolrzednymi
   trafiaja co do piksela, a plynace w kolumnie CSS rozjezdzaja sie
   o 28-115px, bo trzy pola widgetu nie oddaja pieciu warstw slajdu.

   Scena ma proporcje zrodla, wiec procenty przekladaja sie wprost na
   polozenie z RevSlidera.
   ------------------------------------------------------------------ */

.fea-hero .fea-hero__scena {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Naklejki lezace w zrodle POD glowna grafika: osobna scena ponizej
   grafiki (z-index 1). W jednej scenie z napisami staly nad nia:
   rzuty poduszkowca na ichp /en/about-us-2/ przed postaciami
   (CLR-32 poz. 99). */
.fea-hero .fea-hero__scena--pod,
.fea-hero .fea-hero__slide[style*="--fea-scena-m"] > .fea-hero__scena--pod {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

.fea-hero .fea-warstwa {
  position: absolute;
  left: var(--wx, 0);
  top: var(--wy, 0);
  width: var(--ww, auto);
  margin: 0;
  font-size: var(--wpx, inherit);
  line-height: var(--wlh, 1.2);
  color: var(--wkolor, var(--luk-ink));
  font-family: var(--wfont, inherit);
  pointer-events: auto;
}

/* Wciecie warstwy ze zrodla: wspolrzedna wskazuje pudelko, a napis
   zaczyna sie dopiero za marginesem (CLR-21, poz. 6). */
.fea-hero .fea-warstwa { padding: var(--wpad, 0); }

/* Warstwa kotwiczona do prawej krawedzi siatki. */
.fea-hero .fea-warstwa--prawo {
  left: auto;
  right: var(--wx, 0);
}

.fea-hero .fea-warstwa a { color: inherit; text-decoration: none; }
.fea-hero .fea-warstwa a:hover { text-decoration: underline; }

/* Kolumna tekstu zostaje w drzewie dla ukladow bez warstw; gdy warstwy
   przejely tresc, nie ma nic wnosic do ukladu.
   `display: none` bylo tu za mocne: kolumna niesie jeszcze RZAD PRZYCISKOW
   (i logotypy), wiec razem z nia znikaly przyciski CTA - na pimot, kit
   i stronie glownej Centrum w ogole nie bylo ich widac, a w oryginale sa
   (zgloszenie 2026-09-16; 6 stron, 11 przyciskow). Sam tekst juz tu nie
   trafia: renderer milczy o naglowku i opisie, gdy warstwy przejely tresc.
   Zabieramy wiec kolumnie tylko wysokosc i odstepy - wspolrzedne zostaja,
   bo to one stawiaja przycisk tam, gdzie stoi w zrodle. */
.fea-hero .fea-hero__text--puste {
  padding-block: 0;
  gap: 0;
  min-height: 0;
  justify-content: flex-start;
  align-self: start;
}

/* Slajd ma wtedy w siatce JEDEN wiersz - wysoki na odsunięcie kolumny ze
   źródła - a `align-content` domyślnie centruje go pionowo: wiersz startował
   na 190px, więc kolumna lądowała na 259px zamiast 69px, a razem z nią rząd
   przycisków (liczony OD GÓRY kolumny) schodził o te 190px za nisko.
   Scena i grafika są pozycjonowane bezwzględnie, więc przypięcie wiersza do
   góry ich nie rusza (pomiar 2026-09-16: przycisk pimot 520 -> 330,
   oryginał 329). */
.fea-hero .fea-hero__slide:has(> .fea-hero__text--puste) { align-content: start; }

/* Na waskich ekranach scena nie ma sensu - warstwy wracaja do przeplywu. */
@container hero (max-width: 900px) {
  .fea-hero .fea-hero__scena {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px var(--fea-pad, 20px);
  }
  .fea-hero .fea-warstwa {
    position: static;
    width: auto;
    font-size: clamp(15px, 4.2cqw, 22px);
  }
  .fea-hero .fea-warstwa--prawo { right: auto; }
}

/* ============================================================
   POPRAWKI PO PORÓWNANIU Z PRODUKCJĄ (CLR-21, poz. 18 — icso/kariera)
   ============================================================ */

/* A) Podpis przypinki dziedziczył krój po motywie i wychodził systemowym
   sans-serifem, gdy oryginał ma ttsupermolot-light 18/22. Reszta widgetu
   ustawia rodzinę jawnie — plakietka była jedynym miejscem bez tego. */
.fea-hero .fea-hero__badge { font-family: var(--fea-light); }

/* B) Motyw części instytutów ma `main a { text-decoration: underline !important }`
   (wymóg dostępności dla treści). W RevSliderze przycisk nie był linkiem —
   był warstwą z akcją scrollto — więc podkreślenia nie dostawał. Nasz przycisk
   jest <a>, więc trzeba je zdjąć, inaczej napis w zielonym klawiszu jest
   podkreślony, czego na produkcji nie ma. */
.fea-hero .fea-btn,
.fea-hero .fea-hero__pin,
.fea-hero .fea-warstwa a { text-decoration: none !important; }
.fea-hero .fea-warstwa a:hover { text-decoration: underline !important; }

/* C) Odstęp między nagłówkiem a opisem ze ŹRÓDŁA. Kolumna tekstu jest
   flexem ze stałym gap 26px — dokładamy tylko różnicę, więc slajdy bez
   zmiennej zostają przy dotychczasowym odstępie (CLR-21, poz. 19 i 12). */
.fea-hero .fea-hero__text > .fea-hero__lead {
  /* Bez max(0px, ...): odstęp ze źródła bywa MNIEJSZY niż nasze 26px
     (itr: 18px) i wtedy trzeba akapit podciągnąć, a nie tylko odsunąć.
     Ujemny margines nie zejdzie poniżej -26px, bo tyle wynosi gap kolumny. */
  margin-top: calc(var(--fea-d-gora, 26px) - 26px);
}

/* D) Wcięcie kolumny tekstu ze źródła. W RevSliderze x wskazuje pudełko
   warstwy, a napis zaczyna się dopiero za jej lewym marginesem — bez tego
   cała kolumna stała 15–20px za daleko w lewo (CLR-21, poz. 19). Zmienna
   dotyczy WYŁĄCZNIE kolumny tekstu: scena warstw pozycjonuje się własnymi
   współrzędnymi i przesuwać się nie może. */
.fea-hero .fea-hero__text { padding-inline-start: var(--fea-tekst-wciecie, 0px); }

/* Szerokosc bloku tekstu jest mierzona W ZRODLE OD SCENY, a u nas blok stoi
   juz za wcieciem kolumny - wiec o tyle samo musi byc wezszy, inaczej jego
   prawa krawedz siega dalej niz w oryginale i wiersze lamia sie w innych
   miejscach. Na icso /poznaj-nas/ oryginal miesci w wierszu 711px, my 840px,
   bo nasze pudelko bylo o 15px szersze (pomiar 2026-09-29). Slajdy bez
   wciecia kolumny nic nie traca: zmienna jest wtedy zerem. */
.fea-hero__slide[style*="--fea-tekst-wciecie"] .fea-hero__text > .fea-hero__lead:not(.fea-hero__lead--drugi) {
  width: calc(var(--fea-d-w, 100%) - var(--fea-tekst-wciecie, 0px));
}
.fea-hero__slide[style*="--fea-tekst-wciecie"] .fea-hero__text > .fea-hero__lead--drugi {
  width: calc(var(--fea-d2-w, var(--fea-d-w, 100%)) - var(--fea-tekst-wciecie, 0px));
}
.fea-hero__slide[style*="--fea-tekst-wciecie"] .fea-hero__text > .fea-hero__title:not(.fea-hero__title--drugi) {
  width: calc(var(--fea-h-w, 100%) - var(--fea-tekst-wciecie, 0px));
}
.fea-hero__slide[style*="--fea-tekst-wciecie"] .fea-hero__text > .fea-hero__title--drugi {
  width: calc(var(--fea-h2-w, var(--fea-h-w, 100%)) - var(--fea-tekst-wciecie, 0px));
}

/* Wciecie kolumny nalezy do WARSTW TEKSTU, nie do przyciskow. W zrodle
   bierze sie z lewego dopelnienia warstwy naglowka, a przycisk ma wlasne
   wspolrzedne i wlasne dopelnienie (cta_pad). Na icso / naglowek ma pad 15,
   przycisk x=0 - oryginal stawia go na krawedzi kolumny (80px), a u nas szedl
   razem z tekstem na 95px (pomiar 2026-09-29).

   Renderer podaje --fea-cta-wciecie tylko tam, gdzie zrodlo mowi inaczej niz
   wciecie tekstu; bez tej zmiennej rzad stoi jak dotad, razem z kolumna. */
.fea-hero .fea-hero__text > .fea-hero__actions {
  margin-inline-start: calc(var(--fea-cta-wciecie, var(--fea-tekst-wciecie, 0px))
                            - var(--fea-tekst-wciecie, 0px));
}

/* E) DRUGI AKAPIT ze źródła. Ma własną typografię i własny odstęp — na
   itr pierwszy akapit to podtytuł 20/25, a drugi opis w tym samym stopniu,
   ale 41px niżej. Dziedziczy po pierwszym, gdy źródło nie mówi inaczej
   (CLR-21, poz. 20). */
.fea-hero .fea-hero__slide .fea-hero__lead--drugi {
  font-family: var(--fea-d2-font, var(--fea-d-font, "TT Supermolot Light")), var(--fea-fallback);
  font-size: var(--fea-d2-size, var(--fea-d-size, clamp(17px, 1.9cqi, 24px)));
  line-height: var(--fea-d2-lh, var(--fea-d-lh, 1.42));
  color: var(--fea-d2-color, var(--fea-d-color, inherit));
}

.fea-hero .fea-hero__lead--drugi {
  width: var(--fea-d2-w, var(--fea-d-w, auto));
  max-width: none;
  margin-top: calc(var(--fea-d2-gora, 26px) - 26px);
}

@container hero (max-width: 900px) {
  .fea-hero .fea-hero__lead--drugi { width: auto; max-width: 100%; }
}

/* F) Akapit bez wymiaru w źródle dostaje szerokość treści (`max-content`),
   bo tak zachowuje się warstwa RevSlidera. Żeby nie wyszedł poza slajd,
   kres liczymy od wcięcia kolumny — dokładnie tam kończy się scena
   (CLR-21, poz. 12). */
.fea-hero .fea-hero__lead,
.fea-hero .fea-hero__lead--drugi,
.fea-hero .fea-hero__tagline {
  max-width: calc(100cqw - var(--fea-tekst-lewa, 0px) - var(--fea-tekst-wciecie, 0px));
}

@container hero (max-width: 900px) {
  .fea-hero .fea-hero__lead,
  .fea-hero .fea-hero__lead--drugi,
  .fea-hero .fea-hero__tagline { width: auto; max-width: 100%; }
}

/* G) Przycisk CTA ze ŹRÓDŁA: krój, wcięcia i odstęp od tekstu. Zaszyte
   18/36 pasowało do slidera bloga 1, ale w sieci przyciski mają 15–18px
   pisma i własne wcięcia — na imn/en oryginał ma 47px wysokości, nasz
   miał 68px (CLR-21, poz. 9 i 12). */
.fea-hero .fea-hero__text .fea-hero__actions {
  margin-top: calc(var(--fea-cta-gora, 26px) - 26px);
}

.fea-hero .fea-hero__actions .fea-btn {
  font-size: var(--fea-cta-size, 18px);
  line-height: var(--fea-cta-lh, 36px);
  padding: var(--fea-cta-pad, 16px 40px);
}

/* H) Opis i przyciski na WSPÓŁRZĘDNYCH ze źródła.
   Odstęp liczony z liczby wierszy zawodzi tam, gdzie nagłówek zawija się
   sam, bez jawnego <br> — na imn/en/offer opis i przycisk siadały 56px
   (dokładnie jedną interlinię) za nisko. Gdy źródło daje współrzędne,
   arkusz stawia bloki wprost na nich; wysokość nagłówka przestaje mieć
   znaczenie. Poniżej progu składania wszystko wraca do toku treści
   i obowiązują odstępy --fea-*-gora (CLR-21, poz. 8). */
.fea-hero .fea-hero__text { position: relative; }

@container hero (min-width: 901px) {
  .fea-hero__slide[style*="--fea-d-abs"] .fea-hero__text > .fea-hero__lead:not(.fea-hero__lead--drugi),
  .fea-hero__slide[style*="--fea-d2-abs"] .fea-hero__text > .fea-hero__lead--drugi,
  .fea-hero__slide[style*="--fea-h2-abs"] .fea-hero__text > .fea-hero__title--drugi,
  .fea-hero__slide[style*="--fea-cta-abs"] .fea-hero__text > .fea-hero__actions {
    position: absolute;
    margin-top: 0;
    left: var(--fea-tekst-wciecie, 0px);
  }
  /* Rzad przyciskow moze miec wlasne wciecie ze zrodla - patrz blok wyzej.
     Przy pozycjonowaniu bezwzglednym niesie je "left", wiec margines z toku
     tresci musi zejsc - inaczej wciecie odjeloby sie dwa razy. */
  .fea-hero__slide[style*="--fea-cta-abs"] .fea-hero__text > .fea-hero__actions {
    margin-inline-start: 0;
    left: var(--fea-cta-wciecie, var(--fea-tekst-wciecie, 0px));
  }
  .fea-hero__slide[style*="--fea-d-abs"] .fea-hero__text > .fea-hero__lead:not(.fea-hero__lead--drugi) {
    top: calc(var(--fea-d-abs) - var(--fea-tekst-gora, 0px));
  }
  .fea-hero__slide[style*="--fea-d2-abs"] .fea-hero__text > .fea-hero__lead--drugi {
    top: calc(var(--fea-d2-abs) - var(--fea-tekst-gora, 0px));
  }
  /* Drugi naglowek stoi tam, gdzie w zrodle - nie tuz pod pierwszym. */
  .fea-hero__slide[style*="--fea-h2-abs"] .fea-hero__text > .fea-hero__title--drugi {
    top: calc(var(--fea-h2-abs) - var(--fea-tekst-gora, 0px));
  }
  .fea-hero__slide[style*="--fea-cta-abs"] .fea-hero__text > .fea-hero__actions {
    top: calc(var(--fea-cta-abs) - var(--fea-tekst-gora, 0px));
  }
}

/* I) Grafika kotwiczona do LEWEJ krawędzi siatki. Warstwa szersza od siatki
   nie ma policzalnego zapasu z prawej, więc dotąd dosuwała się do prawej
   krawędzi — na ichp napis w grafice wyjeżdżał poza kadr o 430px
   (CLR-21, poz. 13). */
.fea-hero:not(.fea-hero--cover):not(.fea-hero--text) .fea-hero__media[style*="--fea-img-x"] {
  left: calc(var(--fea-img-gut, var(--fea-margines, 0px)) + var(--fea-img-x));
  right: auto;
}
/* Kotwica SRODKOWA (x:c w zrodle): x liczy sie od srodka modulu, jak
   w RevSliderze: lewa = (modul - szerokosc) / 2 + x. Kotwica srodkowa szla
   dotad jako lewa i grafiki kit / ("Poznaj nas" 506 px przy x:417-62,
   "Nasze realizacje" 853 px przy x:132) staly 467 i 293 px za daleko
   w lewo, na tekscie slajdu (CLR-34 poz. 105). */
@container hero (min-width: 781px) {
  .fea-hero:not(.fea-hero--cover):not(.fea-hero--text) .fea-hero__media[style*="--fea-img-kx:srodek"] {
    left: calc(50% + var(--fea-img-x));
    right: auto;
    transform: translateX(-50%);
  }
}

/* J) PEŁNA SZEROKOŚĆ OKNA — slider źródłowy z layouttype=fullwidth.
   RevSlider wychodził poza kolumnę treści własnym JS-em; nasza sekcja
   zostawała w kolumnie (na części stron 1160px), a razem z nią malało
   --fea-jedn i cała geometria slajdu — stąd 12 pozycji „inna szerokość"
   i większość „inna wysokość" w weryfikacji 2026-09-10.

   --fea-okno niesie clientWidth (bez paska przewijania) z fea-hero.js;
   100vw jest tylko zapasem na wypadek wyłączonego JS. */
.fea-hero.fea-hero--pelna {
  width: var(--fea-okno, 100vw);
  max-width: var(--fea-okno, 100vw);
  /* --fea-wyjscie liczy JS z faktycznego polozenia widgetu; calc(50% - 50vw)
     zostaje zapasem dla wysrodkowanej kolumny przy wylaczonym JS. */
  margin-left: var(--fea-wyjscie, calc(50% - var(--fea-okno, 100vw) / 2));
}

/* K) WARSTWY WYŁĄCZONE NA TELEFONIE (visibility.m = false w źródle).
   Widget renderuje jeden DOM dla wszystkich szerokości, więc bez tego
   treść, której oryginał na telefonie nie pokazuje, zostawała w kadrze
   (weryfikacja 2026-09-10: 42 pozycje). Chowamy z kadru, ale zostawiamy
   w drzewie dostępności — tak samo jak podpisy przypinek. */
@container hero (max-width: 780px) {
  .fea-hero .fea-bez-mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* L) NAWIGACJA W ŚRODKU SLIDERA, nie pod nim.
   RevSlider rysuje pasek postępu, licznik i strzałki WEWNĄTRZ modułu, więc
   wysokość slidera to sama scena. U nas nawigacja stała pod slajdem
   i dokładała 79px — sekcja była wyższa, a treść pod sliderem zjeżdżała
   w dół. Weryfikacja 2026-09-10 pokazała ten sam rozjazd na 15 stronach
   (619 zamiast 540, 473 zamiast 394, 719 zamiast 640).

   pointer-events: none na pasku, auto na jego dzieciach — inaczej overlay
   zjadałby kliknięcia w dolnym pasie slajdu. */
.fea-hero .fea-hero__spod {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  pointer-events: none;
}

.fea-hero .fea-hero__spod > * {
  pointer-events: auto;
}

/* M) WYSOKOŚĆ SCENY ZE ŹRÓDŁA JAKO WIĄŻĄCA — powyżej progu składania.
   min-height pozwalało kolumnie tekstu urosnąć ponad scenę: przy scenie
   394px slider miał 419-467px, a RevSlider trzyma sztywną wysokość modułu
   i przycina zawartość (<rs-slides style="overflow:hidden">). Poniżej
   901px wracamy do min-height — tam układ się składa i przycinanie
   zjadłoby treść (weryfikacja 2026-09-10: 6 stron). */
@container hero (min-width: 901px) {
  .fea-hero .fea-hero__stage[style*="--fea-scena"] {
    height: calc(var(--fea-scena) * var(--fea-jedn));
    min-height: 0;
    overflow: hidden;
  }

  .fea-hero .fea-hero__slide[style*="--fea-scena"] {
    min-height: 0;
    height: 100%;
  }
}

/* N) PODPIS PRZYPINKI KOTWICZONY DO DOŁU — jak w źródle.
   Warstwa podpisu jest w RevSliderze często kotwiczona do dolnej krawędzi
   (`y:b`), a jej wysokości źródło nie podaje — wynika z liczby wierszy po
   zawinięciu. Przeliczanie tego na „od góry" wymagałoby zgadywania, więc
   silnik podaje odległość od dołu, a wysokość podpisu wyznacza przeglądarka.

   Bez tego podpis na /akcelerator-lukasiewicza/ stawał na surowym y=102
   zamiast 408 — 306 px za wysoko, pod górną krawędzią zdjęcia zamiast nad
   kropką. Raport tego nie widział, bo mierzył tylko stan spoczynku,
   a podpis pojawia się po najechaniu. */
@container hero (min-width: 1200px) {
  .fea-hero .fea-hero__przypinka[style*="--fea-badge-dol"] .fea-hero__badge {
    top: auto;
    bottom: var(--fea-badge-dol);
  }
}

/* O) PODPIS PRZYPINKI KOTWICZONY DO PRAWEJ — jak w źródle.

   Część podpisów ma w źródle kotwicę prawą i szerokość „z treści" (w=0).
   Silnik nie potrafi wtedy podać lewej krawędzi w px siatki, więc podaje
   odległość od PRAWEJ krawędzi zdjęcia — szerokość wyznacza przeglądarka,
   dokładnie tak jak przy `--fea-badge-dol`. */
@container hero (min-width: 1200px) {
  .fea-hero .fea-hero__przypinka[style*="--fea-badge-prawo"] .fea-hero__badge {
    left: auto;
    right: var(--fea-badge-prawo);
  }
}

/* P) PRZYPINKA MUSI BYĆ DO NAJECHANIA.

   Na wit /oferta/ kropka stała dokładnie tam, gdzie w oryginale (974/222
   przy 973/223), a podpis i tak nie wychodził: nad kropką leży przezroczyste
   pudełko akapitu (`.fea-hero__lead` ma 1080px szerokości, glify kończą się
   wcześniej), więc kursor nigdy nie docierał do kropki. Tego nie widać ani
   na zrzucie, ani w pomiarze położenia — widać dopiero przy próbie
   najechania (weryfikacja hover 2026-09-11).

   Kolumny tekstu nie wyłączamy globalnie, bo zabiera to zaznaczanie tekstu.
   Wyłączamy ją tylko na slajdach, które W OGÓLE mają przypinkę — odnośniki
   i przyciski zostają klikalne. */
.fea-hero__slide:has(.fea-hero__przypinka) .fea-hero__text {
  pointer-events: none;
}
.fea-hero__slide:has(.fea-hero__przypinka) .fea-hero__text a,
.fea-hero__slide:has(.fea-hero__przypinka) .fea-hero__text button,
.fea-hero__slide:has(.fea-hero__przypinka) .fea-hero__text .fea-btn,
.fea-hero__slide:has(.fea-hero__przypinka) .fea-hero__text [role="button"] {
  pointer-events: auto;
}

/* R) BLOK TEKSTU Z WŁASNYM ODSUNIĘCIEM OD LEWEJ.

   Bloki ustawione bezwzględnie brały `left` z wcięcia całej kolumny tekstu,
   więc blok, który w źródle stoi w innym miejscu niż kolumna, lądował na jej
   krawędzi. Na stronie głównej Centrum napis „proponujemy rozwiązanie" ma
   w źródle x=425, a stał na 20 — 405 px w lewo (weryfikacja 2026-09-11).

   Wartość idzie w px siatki, tą samą jednostką co reszta współrzędnych, więc
   skaluje się razem ze slajdem. Udział procentowy tu nie działa: procent
   w `left` liczy się od kolumny tekstu, nie od siatki. */
@container hero (min-width: 901px) {
  /* Punktem odniesienia dla `left` jest pudelko kolumny tekstu, ktore samo
     stoi o --fea-margines + --fea-inset od krawedzi okna - margines jest juz
     w nim zawarty, wiec dokladamy tylko roznice wciecia. Pomiar: kolumna
     zaczyna sie na x=100 przy marginesie 70 i wcieciu 20. */
  /* Rzad przyciskow ma czesto WLASNE x, niezalezne od kolumny tekstu:
     na ichp /kariera/ naglowek stoi na x=0, a przycisk na x=20. */
  .fea-hero__slide[style*="--fea-cta-lewa"] .fea-hero__text > .fea-hero__actions {
    left: calc(var(--fea-cta-lewa)
               - var(--fea-tekst-lewa, calc(var(--fea-margines, 0px) + var(--fea-inset, 20px)))
               + var(--fea-margines, 0px));
  }
  .fea-hero__slide[style*="--fea-d2-lewa"] .fea-hero__text > .fea-hero__lead--drugi {
    /* Punktem odniesienia dla `left` jest kolumna tekstu, wiec odejmujemy
       jej wciecie liczone OD KRAWEDZI SIATKI. Uwaga na dwie jednostki:
       --fea-tekst-lewa ma margines siatki juz w srodku, a --fea-d2-lewa to
       czysty piksel siatki - stad margines wraca na koncu. Na wit kolumna
       stoi 200px od krawedzi siatki i sztywne odejmowanie wciecia (20px)
       stawialo napis 181px za daleko w prawo (weryfikacja 2026-09-11). */
    left: calc(var(--fea-d2-lewa)
               - var(--fea-tekst-lewa, calc(var(--fea-margines, 0px) + var(--fea-inset, 20px)))
               + var(--fea-margines, 0px));
  }
}

/* S) SLAJD RYSOWANY BEZ SKALOWANIA WARSTW.

   Warstwa z `behavior.autoResponsive = false` zachowuje w źródle swoje
   piksele — RevSlider nie przelicza jej współczynnikiem siatki, tylko kadruje
   slajd. Na ichp /biznes/ (siatka 3840) napis stoi na x=325 i ma 61px przy
   oknie 1200, 1440 i 1920; zmienia się wyłącznie wysokość kadru
   (450/540/720). Nasz model skalował wszystko współczynnikiem 1440/3840,
   więc cały slajd był 2,7 raza za mały (weryfikacja 2026-09-11).

   Renderer ustawia wtedy na SLAJDZIE --fea-jedn na sztywny piksel. Kadr
   (.fea-hero__stage) ma własne --fea-jedn liczone z siatki, więc jego
   wysokość zostaje bez zmian — poprawiamy tylko dolny kres slajdu, który
   z jednostką 1px urósłby do pełnej wysokości sceny źródła (1440px). */
.fea-hero__slide[style*="--fea-wys-kadru"] {
  min-height: var(--fea-wys-kadru);
}

/* T) WYSOKOŚĆ PUDEŁKA GRAFIKI ZE ŹRÓDŁA.

   Pudełko grafiki wyznacza położenie przypinek — podpis kotwiczony do dołu
   zdjęcia liczy się od jego dolnej krawędzi. Bez jawnej wysokości pudełko
   brało proporcje pliku i kończyło się wyżej niż w oryginale: na ichp
   /kariera/ 583 px zamiast źródłowych 615 px, czyli podpis 33 px za wysoko
   (weryfikacja 2026-09-11).

   `object-fit: cover` — tak samo jak RevSlider, który przycina zdjęcie do
   zapisanego pudełka zamiast je rozciągać. */
@container hero (min-width: 901px) {
  /* Selektor MUSI powtorzyc lancuch :not() z reguly, ktora ustawia
     height: auto dla pudelka grafiki - inaczej przegrywa specyficznoscia
     (0,3,0 przeciw 0,6,0) i wysokosc ze zrodla nie dochodzi do skutku. */
  .fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text)
    .fea-hero__media[style*="--fea-img-h"] {
    height: var(--fea-img-h);
  }
  .fea-hero:not(.fea-hero--event):not(.fea-hero--cover):not(.fea-hero--text)
    .fea-hero__media[style*="--fea-img-h"] > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

/* U2) ROZDROŻE STOI NA WSPÓŁRZĘDNYCH ZE ŹRÓDŁA.

   Zdanie i panorama składały się w toku — zdanie na górze, panorama pod nim.
   Pinezki liczą się w procentach panoramy, więc razem z nią jechały o tę
   samą różnicę: na git `/en/` panorama wychodziła na 146 px zamiast
   źródłowych 168,75 i wszystkie cztery podpisy stały 22 px za wysoko
   (weryfikacja 2026-09-13). Powyżej 901 px oba bloki stoją tam, gdzie
   w źródle; niżej wraca układanie w toku, bo tam kadr się składa. */
@container hero (min-width: 901px) {
  /* Slajd ma wciecie pionowe (78px siatki = 29,25px przy tej siatce), a ono
     przesuwa uklad wspolrzednych rozdroza o te sama wartosc: pinezki
     wychodzily wtedy 30px za nisko. Wspolrzedne ze zrodla licza sie od
     gornej krawedzi SCENY, wiec dla tego ukladu wciecie zeruje sie. */
  .fea-hero__slide:has(> .fea-rozdroze[style*="--fea-pan-gora"]) {
    padding-block: 0;
  }
  .fea-rozdroze[style*="--fea-pan-gora"] {
    position: relative;
    min-height: calc(var(--fea-pan-gora) + 1px);
  }
  .fea-rozdroze[style*="--fea-zdanie-gora"] > .fea-rozdroze__zdanie {
    position: absolute;
    top: var(--fea-zdanie-gora);
    left: 0;
    right: 0;
    margin: 0;
  }
  .fea-rozdroze[style*="--fea-pan-gora"] > .fea-rozdroze__panorama {
    position: absolute;
    top: var(--fea-pan-gora);
    left: 0;
    right: 0;
    margin: 0;
  }
}

/* U) PODPIS PINEZKI NA ROZDROŻU STOI NIŻEJ NIŻ IKONA.

   Pinezka kotwiczy się na ikonie (strzałce), a napis ma w źródle własną
   wysokość: na git `/en/` cztery etykiety stoją 22 px niżej niż strzałki.
   Bez tej różnicy podpis wychodził 22 px za wysoko, mimo że w poziomie
   trafiał co do piksela (weryfikacja 2026-09-13: nasz napis 127/193 przy
   oryginale 126/215). */
.fea-rozdroze__pin[style*="--fea-pin-dy"] > span {
  margin-top: var(--fea-pin-dy);
}

/* W) AKAPIT MA WŁASNE WCIĘCIE WOBEC KOLUMNY.

   W RevSliderze x wskazuje pudełko warstwy, a napis zaczyna się za jej
   wcięciem — liczy się więc suma (x + wcięcie). Kolumna startuje na własnym
   x plus wcięcie nagłówka, więc blok o innej sumie potrzebuje dopełnienia.
   Silnik podaje je gotowe, w px siatki: na icso `/en/kariera/` nagłówek ma
   x=0 i wcięcie 15, akapit x=5 i wcięcie 20, czyli 10 px więcej
   (weryfikacja 2026-09-13). */
.fea-hero__slide[style*="--fea-d-wciecie"] .fea-hero__text > .fea-hero__lead:not(.fea-hero__lead--drugi) {
  padding-left: var(--fea-d-wciecie);
}
.fea-hero__slide[style*="--fea-d2-wciecie"] .fea-hero__text > .fea-hero__lead--drugi {
  padding-left: var(--fea-d2-wciecie);
}

/* X) PRZYCISKI Z KLASĄ REDAKTORSKĄ button_rev02 / button_rev02_white.

   62 ze 138 stron sieci ma przyciski, których wygląd wisi na klasach
   nadanych warstwie w RevSliderze i na regułach z jego GLOBALNEGO CSS
   (blok #rs-plugin-settings-inline-css): padding 16/40 z !important
   (nieskalowany — dlatego na siatce 3840 przycisk ma 274x49, a nie
   161x29), ścięty róg rysowany clip-pathem w em i zielona obwódka po
   najechaniu. Po zdjęciu RevSlidera ten blok zniknie, więc reguły są
   przepisane tutaj co do znaku, zawężone do naszego kadru
   (zgłoszenie 2026-09-14, /produkty-i-uslugi/). */
.fea-hero .button_rev02,
.fea-hero .button_rev02_white { padding: 16px 40px 16px 40px !important; }

/* Oryginal deklaruje tu tez position:relative i z-index:0, ale na
   produkcji obie deklaracje sa martwe - przegrywaja z inline'owym
   position:absolute i z-index RevSlidera. Przepisane zywcem wyrywaly
   nasz przycisk stojacy (.fea-btn--stoi) z pozycjonowania: ladowal
   w toku kolumny na x=902 zamiast x=188 (pomiar 2026-09-14). */
.fea-hero .button_rev02 {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1em),
    calc(100% - 0.5em) calc(100% - 0.5em), calc(100% - 1em) 100%, 0 100%);
}

.fea-hero .button_rev02:hover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #3EE622;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1em),
    calc(100% - 0.5em) calc(100% - 0.5em), calc(100% - 1em) 100%, 0 100%,
    0 0, 2px 2px, 2px calc(100% - 2px),
    calc(100% - 1em - 1px) calc(100% - 2px),
    calc(100% - 0.5em - 2px) calc(100% - 0.5em - 1px),
    calc(100% - 2px) calc(100% - 1em - 1px), calc(100% - 2px) 2px, 2px 2px);
}

.fea-hero .button_rev02_white svg { height: auto; padding-bottom: 2px; }
.fea-hero .button_rev02_white:hover svg { margin-left: 25px !important; transition: 0.5s; }
.fea-hero .button_rev02_white:focus { border: black solid 2px; }

/* Ikona przepisana ze zrodla niesie wlasne marginesy, wiec odstep
   flexowy przycisku schodzi do zera. Przycisk sklada sie przy tym
   W WIERSZU, nie we flexie: oryginal to blok z trescia
   "Ask for an offer " + <svg>, wiec spacja przed ikona ma szerokosc
   (ok. 4 px przy 16 px pisma), a ikona stoi na linii bazowej napisu.
   Flex gubil spacje i centrowal ikone w pionie: przycisk Centrum /en/
   byl o 4,5 px wezszy przy 1440 i o 18 px przy 390 (razem z marginesem
   ikony liczonym w siatce; CLR-31 poz. 76, 77, 90; pomiar 2026-10-12). */
.fea-hero .fea-btn--svg-zrodla { gap: 0; display: inline-block; white-space: nowrap; }
.fea-hero .fea-btn--svg-zrodla svg { display: inline; vertical-align: baseline; }

/* Y) ZNACZNIK LISTY W WARSTWIE: <i class="fa-square"> przed napisem.

   W oryginale kwadracik rysuje glif Font Awesome, ktory RevSlider
   dociaga wlasnym JS-em - po zdjeciu wtyczki zniknie. Rysujemy wiec
   kwadrat sami: pudelko w em tla currentColor, wiec kolor idzie
   z inline'owego stylu znacznika (#3EE522), a rozmiar z jego
   font-size 0.5em - jak glif na produkcji (6x7px przy pismie 14px). */
/* Selektor obejmuje WSZYSTKIE miejsca, w których znacznik może stanąć:
   warstwę sceny, listę metryczki i przycisk. Na stronie głównej impib
   nazwy miast są warstwami typu button, więc kwadracik trafiał poza
   zasięg tej reguły i zamiast 6x7px rysował się jako pusty wiersz 2x15
   (zgłoszenie 2026-09-16). */
.fea-hero .fea-warstwa i[class*="fa-"],
.fea-hero .fea-btn i[class*="fa-"],
.fea-hero .fea-hero__tags i[class*="fa-"],
.fea-hero .fea-hero__meta i[class*="fa-"] {
  display: inline-block;
  width: .875em;
  height: 1em;
  background: currentColor;
  font-style: normal;
}

/* Przycisk jest pudełkiem flex, więc spacja ze źródła (znacznik + " " +
   napis) przepada — każdy węzeł staje się osobnym elementem flex, a wiodące
   białe znaki lecą do kosza. Oddajemy ją marginesem: 0.5em LICZONE NA
   ZNACZNIKU, który ma font-size 0.5em, czyli ~3,3px przy piśmie 13px —
   tyle, ile szeroka jest spacja w oryginale (pomiar 2026-09-16). */
.fea-hero .fea-btn i[class*="fa-"] { margin-right: .5em; }

/* Z) PANEL WYDARZENIA: GRAFIKA TEŻ STOI NA WYMIARACH ZE ŹRÓDŁA.

   Reguła układu „event" narzucała pudełku grafiki sztywne
   `width: min(620px, 46cqi)` i rozciągała je na całą wysokość sceny
   (`top: 0; bottom: 0`), więc wymiary zapisane w warstwie nie dochodziły
   do skutku. Na stronie głównej /en/ zdjęcie wychodziło 620×640 zamiast
   źródłowych 780×667 i kończyło się 26 px NAD zieloną kreską postępu —
   stąd wrażenie, że kreska wisi nisko, oddzielona od fotografii
   (zgłoszenie 2026-09-16). W oryginale zdjęcie ma ujemne odsunięcie od
   dołu i celowo wchodzi pod kreskę, gdzie przycina je kadr.

   Zmierzone względem ORYGINALNEGO RevSlidera na tej samej stronie
   testowej (suma błędów x+y+szer+wys): pimot/konferencja 571→2,
   git/konferencja-pemine 408→1, kit 356→26, lukasiewicz.gov.pl/en/
   335→20. Poniżej 781 px kontenera nic nie ruszamy — tam grafika wraca
   do toku i zajmuje całą szerokość, tak jak dotąd. */
@container hero (min-width: 781px) {
  .fea-hero--event .fea-hero__media[style*="--fea-img-w"] { width: var(--fea-img-w); }

  /* Margines siatki projektowej liczony tak samo jak w pozostałych
     układach — bez niego warstwa kotwiczona do prawej kleiła się do
     krawędzi kadru zamiast do krawędzi siatki (kit: 116 px za daleko). */
  .fea-hero--event .fea-hero__media[style*="--fea-img-right"] {
    --fea-img-gut: max(0px, calc((100cqw - min(var(--fea-grid-img, 1280px), 100cqw)) / 2));
    right: calc(var(--fea-img-gut) + var(--fea-img-right, 0px));
    left: auto;
  }

  .fea-hero--event .fea-hero__media[style*="--fea-img-h"] {
    height: var(--fea-img-h);
    top: auto;
    bottom: auto;
  }
  .fea-hero--event .fea-hero__media[style*="--fea-img-top"] {
    top: calc(var(--fea-img-top) * var(--fea-jedn));
    bottom: auto;
  }
  /* `cover`, nie `contain` — jak w bloku T: RevSlider przycina zdjęcie do
     zapisanego pudełka, zamiast zostawiać wokół niego puste pasy. */
  .fea-hero--event .fea-hero__media[style*="--fea-img-h"] > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* AA) PASEK POSTĘPU NA KRAWĘDZI KADRU, NAWIGACJA POD KADREM.

   Blok L słusznie wyjął nawigację z toku (inaczej dokładała 79 px do
   wysokości sekcji), ale zostawił ją WEWNĄTRZ kadru: cały spód —
   pasek postępu, licznik i strzałki — siedział przy dolnej krawędzi
   slidera i kładł się na zdjęciu. Na stronie głównej pasek wypadał
   74 px nad krawędzią, przecinając fotografię w poprzek
   (zgłoszenie 2026-09-16).

   Oryginał robi to inaczej: pasek leży dokładnie na dolnej krawędzi
   modułu, a strzałki z licznikiem WYSTAJĄ pod niego — moduł zostaje
   wysoki na samą scenę, więc treść pod sliderem się nie przesuwa.
   Odtwarzamy to, zdejmując nawigację z toku spodu (`top: 100%`):
   pasek zostaje sam w spodzie i ląduje na krawędzi, nawigacja zwisa
   poniżej i nie zasłania niczego w kadrze.

   Zmierzone na 6 stronach z nawigacją (pasek: nasz → oryginał):
   lukasiewicz 561→635 = 635, git 461→535 = 535, iel 561→635 = 635,
   ilot/itr/imif 314→389 = 389. Poniżej 901 px kontenera nic nie
   ruszamy — tam slider się składa i nawigacja zostaje w toku. */
@container hero (min-width: 901px) {
  .fea-hero .fea-hero__spod .fea-hero__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Strzałki stoją przy LEWEJ krawędzi kadru, a nie przy kolumnie
       tekstu: oryginał daje im x=0 na każdej z 6 zmierzonych stron,
       nasza nawigacja dziedziczyła wcięcie kolumny (90–100 px). */
    padding-inline: 0;
    /* 18 px dawało strzałki równo 4 px nad oryginałem na wszystkich
       zmierzonych stronach. */
    padding-top: 22px;
  }
}

/* AA2) NAWIGACJA POD KADREM TAKZE NA TELEFONIE.

   Oryginal stawia strzalki 15 px POD modulem na kazdej z czterech
   zmierzonych karuzel (kit, piap, imif, itr @390: modul 290 lub 580,
   strzalki na y = modul + 15, 12 px wysokie). U nas siedzialy w kadrze
   (y = 245 przy 290) i na itee / lezaly na napisie "nauce i gospodarce"
   (CLR-35 poz. 123). Przy scenie PROPORCJONALNEJ oryginal rezerwuje pod
   modulem 40 px (rs-module-wrap 330 = 290 + 40), przy pikselowej nie
   (kit: wrap 580, strzalki wystaja na kolejna sekcje) - robimy tak samo. */
@container hero (max-width: 560px) {
  .fea-hero .fea-hero__spod .fea-hero__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 13px var(--fea-pad, 20px) 0;
  }
  /* Zapas 40 px pod kadrem przy scenie proporcjonalnej (kadr ma wtedy
     --fea-jedn-m liczone z cqw). Nie na .fea-hero: to kontener zapytania
     i wlasna regula @container go nie obejmuje. Margines kadru powieksza
     sekcje, a strzalki licza sie od dolu spodu, czyli 40 px nizej. */
  .fea-hero .fea-hero__stage[style*="--fea-jedn-m: calc"] {
    margin-bottom: 40px !important;
  }
  .fea-hero:has(.fea-hero__stage[style*="--fea-jedn-m: calc"]) .fea-hero__spod .fea-hero__nav {
    top: auto;
    bottom: 6px;
    padding-top: 0;
  }
}

/* AB) HOVER PRZYCISKU Z DANYCH WARSTWY: KOLOR NAPISU I ROZJAŚNIENIE.

   Tło po najechaniu czytaliśmy już z warstwy (blok wyżej), ale kolor
   napisu i rozjaśnienie nie. Na git `/certyfikacja/` cztery zielone
   pigułki w oryginale bielą napis i rozjaśniają się o 120%, a „CENTRUM
   SPAWALNICTWA" zmienia tło na czarne — u nas nie działo się nic
   (zgłoszenie 2026-09-16). `!important`, bo kolor spoczynkowy stoi
   w atrybucie style i normalnie bije regułę arkusza. */
.fea-hero .fea-btn[style*="--fea-btn-kolor-h"]:hover,
.fea-hero .fea-btn[style*="--fea-btn-kolor-h"]:focus-visible {
  color: var(--fea-btn-kolor-h) !important;
}

.fea-hero .fea-btn[style*="--fea-btn-jasnosc-h"]:hover {
  filter: brightness(var(--fea-btn-jasnosc-h));
}

/* Napis wyśrodkowany ze źródła (idle.textAlign=center). Przycisk jest
   flexem, więc samo text-align nie wystarczy. */
.fea-hero .fea-btn--srodek {
  justify-content: center;
  text-align: center;
}

/* AC) PRZYCISK GRAFICZNY: GRAFIKA, WCIĘCIA I HOVER JAK W ŹRÓDLE.

   Trzy usterki z jednej strony (git `/miedzynarodowa-konferencja-
   spawalnicza/`, zgłoszenie 2026-09-16):

   1. Nasze reguły hoveru używały skrótu `background`, który zeruje także
      `background-image` — pigułka „zarejestruj się" bielała na najechaniu
      i traciła grafikę, choć źródło mówi wprost `rgba(0,0,0,0)`, czyli
      żadnej zmiany. Zmieniamy tylko `background-color`.
   2. Ikona narzędzia dzieliła pudełko z podpisem (flex: ikona + napis
      w słupku), więc wychodziła o ~20% mniejsza niż w oryginale, gdzie
      jest tłem CAŁEJ warstwy, a podpis spada pod nią górnym wcięciem
      (152 z siatki 3840 = 57 px przy kadrze 1440).
   3. Wcięcia pigułki (55/0/0/150 → 21/0/0/56 px) robią miejsce na ikonę
      wrysowaną w grafikę; bez nich napis szedł na nasze zaszyte 16/40
      i nasuwał się na tę ikonę. To już naprawia silnik — tutaj tylko
      pilnujemy, żeby nasz padding nie wracał przez skrót. */
.fea-hero .fea-btn--graf:hover,
.fea-hero .fea-btn--graf:focus-visible {
  background-color: transparent;
}

/* Ikona narzędzia jako tło całego pudełka, podpis pod nią - dokładnie jak
   w warstwie źródłowej. Wchodzi TYLKO wtedy, gdy źródło podaje wcięcie
   górne; paski bez tej wartości zostają przy dotychczasowym słupku. */
.fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie[style*="--fea-narz-pad"] {
  display: block;
  padding-top: calc(var(--fea-narz-pad) * var(--fea-jedn));
  background-image: var(--fea-ikona);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  overflow: visible;
}

.fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie[style*="--fea-narz-pad"] i {
  display: none;
}

.fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie[style*="--fea-narz-pad"] span {
  display: block;
  text-align: center;
  white-space: nowrap;
}

/* AD) GÓRNE WCIĘCIE ZE ŹRÓDŁA USTAWIA NAPIS, NIE FLEX.

   RevSlider składa przycisk blokowo: napis siada dokładnie na górnym
   wcięciu warstwy. Nasz przycisk jest flexem z `align-items: center`,
   więc treść była dodatkowo centrowana w pudełku i napis spadał niżej —
   na git `/miedzynarodowa-konferencja-spawalnicza/` o 10 px na pigułce
   „zarejestruj się" (19 px w oryginale, 29 u nas) i o 4 px na znaczniku
   „CENTRUM SPAWALNICTWA" (zgłoszenie 2026-09-16).

   Klasę dostają tylko przyciski z NIEZEROWYM wcięciem górnym ze źródła.
   Pigułki z wcięciem `0 28px` centrują napis interlinią — tak jak
   oryginał — i muszą zostać przy dotychczasowym centrowaniu. */
.fea-hero .fea-btn--gora {
  align-items: flex-start;
}

/* AE) KADR MA WŁASNY KONTEKST NAKŁADANIA.

   Nawigacja zwisa pod kadrem (blok AA) — tak jak w oryginale, gdzie
   strzałki wystają poniżej modułu. Na stronie testowej pod naszym
   widgetem stoi jeszcze ORYGINALNY RevSlider, którego warstwy wchodziły
   wtedy na strzałki i przechwytywały kliknięcia: na git `/` element pod
   kursorem w punkcie strzałki to było `rs-slide`, nie nasz przycisk, więc
   strzałki nie reagowały (zgłoszenie 2026-09-16).

   `z-index` na samym pasku spodu nie wystarczał — dopiero własny kontekst
   nakładania na całym kadrze stawia zwisającą nawigację nad sąsiednią
   sekcją (sprawdzone pomiarem: `elementFromPoint` zwraca wtedy naszą
   strzałkę). Wartość 5 jest niska celowo: nagłówek witryny, banner cookie
   i widget dostępności mają swoje setki i nadal są nad nami. */
.fea-hero {
  position: relative;
  z-index: 5;
}

/* AF) PUNKTOR OKRĄGŁY, GDY ŹRÓDŁO MÓWI `fa-circle`.

   Znaczniki listy rysujemy sami (blok Y), bo w oryginale to glify Font
   Awesome dociągane JS-em RevSlidera. Kwadrat pasuje do `fa-square`,
   ale na git `/udostepnianie-logo/` punktory to `fa-circle` i muszą być
   kółkami — tam każda kropka stoi jako OSOBNA warstwa, której całą
   treścią jest sam znacznik (zgłoszenie 2026-09-16). */
.fea-hero .fea-warstwa i[class*="fa-circle"],
.fea-hero .fea-btn i[class*="fa-circle"],
.fea-hero .fea-hero__tags i[class*="fa-circle"],
.fea-hero .fea-hero__meta i[class*="fa-circle"] {
  width: 1em;
  border-radius: 50%;
}

/* AG) KOLOR NAPISU PRZYCISKU ZE ŹRÓDŁA BIJE REGUŁĘ MOTYWU.

   Motyw trzyma na odnośnikach `color` z `!important`, więc kolor wpisany
   przez nas w atrybut style przegrywał — nasz przycisk jest `<a>`,
   a w oryginale ta warstwa odnośnikiem NIE jest, dlatego tam czerń
   zostaje. Na icso `/kariera/` napis wychodził #030014 zamiast
   źródłowego #000000 w obu językach (zgłoszenie 2026-09-16).

   Zmienna nazwana `--fea-btn-napis`, nie `--fea-btn-kolor`, bo selektor
   atrybutowy złapałby też `--fea-btn-kolor-h` od hoveru. */
.fea-hero .fea-btn[style*="--fea-btn-napis"] {
  color: var(--fea-btn-napis) !important;
}

/* AH) PRAWE WCIĘCIE AKAPITU ZE ŹRÓDŁA.

   Warstwa akapitu ma w RevSliderze wcięcia z obu stron (na icso `/en/`
   `l:20, r:15` przy pudełku 713 px). Lewe już przenosiliśmy — napis
   zaczynał się w tym samym punkcie — ale prawego nie, więc wiersz miał
   708 px zamiast 678 i tekst łamał się później: pierwszy wiersz
   wychodził 693 px zamiast 583 (zgłoszenie 2026-09-16). */
.fea-hero__slide[style*="--fea-d-prawa"] .fea-hero__text > .fea-hero__lead:not(.fea-hero__lead--drugi) {
  padding-right: var(--fea-d-prawa);
}
.fea-hero__slide[style*="--fea-d2-prawa"] .fea-hero__text > .fea-hero__lead--drugi {
  padding-right: var(--fea-d2-prawa);
}

/* AI) PLAKIETKI: blok tekstu w kolorowym pudełku.

   ILOT (pl i en, strony główne) stawia każdy wiersz nagłówka w zielonym
   pudełku #3EE622, a wezwanie „Sprawdź naszą ofertę" w czarnym z białym
   pismem — w źródle to tło warstwy plus jej wcięcie 12/24. Dopóki slajd
   renderował się bez zdjęcia tła, brak pudełek nie był widoczny; po
   wczytaniu fotografii ciemne pismo zostawało wprost na niej i „Sprawdź
   naszą ofertę" było nieczytelne (zgłoszenie 2026-09-16).

   W całej sieci kolorowe tło pod tekstem ma wyłącznie ILOT: przegląd 138
   stron dał 24 takie warstwy na dwóch stronach głównych, a wszystkie
   pozostałe trafienia to białe przypinki, które idą własną ścieżką
   (.fea-hero__badge). Dlatego reguły są zawężone klasą .fea-hero__plakietka,
   nadawaną tylko blokom, które mają tło w źródle.

   Pudełko HUGUJE tekst (width: fit-content), bo tak robi oryginał: warstwa
   „100 lat doświadczenia" ma w źródle 1398px siatki (437px w kadrze), a
   zielone pole na produkcji jest szerokie na 385px, czyli dokładnie na
   napis. Źródłowa szerokość zostaje jako max-width, żeby wiersze łamały
   się tam, gdzie w oryginale.

   Wcięcie idzie w parze z UJEMNYM marginesem: napis stoi już na
   współrzędnej liczonej od pudełka warstwy, więc samo dopełnienie
   zepchnęłoby litery o 24px w prawo i 12px w dół. */
/* max-content, NIE fit-content: fit-content zawęża pudełko do wolnego
   miejsca w kolumnie, a wezwanie ILOT-u stoi przy prawej krawędzi, gdzie
   zostaje 177px - napis łamał się wtedy na trzy wiersze i pudełko rosło do
   146px wysokości przy 57px w oryginale.

   Pudełko nie ma też limitu szerokości ze źródła: zapisana szerokość
   warstwy jest ciaśniejsza niż napis, który oryginał trzyma w jednym
   wierszu (ILOT /en/, "to the future": u nas z limitem 202px i drugi
   wiersz, na produkcji 288px w jednym). RevSlider rozciąga takie warstwy
   do treści, więc i my (pomiar 2026-09-16). */
.fea-hero .fea-hero__plakietka {
  width: max-content;
  box-decoration-break: clone;
}

/* Pudelko NIE WEZSZE niz w zrodle. Reguly wyzej zostawiaja szerokosc
   trescia (max-content), bo zapisana szerokosc bywa ciasniejsza od napisu.
   Bywa jednak i odwrotnie: czarne pole "Jestes inzynierem?" na ILOT
   /kariera/pracuj-z-nami/ ma w zrodle 2327px siatki przy napisie na 1716px,
   a napis stoi w nim na srodku. Minimalna szerokosc godzi oba przypadki -
   tresc szersza od zrodla dalej rozpycha pudelko (pomiar 2026-09-29:
   oryginal 873px i napis od 245px, my 683px i napis od 151px). */
.fea-hero .fea-hero__slide .fea-hero__text > .fea-hero__title.fea-hero__plakietka:not(.fea-hero__title--drugi) {
  min-width: var(--fea-h-w, 0);
  text-align: var(--fea-h-align, start);
}
.fea-hero .fea-hero__slide .fea-hero__text > .fea-hero__title--drugi.fea-hero__plakietka {
  min-width: var(--fea-h2-w, 0);
  text-align: var(--fea-h2-align, start);
}
.fea-hero .fea-hero__slide .fea-hero__text > .fea-hero__lead.fea-hero__plakietka:not(.fea-hero__lead--drugi) {
  min-width: var(--fea-d-w, 0);
  text-align: var(--fea-d-align, start);
}
.fea-hero .fea-hero__slide .fea-hero__text > .fea-hero__lead--drugi.fea-hero__plakietka {
  min-width: var(--fea-d2-w, 0);
  text-align: var(--fea-d2-align, start);
}

/* Osobna reguła na każdy blok, bo każdy ma własną zmienną koloru.
   Selektory z .fea-hero__slide i .fea-hero__text biją wcześniejsze reguły
   wcięcia (--fea-d-wciecie, --fea-d-prawa), które ustawiają padding na tym
   samym elemencie - przy pudełku padding należy do pudełka. */
.fea-hero .fea-hero__slide .fea-hero__text > .fea-hero__title.fea-hero__plakietka:not(.fea-hero__title--drugi) {
  background: var(--fea-h-bg, transparent);
  padding: var(--fea-h-box, 0);
  margin: var(--fea-h-box-neg, 0);
}

.fea-hero .fea-hero__slide .fea-hero__text > .fea-hero__title--drugi.fea-hero__plakietka {
  background: var(--fea-h2-bg, transparent);
  padding: var(--fea-h2-box, 0);
  margin: var(--fea-h2-box-neg, 0);
}

.fea-hero .fea-hero__slide .fea-hero__text > .fea-hero__lead.fea-hero__plakietka:not(.fea-hero__lead--drugi) {
  background: var(--fea-d-bg, transparent);
  padding: var(--fea-d-box, 0);
  margin: var(--fea-d-box-neg, 0);
}

.fea-hero .fea-hero__slide .fea-hero__text > .fea-hero__lead--drugi.fea-hero__plakietka {
  background: var(--fea-d2-bg, transparent);
  padding: var(--fea-d2-box, 0);
  margin: var(--fea-d2-box-neg, 0);
}

/* Ujemny margines nie może zjadać odstępu do bloku obok: kolumna tekstu
   jest siatką z gap, a pudełko ma zostać w swoim wierszu. */
.fea-hero .fea-hero__plakietka { position: relative; z-index: 1; }

/* AJ) LINK NA PLAKIETCE.

   RevSlider robi klikalnym cały slajd (rs-slide data-link z params.seo.link:
   na ILOT /en/ cztery slajdy prowadzą kolejno pod /en/offer/, /en/contact/,
   /en/career/, /en/offer/). U nas klikalny jest napis, który o to prosi —
   czarna plakietka z wezwaniem.

   Motyw maluje linki własnym kolorem i podkreśleniem, w dodatku z
   !important (ta sama pułapka, co przy przyciskach CTA), więc napis w
   pudełku musi jawnie brać kolor i brak podkreślenia po rodzicu. */
.fea-hero .fea-hero__plakietka-link,
.fea-hero .fea-hero__plakietka-link:hover,
.fea-hero .fea-hero__plakietka-link:focus {
  color: inherit !important;
  text-decoration: none !important;
  background: none !important;
}

/* Celem kliknięcia jest cały napis, nie samo słowo: link rozciąga się na
   szerokość treści pudełka. Dopełnienie zostaje na pudełku - przeniesienie
   go na link przez `padding: inherit` dałoby zero, bo `inherit` bierze
   wartość WYLICZONĄ z rodzica, którą ta sama reguła by wyzerowała. */
.fea-hero .fea-hero__plakietka > .fea-hero__plakietka-link { display: block; }

/* AK) METRYCZKA STOJĄCA W PIONIE, NA WSPÓŁRZĘDNYCH ZE ŹRÓDŁA.

   RevSlider trzyma każdą pozycję metryczki jako osobną warstwę z własną
   wysokością. Nasza lista jest rzędem (flex-wrap), więc pozycje siadały
   obok siebie — a że akapit obok stoi na współrzędnych, czyli poza tokiem,
   lista wchodziła pod niego: na itee /kariera/ źródło ma pozycje na y=760
   i y=825 (237 i 257 px w kadrze), a u nas obie lądowały na y=187, na
   akapicie „Na finalistów olimpiad…" (zgłoszenie 2026-09-16).

   Reguła włącza się WYŁĄCZNIE wtedy, gdy silnik poda --fea-tags-abs, czyli
   gdy źródło naprawdę układa pozycje jedna pod drugą. Metryczki stojące
   w rzędzie (panele wydarzeń) zostają bez zmian. */
@container hero (min-width: 901px) {
  .fea-hero__slide[style*="--fea-tags-abs"] .fea-hero__text > .fea-hero__tags {
    position: absolute;
    top: calc(var(--fea-tags-abs) - var(--fea-tekst-gora, 0px));
    left: var(--fea-tekst-wciecie, 0px);
    margin-top: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
  }
  /* Krok miedzy pozycjami ze zrodla: kazda zajmuje dokladnie tyle, ile
     dzieli ja od nastepnej (itee: 65px siatki, czyli 20px w kadrze), wiec
     wszystkie lądują na swoich współrzędnych. */
  .fea-hero__slide[style*="--fea-tags-abs"] .fea-hero__text > .fea-hero__tags > li {
    min-height: var(--fea-tags-krok, auto);
  }
}

/* AL) POŚWIATA / PRZYCIEMNIENIE ZE ŹRÓDŁA.

   W RevSliderze to warstwa kształtu z tłem, leżąca pod treścią slajdu.
   Na PIAP jest to biała poświata na siatce kropek — gradient 90°,
   rgba(255,255,255,.8) do 40% i przezroczysty od 70%, warstwa 4043×900 na
   x=4, y=170. Bez niej akapit czytał się na pełnej gęstwinie kropek, bo
   samo zdjęcie tła wczytywaliśmy, a poświaty nad nim już nie
   (zgłoszenie 2026-09-16).

   Leży NAD zdjęciem tła (.fea-hero__backdrop, z-index 0) i POD kolumną
   tekstu oraz grafiką (z-index 1) — stąd zero i kolejność w HTML.
   Wymiary i współrzędne idą w pikselach siatki, więc skalują się razem
   ze slajdem; inline zostaje tylko to, co pochodzi ze źródła. */
.fea-hero .fea-hero__welon {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* AM) ODNOŚNIK WEWNĄTRZ ZDANIA.

   Źródło miewa link w środku akapitu — na PIAP zdanie kończy się adresem
   `przemysl.piap.pl` w kolorze #3ee622 i z podkreśleniem, zapisanym stylem
   przy samym `<a>`. Silnik przepuszcza ten styl (kolor i podkreślenie), ale
   `white-space: nowrap` przepada w `wp_kses`, bo `safecss_filter_attr()` nie
   zna tej deklaracji — dlatego zakaz łamania idzie klasą.

   Kolor i podkreślenie muszą wygrać z regułą MOTYWU, która maluje wszystkie
   odnośniki własną barwą z `!important` — a nasz inline `color` przegrywał
   z nią tak samo, jak kiedyś napis przycisku. Dlatego wartość ze źródła
   jedzie ZMIENNĄ, a regułę z `!important` piszemy sami. Pierwsza próba użyła
   `revert !important` i wyszło jeszcze gorzej: odnośnik dostawał domyślny
   niebieski przeglądarki zamiast zielonego #3EE622 ze źródła
   (pomiar 2026-09-16: my rgb(0,0,238), oryginał rgb(62,230,34)).

   Klasy dokładamy tylko wtedy, gdy źródło naprawdę coś mówi — odnośnik bez
   własnego stylu zostaje motywowi, dokładnie jak w oryginale. */
.fea-hero .fea-link--kolor { color: var(--fea-link-kolor) !important; }
.fea-hero .fea-link--dek   { text-decoration: var(--fea-link-dek) !important; }
.fea-hero .fea-link--bez-lamania { white-space: nowrap; }

/* AN) WIDOK PORÓWNAWCZY: NASZ WIDGET I ORYGINAŁ W JEDNYM RZĘDZIE FLEX.

   Na czas przeglądu obie wersje stoją w tej samej kolumnie Elementora:
   nasza wstawka (klasa `fea-hero-porownanie`) i widget RevSlidera. Gdy
   kontener jest rzędem flex — a na pimot jest (`display:flex;
   flex-direction:row; flex-wrap:nowrap`) — nasz widget zjada całą
   szerokość rzędu, pudełko oryginału kurczy się do 0 px, ale jego moduł
   jest pozycjonowany bezwzględnie i dalej maluje się na pełną szerokość.
   Efekt: oba slidery rysują się jeden na drugim (zgłoszenie 2026-09-16;
   pomiar: nasz widget x=10 szer. 1180, widget RevSlidera x=1190 szer. 0,
   oba na y=85, wysokość 450).

   Reguła obowiązuje WYŁĄCZNIE wtedy, gdy oryginał nadal jest na stronie —
   czyli dokładnie w tym układzie porównawczym. Po zdjęciu RevSlidera
   selektor przestaje pasować i nic nie zmienia. */
.e-con-inner:has(> .fea-hero-porownanie):has(> .elementor-widget-slider_revolution),
.elementor-widget-wrap:has(> .fea-hero-porownanie):has(> .elementor-widget-slider_revolution) {
  flex-wrap: wrap;
}

/* Cały rząd bierze i nasza wstawka, i widget oryginału. Samo `flex-basis`
   na naszej wstawce nie wystarczy: pudełko RevSlidera ma po zawinięciu
   ZEROWĄ szerokość, a element zerowy zawsze mieści się w rzędzie, więc
   zostawał obok nas i jego moduł dalej malował się na wierzchu
   (pomiar 2026-09-16: widget oryginału x=1190, szerokość 0, y=85). */
.e-con-inner:has(> .elementor-widget-slider_revolution) > .fea-hero-porownanie,
.elementor-widget-wrap:has(> .elementor-widget-slider_revolution) > .fea-hero-porownanie,
.e-con-inner:has(> .fea-hero-porownanie) > .elementor-widget-slider_revolution,
.elementor-widget-wrap:has(> .fea-hero-porownanie) > .elementor-widget-slider_revolution {
  flex-basis: 100%;
  min-width: 0;
}

/* ============================================================
   AG) SKLADANIE SLAJDU NA TELEFONIE

   Zgloszenia CLR-25, CLR-26, CLR-27 i CLR-28 mowia w kolko to samo:
   "rozjazd widokow, napisy nachodza na siebie" i "napisy za male"
   w wersji mobilnej. To 70 pozycji na 103. Pomiar przy 390 px
   (git /miedzynarodowa-konferencja-spawalnicza/, icso /kariera/,
   wit /poznaj-nas/, Centrum /) pokazal trzy przyczyny, wszystkie tutaj.

   1. SLAJD ZOSTAWAL DWUKOLUMNOWY. Regula skladajaca go do jednej
      kolumny ma selektor .fea-hero .fea-hero__slide (0,2,0), a podzial
      kolumn ze zrodla dwa :not() (0,4,0) i wygrywa niezaleznie od
      kolejnosci w arkuszu. Przy 390 px grafika dostawala 164 px,
      a tekst 182 px, wiec kazdy napis lamal sie po dwa slowa.
   2. INTERLINIA WARSTW SZLA Z SIATKI. Stopien pisma wracal do clamp,
      ale --wlh zostawalo przeliczane jednostka siatki: 16,4 px pisma
      na 8,1 px interlinii. Stad wiersze jeden na drugim.
   3. PISMO ZE ZRODLA KURCZYLO SIE BEZ DNA. --fea-cta-size i stopnie
      akapitow sa w pikselach siatki projektowej (3840), wiec przy
      390 px dawaly 5,5 px na przycisku i 7,3 px w akapicie.
      Przyciski stojace zostawaly przy tym na wspolrzednych, bo regula
      z position: absolute stoi PO regule skladajacej przy tej samej
      specyficznosci.

   Blok jest na koncu arkusza i ma podniesiona specyficznosc, zeby nie
   wracac do tego przy kazdym nowym wariancie ukladu. Prog 780 px to
   ten sam, ktory arkusz uzywa juz dla paska akcji i przyciskow.
   ============================================================ */
@container hero (max-width: 780px) {

  /* 1. Jedna kolumna. Tablica i rozdroze maja wlasne uklady i zostaja. */
  .fea-hero .fea-hero__slide:not(.fea-hero__slide--tablica):not(.fea-hero__slide--rozdroze) {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  /* Gdy tresc niesie scena warstw, tekst idzie pierwszy, grafika pod nim.
     Inaczej zostaje dotychczasowa kolejnosc z grafika na gorze. */
  .fea-hero .fea-hero__slide:has(> .fea-hero__scena) .fea-hero__scena { order: 0; }
  .fea-hero .fea-hero__slide:has(> .fea-hero__scena) .fea-hero__media { order: 1; }

  /* 2. Warstwy tekstu: interlinia z proporcji pisma, a nie z siatki.
        Wciecie ze zrodla tez jest w pikselach siatki, wiec na telefonie
        znaczy tyle co nic i tylko przesuwa napis. */
  .fea-hero .fea-hero__scena .fea-warstwa,
  .fea-hero .fea-warstwa {
    line-height: 1.3;
    padding: 0;
    width: auto;
    max-width: 100%;
  }

  /* 3a. Przyciski stojace wracaja do toku tresci. */
  .fea-hero .fea-btn--stoi,
  .fea-hero .fea-btn--stoi.fea-btn--kot-lewo,
  .fea-hero .fea-btn--stoi.fea-btn--kot-prawo,
  .fea-hero .fea-btn--stoi.fea-btn--kot-srodek {
    position: static;
    inset: auto;
    transform: none;
    width: auto !important;
    margin: 0;
  }

  /* 3b. Czytelny rozmiar napisu na kazdym przycisku. Wartosci ze zrodla
         ida atrybutem style, wiec bez !important nie da sie ich zdjac. */
  .fea-hero .fea-btn {
    font-size: clamp(13px, 3.4cqw, 16px) !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 40px;
    padding: 10px 18px !important;
  }

  /* Przycisk z grafika w tle: grafika jest cala skorka pigulki, wiec
     zostaje rozciagnieta na pudelko, a napis dostaje miejsce na ikone
     po lewej. Pudelko bierze szerokosc z tresci, zeby proporcja grafiki
     zostala bliska zrodlowej (w zrodle pigulka ma 560 na 150). */
  /* Selektor z dwiema klasami (0,3,0), bo regula przyciskow stojacych
     wyzej ma warianty kotwic .fea-btn--stoi.fea-btn--kot-lewo o tej samej
     wadze i inaczej jej `width: auto` wygrywa, a pigulka rozciaga sie
     na cala kolumne. */
  .fea-hero .fea-btn.fea-btn--graf {
    width: fit-content !important;
    justify-self: start;
    align-self: start;
    padding-left: 46px !important;
    padding-right: 20px !important;
    min-height: 44px;
    background-size: 100% 100% !important;
    background-position: center !important;
  }

  /* 3c. Dno dla naglowka. Stopien ze zrodla skaluje sie z siatka, wiec
     na seminariach git tytul "Seminarium:" schodzil przy 390 px do
     10,2 px. max() podnosi tylko te naglowki, ktore zeszly za nisko. */
  .fea-hero .fea-hero__slide .fea-hero__title,
  .fea-hero .fea-hero__slide .fea-hero__title--drugi {
    font-size: max(20px, var(--fea-h-size, clamp(20px, 6cqw, 32px)));
    line-height: 1.2;
  }

  /* 3d. Dna dla pisma ze zrodla w pozostalych blokach. */
  .fea-hero .fea-hero__lead,
  .fea-hero .fea-hero__subline {
    font-size: clamp(14px, 3.8cqw, 17px) !important;
    line-height: 1.45 !important;
  }
  .fea-hero .fea-hero__meta li,
  .fea-hero .fea-hero__tags li {
    font-size: clamp(13px, 3.4cqw, 15px) !important;
    line-height: 1.4 !important;
  }

  /* Grafika ma ze zrodla odsuniecie poziome w pikselach siatki
     (--fea-img-x, na itee 1781). Po zlozeniu do jednej kolumny to
     odsuniecie wypychalo zdjecie 161 px poza prawa krawedz okna i cala
     strona dawala sie przewijac w bok. W ukladzie jednokolumnowym
     odsuniecie nie ma juz czego wyrownywac, wiec je zerujemy. */
  .fea-hero .fea-hero__media {
    --fea-img-x: 0px !important;
    justify-self: center;
    margin-inline: 0;
    max-width: 100%;
  }
  .fea-hero .fea-hero__media img { max-width: 100%; height: auto; }

  /* Rzad przyciskow na telefonie zawija sie zamiast wystawac poza kadr. */
  .fea-hero .fea-hero__scena {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* ============================================================
   AH) ZESTAW STYLOW MOTYWU BIJE NASZE NAGLOWKI

   Tytul tablicy i zdanie rozdroza renderuja sie znacznikiem ze zrodla,
   czyli najczesciej <h2>. Motyw ma w zestawie Elementora regule
   `.elementor-kit-450 h2` (0,1,1), a nasze reguly klasowe maja (0,1,0),
   wiec to motyw ustawial im stopien pisma i interlinie:

     desktop:  font-size 64px, line-height 72px
     telefon:  font-size 32px, line-height 38em

   38em to 1216 px na wiersz. Na git / przy 390 px tytul "Konferencje,
   seminaria, webinaria" mial przez to 2432 px wysokosci, slajd urosl do
   3104 px i cala plansza sie rozjechala. To jest ten "rozjazd widokow"
   ze zgloszen, tylko ze zrodlem w motywie, nie w naszym ukladzie.

   Nie ruszamy motywu: powtarzamy wlasne wartosci z przedrostkiem
   .fea-hero, czyli (0,2,0), i to wystarcza.
   ============================================================ */
.fea-hero .fea-tablica__nad,
.fea-hero .fea-tablica__tytul,
.fea-hero .fea-rozdroze__zdanie {
  font-size: calc(101 * var(--fea-jedn));
  line-height: calc(122 * var(--fea-jedn));
}

@container hero (max-width: 780px) {
  .fea-hero .fea-tablica__nad,
  .fea-hero .fea-tablica__tytul,
  .fea-hero .fea-rozdroze__zdanie {
    font-size: clamp(20px, 6cqw, 34px);
    line-height: 1.18;
    margin-left: 0;
  }

  /* Karty wydarzen i pigulki tez sa w pikselach siatki: przy 390 px
     pigulka miala 2,5 px pisma i 7 px wysokosci. */
  .fea-hero .fea-tablica__pigulka {
    font-size: clamp(12px, 3.2cqw, 15px);
    line-height: 1.3;
    padding: 8px 14px;
    /* Szerokosc tez byla w pikselach siatki: 408 z 3840 to przy 390 px
       kadru 41 px, wiec napis "STRONA WYDARZENIA" wychodzil z pigulki
       i zostawala z niej zielona kropka. Na telefonie pigulka bierze
       szerokosc karty, tak jak na produkcji (pomiar 2026-09-29). */
    width: 100%;
  }

  /* Ta sama sprawa z grafika "Zobacz inne wydarzenia": 519 px siatki to
     przy 390 px kadru 53 px, a oryginal ma na telefonie 185x73 przy prawej
     krawedzi. RevSlider czyta dla telefonu wlasny wymiar warstwy, my mamy
     jeden - wiec na waskim ekranie liczymy go udzialem w kadrze i dosuwamy
     do prawej, tak jak w oryginale (pomiar 2026-09-29). */
  .fea-hero .fea-tablica__blok {
    display: flex;
    justify-content: flex-end;
  }
  .fea-hero .fea-tablica__blok img {
    width: clamp(140px, 47cqw, 200px);
    /* Kres z szerszego progu (1000 px siatki) trzyma grafike na 101 px,
       wiec musi zejsc razem ze szerokoscia. */
    max-width: 47cqw;
    height: auto;
  }
  .fea-hero .fea-rozdroze__pin {
    font-size: clamp(11px, 3cqw, 14px);
    line-height: 1.25;
  }
}

/* ============================================================
   AI) FILM W TLE SLAJDU (CLS/CLR-28 poz. 71)

   RevSlider potrafi dac slajdowi tlo filmowe: plik mp4 (type=html5)
   albo film z YouTube. Zdjecie z params.bg.image jest wtedy plakatem.
   Widget dotad czytal tylko obraz, wiec strona glowna INS szla bez filmu,
   ktory na produkcji jest.

   Film lezy nad plakatem, a pod welonami i trescia, nie lapie klikniec
   i przy ustawieniu "ogranicz ruch" w systemie chowa sie calkiem -
   zostaje sam plakat.
   ============================================================ */
.fea-hero .fea-hero__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border: 0;
  pointer-events: none;
  object-fit: cover;
}

/* Osadzenie z YouTube nie ma object-fit, wiec kadrujemy je samodzielnie:
   ramka 16:9 rozciagnieta tak, zeby zawsze wypelnila kadr, wysrodkowana. */
.fea-hero .fea-hero__film--yt { overflow: hidden; }
.fea-hero .fea-hero__film--yt iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, calc(100% * 16 / 9 * 1));
  height: max(100%, calc(100cqw * 9 / 16));
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fea-hero .fea-hero__film { display: none; }
}

/* ============================================================
   AJ) GRUBOSC PISMA ZE ZRODLA

   Arkusz ustawia naglowkom i akapitom jedna wage (400 dla Light,
   500 dla naglowkow), a zrodlo trzyma idle.fontWeight osobno dla kazdej
   warstwy. Na seminariach git naglowek ma 600, u nas wychodzil 400,
   stad cztery zgloszenia "nie pogrubiony tekst wzgledem poprzedniej
   wersji" (CLR-25 poz. 11, 13, 16 i CLR-26 poz. 24).

   Zmienne przychodza z atrybutu style slajdu, a domyslne wartosci
   zostaja dla slajdow bez zapisanej wagi.
   ============================================================ */
.fea-hero .fea-hero__slide .fea-hero__title { font-weight: var(--fea-h-waga, 500); }
/* Tablica i rozdroze maja wlasne klasy tytulu, a wage trzymaja w tej samej
   zmiennej co naglowek slajdu (oba pochodza z warstwy naglowkowej zrodla). */
.fea-hero .fea-tablica__tytul,
.fea-hero .fea-tablica__nad,
.fea-hero .fea-rozdroze__zdanie { font-weight: var(--fea-h-waga, 400); }
.fea-hero .fea-hero__slide .fea-hero__title--drugi { font-weight: var(--fea-h2-waga, 500); }
.fea-hero .fea-hero__slide .fea-hero__lead,
.fea-hero .fea-hero__slide .fea-hero__tagline { font-weight: var(--fea-d-waga, 400); }
.fea-hero .fea-hero__slide .fea-hero__lead--drugi { font-weight: var(--fea-d2-waga, 400); }
.fea-hero .fea-warstwa { font-weight: var(--wwaga, 400); }
.fea-hero .fea-hero__actions .fea-btn { font-weight: var(--fea-cta-waga, 500) !important; }

/* ============================================================
   AL) SCENA TELEFONU ZE ZRODLA

   Zgloszenie z 2026-09-30: "inna czcionka w tytule", "foto innych
   rozmiarow", "w oryginale foto jest w tle a u nas nad tekstem",
   "caly uklad niepoprawny", "ikonki sie rozjechaly". Pomiar produkcji
   przy kadrze 390 px pokazal, ze to nie sa osobne usterki, tylko jedna:
   RevSlider ma dla kazdej szerokosci WLASNA siatke projektowa i wlasny
   komplet wspolrzednych warstw, a my bralismy wylacznie wartosci
   desktopowe i skladalismy z nich plynaca kolumne.

   Przyklad z Centrum /produkty-i-uslugi/ (siatka telefonu 480x720,
   kadr 390 px, wiec wspolczynnik 0,8125):
     zrodlo telefon: zdjecie x=35 y=-19 438x414, naglowek x=33 y=200
       stopien 36 interlinia 38, akapit y=320 stopien 16, przyciski
       y=450 i y=510
     produkcja:      zdjecie 356x336 na y=-15, naglowek NA NIM na y=162
       stopien 29 interlinia 31, akapit y=260, przyciski y=365 i y=414
     my przed zmiana: zdjecie 350x503 na gorze, tekst POD nim na y=520,
       naglowek schowany, stopnie pisma z clamp() zamiast ze zrodla

   Dlatego na telefonie odtwarzamy scene tak samo jak na desktopie, tylko
   w jednostce telefonowej: --fea-jedn-m to 100cqw podzielone przez siatke
   telefonu, a kazdy blok dostaje swoje x, y, szerokosc, stopien pisma
   i interlinie ze zrodla.

   Prog 560 px, a nie 780: miedzy 560 a 780 RevSlider bierze juz wartosci
   tabletowe, ktorych nie przenosimy - tam zostaje dotychczasowe skladanie
   do jednej kolumny.

   Slajdy bez wartosci telefonowych (tablica wydarzen, rozdroze, dane
   sprzed tej migracji) nie maja --fea-scena-m i ida stara sciezka.
   ============================================================ */
@container hero (max-width: 560px) {

  .fea-hero .fea-hero__slide[style*="--fea-scena-m"]:not(.fea-hero__slide--tablica):not(.fea-hero__slide--rozdroze) {
    display: block;
    position: relative !important;
    height: calc(var(--fea-scena-m) * var(--jm, var(--fea-jedn-m))) !important;
    min-height: calc(var(--fea-scena-m) * var(--jm, var(--fea-jedn-m))) !important;
    padding: 0;
    overflow: hidden;
  }
  /* Kadr slidera tez ma wysokosc ze zrodla telefonu: 585 px przy 390 px
     szerokosci i scenie 720 (pomiar produkcji). Bez tego zostawalo
     awaryjne 580 px z progu 780 px. */
  .fea-hero .fea-hero__stage[style*="--fea-scena-m"] {
    height: calc(var(--fea-scena-m) * var(--jm, var(--fea-jedn-m))) !important;
    min-height: 0 !important;
  }
  /* Silnik 7 bez keepBPHeight skaluje wysokosc telefonu z kadrem, choc
     warstwy zostaja w pikselach: ins / ma 580 * 390 / 780 = 290 px
     (CLR-35 poz. 120). Zmienna liczy to w cqw - patrz Renderer. */
  .fea-hero .fea-hero__slide[style*="--fea-wysokosc-m"]:not(.fea-hero__slide--tablica):not(.fea-hero__slide--rozdroze) {
    height: var(--fea-wysokosc-m) !important;
    min-height: var(--fea-wysokosc-m) !important;
  }
  .fea-hero .fea-hero__stage[style*="--fea-wysokosc-m"] {
    height: var(--fea-wysokosc-m) !important;
  }

  /* Kolumna tekstu przestaje byc pudelkiem: jej dzieci maja stanac na
     wspolrzednych slajdu, tak jak warstwy sceny. */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] > .fea-hero__text {
    display: contents;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] > .fea-hero__scena {
    position: absolute !important;
    inset: 0;
  }

  /* --- bloki tekstu --- */
  .fea-hero .fea-hero__slide[style*="--fea-h-m-y"] .fea-hero__title:not(.fea-hero__title--drugi),
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-y"] .fea-hero__title--drugi,
  .fea-hero .fea-hero__slide[style*="--fea-d-m-y"] .fea-hero__lead:not(.fea-hero__lead--drugi),
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-y"] .fea-hero__lead--drugi {
    position: absolute !important;
    margin: 0 !important;
    max-width: none !important;
    z-index: 3 !important;
  }
  /* Drugi naglowek - te same reguly co pierwszy. Na ILOT to trzecia zielona
     plakietka ("w badaniach"), ktora bez nich zostawala w toku tresci. */
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-y"] .fea-hero__title--drugi {
    left: calc(var(--fea-h2-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--fea-h2-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--fea-h2-m-w, var(--fea-grid-m, 480)) * var(--jm, var(--fea-jedn-m))) !important;
    font-size: calc(var(--fea-h2-m-px, 36) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--fea-h2-m-lh, var(--fea-h2-m-px, 36)) * var(--jm, var(--fea-jedn-m))) !important;
    padding: var(--fea-h2-m-pad, 0) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-kx:srodek"] .fea-hero__title--drugi {
    left: calc(50% + var(--fea-h2-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    transform: translateX(-50%);
  }
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-kx:prawo"] .fea-hero__title--drugi {
    left: auto !important;
    right: calc(var(--fea-h2-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-h-m-y"] .fea-hero__title:not(.fea-hero__title--drugi) { padding: var(--fea-h-m-pad, 0); }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-y"] .fea-hero__lead:not(.fea-hero__lead--drugi) { padding: var(--fea-d-m-pad, 0); }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-y"] .fea-hero__lead--drugi { padding: var(--fea-d2-m-pad, 0); }
  .fea-hero .fea-hero__slide[style*="--fea-h-m-y"] .fea-hero__title:not(.fea-hero__title--drugi) {
    left: calc(var(--fea-h-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--fea-h-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--fea-h-m-w, var(--fea-grid-m, 480)) * var(--jm, var(--fea-jedn-m))) !important;
    font-size: calc(var(--fea-h-m-px, 36) * var(--jm, var(--fea-jedn-m)));
    line-height: calc(var(--fea-h-m-lh, var(--fea-h-m-px, 36)) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-y"] .fea-hero__lead:not(.fea-hero__lead--drugi) {
    left: calc(var(--fea-d-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--fea-d-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--fea-d-m-w, var(--fea-grid-m, 480)) * var(--jm, var(--fea-jedn-m))) !important;
    font-size: calc(var(--fea-d-m-px, 16) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--fea-d-m-lh, var(--fea-d-m-px, 16)) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-y"] .fea-hero__lead--drugi {
    left: calc(var(--fea-d2-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--fea-d2-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--fea-d2-m-w, var(--fea-grid-m, 480)) * var(--jm, var(--fea-jedn-m))) !important;
    font-size: calc(var(--fea-d2-m-px, 16) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--fea-d2-m-lh, var(--fea-d2-m-px, 16)) * var(--jm, var(--fea-jedn-m))) !important;
  }

  /* Kotwice poziome blokow tekstu. Przy kotwicy srodkowej x liczy sie od
     srodka siatki i bywa ujemny (plakietki ILOT-u: -152 px), przy prawej
     od prawej krawedzi. Bez tych regul napisy wyjezdzaly poza lewa krawedz
     (pomiar produkcji 2026-09-30). */
  .fea-hero .fea-hero__slide[style*="--fea-h-m-kx:srodek"] .fea-hero__title:not(.fea-hero__title--drugi) {
    left: calc(50% + var(--fea-h-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    transform: translateX(-50%);
  }
  .fea-hero .fea-hero__slide[style*="--fea-h-m-kx:prawo"] .fea-hero__title:not(.fea-hero__title--drugi) {
    left: auto !important;
    right: calc(var(--fea-h-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-kx:srodek"] .fea-hero__lead:not(.fea-hero__lead--drugi) {
    left: calc(50% + var(--fea-d-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    transform: translateX(-50%);
  }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-kx:prawo"] .fea-hero__lead:not(.fea-hero__lead--drugi) {
    left: auto !important;
    right: calc(var(--fea-d-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-kx:srodek"] .fea-hero__lead--drugi {
    left: calc(50% + var(--fea-d2-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    transform: translateX(-50%);
  }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-kx:prawo"] .fea-hero__lead--drugi {
    left: auto !important;
    right: calc(var(--fea-d2-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-kx:srodek"] .fea-hero__actions {
    left: calc(50% + var(--fea-cta-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    transform: translateX(-50%);
  }

  /* --- metryczka: wiersze na wspolrzednych telefonu --- */
  .fea-hero .fea-hero__slide[style*="--fea-tags-m-y"] .fea-hero__meta,
  .fea-hero .fea-hero__slide[style*="--fea-tags-m-y"] .fea-hero__tags {
    position: absolute !important;
    left: calc(var(--fea-tags-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--fea-tags-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--fea-tags-m-w, var(--fea-grid-m, 480)) * var(--jm, var(--fea-jedn-m))) !important;
    margin: 0 !important;
    padding: 0;
    gap: calc(max(0, var(--fea-tags-m-krok, 0) - var(--fea-tags-m-lh, var(--fea-tags-m-px, 14))) * var(--jm, var(--fea-jedn-m)));
    z-index: 3 !important;
    /* Szerokosc warstwy desktopu (--fea-t-w) nie obowiazuje w scenie
       telefonu: 1400 px siatki 3840 dawalo tu 142 px i wiersze lamaly sie
       na dwa, nachodzac na nastepne (wit /kariera/ @390, CLR-32 poz. 91). */
    max-width: none !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-tags-m-y"] .fea-hero__tags li {
    white-space: nowrap;
  }
  .fea-hero .fea-hero__slide[style*="--fea-tags-m-y"] .fea-hero__meta li,
  .fea-hero .fea-hero__slide[style*="--fea-tags-m-y"] .fea-hero__tags li {
    font-size: calc(var(--fea-tags-m-px, 14) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--fea-tags-m-lh, var(--fea-tags-m-px, 14)) * var(--jm, var(--fea-jedn-m))) !important;
  }

  /* --- warstwy sceny --- */
  /* Szerokosc tekstu jak w RevSliderze:
     - warstwa BEZ szerokosci (w:auto) ma szerokosc tresci i nie lamie sie
       inaczej niz jawnym <br>: na wit /kariera/ @390 akapit ma w oryginale
       639 px w jednym wierszu (uciety kadrem), u nas lamal sie na dwa;
     - warstwa Z szerokoscia nie wychodzi poza kadr: "Dostarczamy
       rozwiazania" na impib / ma w zrodle 540 px, a oryginal rysuje ja
       390 px i lamie na cztery wiersze, u nas tekst byl uciety
       (CLR-32 poz. 91, 92, 98). */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wy-m"]:not([style*="--ww-m:"]):not([style*="--wpw-m:"]) {
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
  /* Szerokosc kadru narzucona przez WLASNY CSS slidera, nie przez RevSlider:
     szablon ma "[id=slider-N-slide-M-layer-Z] { width:100vw; max-width:540px }"
     w @media (max-width:600px) i to ona przycina lead kit /poznaj-nas/
     i impib / do 390 px. Warstwy bez tej reguly oryginal zostawia przy
     szerokosci ze zrodla (kit /: 437, 454, 398 px), wiec ogolne
     "max-width: 100cqw" z CLR-32 bylo trafem; teraz tylko ze znacznikiem
     --wkadr-m ze silnika (CLR-34, pomiar 2026-10-14). */
  /* Wartosc znacznika to granica max-width z tej samej reguly CSS slidera,
     w px ekranu (szablon: 540). Szerokosc = min(kadr, granica), niezaleznie
     od szerokosci warstwy: lead icso /poznaj-nas/ ma w zrodle 259 px,
     oryginal rysuje 390 (CLR-35 poz. 109, 110). */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wy-m"][style*="--wkadr-m:"] {
    width: 100cqw !important;
    max-width: calc(var(--wkadr-m) * 1px) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-h-m-kadr:"] .fea-hero__title:not(.fea-hero__title--drugi) {
    width: 100cqw !important;
    max-width: calc(var(--fea-h-m-kadr) * 1px) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-kadr:"] .fea-hero__title--drugi {
    width: 100cqw !important;
    max-width: calc(var(--fea-h2-m-kadr) * 1px) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-kadr:"] .fea-hero__lead:not(.fea-hero__lead--drugi) {
    width: 100cqw !important;
    max-width: calc(var(--fea-d-m-kadr) * 1px) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-kadr:"] .fea-hero__lead--drugi {
    width: 100cqw !important;
    max-width: calc(var(--fea-d2-m-kadr) * 1px) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-y"]:not([style*="--fea-d-m-w:"]):not([style*="--fea-d-m-pw:"]) .fea-hero__lead:not(.fea-hero__lead--drugi) {
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
  /* Grubosc pisma telefonu ze zrodla, gdy inna niz na desktopie
     (kit / "Malopolskie i Slaskie Innowacje": 600 przy 300; CLR-34 poz. 105). */
  .fea-hero .fea-hero__slide[style*="--fea-h-m-fw:"] .fea-hero__title:not(.fea-hero__title--drugi) { font-weight: var(--fea-h-m-fw) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-fw:"] .fea-hero__title--drugi { font-weight: var(--fea-h2-m-fw) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-fw:"] .fea-hero__lead:not(.fea-hero__lead--drugi) { font-weight: var(--fea-d-m-fw) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-fw:"] .fea-hero__lead--drugi { font-weight: var(--fea-d2-m-fw) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wy-m"] {
    position: absolute !important;
    left: calc(var(--wx-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--wy-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--ww-m, var(--fea-grid-m, 480)) * var(--jm, var(--fea-jedn-m))) !important;
    max-width: none !important;
    /* Wciecie ze zrodla takze na telefonie - patrz --wpad-m w rendererze. */
    padding: var(--wpad-m, 0);
    font-size: calc(var(--wpx-m, 16) * var(--jm, var(--fea-jedn-m)));
    line-height: calc(var(--wlh-m, var(--wpx-m, 16)) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wkx-m:prawo"] {
    left: auto !important;
    right: calc(var(--wx-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
  }

  /* --- przyciski stojace na wspolrzednych --- */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn[style*="--by-m"] {
    position: absolute !important;
    left: calc(var(--bx-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--by-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: fit-content !important;
    margin: 0 !important;
    font-size: calc(var(--bpx-m, 16) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--blh-m, var(--bpx-m, 16)) * var(--jm, var(--fea-jedn-m))) !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 4 !important;
  }
  /* Brak wciecia w zrodle znaczy ZERO, a nie zaszyte 8/24: oryginal rysuje
     wtedy pigulke wielkosci tresci (Centrum /produkty-i-uslugi/, drugi
     przycisk: 153x28, u nas 168x41 wlasnie z tego zapasu). */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn[style*="--by-m"]:not(.button_rev02):not(.button_rev02_white) {
    padding: var(--bpad-m, 0) !important;
  }
  /* Przycisk z klasa redaktorska: na telefonie decyduje WLASNY CSS SLIDERA,
     a nie dane warstwy. Regula ".button_rev02 { padding: 16px 40px
     !important }" stoi w params.codes.css slidera (blok X arkusza przepisuje
     ja co do znaku) i tam, gdzie jest bez koperty, bije wciecie wpisane
     warstwie inline - takze na telefonie. Czesc sliderow trzyma ja jednak
     w @media(min-width:768px) i wtedy na waskim ekranie obowiazuje zrodlo.
     Migracja rozpoznaje to raz na slider, OSOBNO dla kazdej z dwoch klas
     (w CSS slidera maja osobne reguly i czesto rozne koperty), i zostawia
     znacznik --fea-pad-k1-m / --fea-pad-k2-m; brak znacznika znaczy
     "wciecie motywu".
     Pomiar produkcji 2026-10-08: Centrum /kariera/ 303x48 (16/40), Centrum
     /produkty-i-uslugi/ 204x38 (0/18) - te same dane, inny CSS slidera. */
  .fea-hero .fea-hero__slide[style*="--fea-pad-k1-m:zrodlo"] .fea-btn[style*="--by-m"].button_rev02 {
    padding: var(--bpad-m, 0) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-pad-k2-m:zrodlo"] .fea-btn[style*="--by-m"].button_rev02_white {
    padding: var(--bpad-m, 0) !important;
  }
  /* Bez znacznika obowiazuje wciecie motywu - takze na telefonie. Trzeba to
     powiedziec wprost, bo czytelny zapas 3a/3b stoi w arkuszu nizej i przy
     rownej swoistosci zdejmowal padding bloku X. */
  .fea-hero .fea-hero__slide:not([style*="--fea-pad-k1-m:zrodlo"]) .fea-btn.button_rev02,
  .fea-hero .fea-hero__slide:not([style*="--fea-pad-k2-m:zrodlo"]) .fea-btn.button_rev02_white {
    padding: 16px 40px !important;
  }
  /* Szerokosc i wysokosc pigulki ze zrodla telefonu. Bez nich pigulki na git
     /kontakt/ zwezaly sie do tresci (110 px) przy zrodlowych 232 px, ktore
     renderuje produkcja (188 px po przeskalowaniu). */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn[style*="--bw-m"] {
    width: calc(var(--bw-m) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn[style*="--bh-m"] {
    height: calc(var(--bh-m) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn[style*="--bkx-m:prawo"] {
    left: auto !important;
    right: calc(var(--bx-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
  }
  /* Kotwica SRODKOWA: w zrodle x liczy sie wtedy od srodka siatki, a nie od
     lewej krawedzi, i bywa ujemny (pigulki "Program" i "Organizatorzy" maja
     -140 px). Bez tego wyjezdzaly calkiem poza kadr. */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn[style*="--bkx-m:srodek"] {
    left: calc(50% + var(--bx-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    right: auto !important;
    transform: translateX(-50%);
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wkx-m:srodek"] {
    left: calc(50% + var(--wx-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    right: auto !important;
    transform: translateX(-50%);
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__narzedzia[style*="--akx-m:srodek"] {
    left: calc(50% + var(--ax-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    right: auto !important;
    transform: translateX(-50%);
  }

  /* --- rzad przyciskow glownych (cta) --- */
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-y"] .fea-hero__actions {
    position: absolute !important;
    left: calc(var(--fea-cta-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--fea-cta-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
    margin: 0 !important;
    z-index: 4 !important;
  }
  /* Kotwica srodkowa (x:c w zrodle): regula wyzej stala w arkuszu POZNIEJ niz
     ta ze srodkiem i wygrywala lewa krawedzia 0, a translateX(-50%) zostawal:
     przycisk pimot / i /konferencja/ oraz itee /kariera/ byl na telefonie
     uciety w polowie (x = -157 zamiast 38; CLR-35 poz. 117, 118, 121,
     122, 124). */
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-y"][style*="--fea-cta-m-kx:srodek"] .fea-hero__actions {
    left: calc(50% + var(--fea-cta-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    transform: translateX(-50%);
  }
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-y"][style*="--fea-cta-m-kx:srodek"][style*="--fea-cta-m-ky:srodek"] .fea-hero__actions {
    transform: translate(-50%, -50%);
  }
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-y"] .fea-hero__actions .fea-btn {
    font-size: calc(var(--fea-cta-m-px, 16) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--fea-cta-m-lh, var(--fea-cta-m-px, 16)) * var(--jm, var(--fea-jedn-m))) !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* DRUGI przycisk ma w zrodle wlasne pismo i wlasna interlinie. Bez tego
     bral liczby pierwszego i na Centrum /produkty-i-uslugi/ wychodzil
     o 15 px szerszy i 13 px wyzszy niz w oryginale (153x28). */
  .fea-hero .fea-hero__slide[style*="--fea-cta2-m-px"] .fea-hero__actions .fea-btn--cta2 {
    font-size: calc(var(--fea-cta2-m-px) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--fea-cta2-m-lh, var(--fea-cta2-m-px)) * var(--jm, var(--fea-jedn-m))) !important;
  }
  /* Wciecie przyciskow CTA na telefonie idzie ze zrodla. Wyjatkiem jest
     klasa redaktorska, ktorej wciecie narzuca wlasny CSS slidera - wtedy
     liczy sie znacznik --fea-pad-klasa-m (patrz wyzej). */
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-y"] .fea-hero__actions .fea-btn:not(.button_rev02):not(.button_rev02_white),
  .fea-hero .fea-hero__slide[style*="--fea-pad-k1-m:zrodlo"][style*="--fea-cta-m-y"] .fea-hero__actions .fea-btn.button_rev02,
  .fea-hero .fea-hero__slide[style*="--fea-pad-k2-m:zrodlo"][style*="--fea-cta-m-y"] .fea-hero__actions .fea-btn.button_rev02_white {
    padding: var(--fea-cta-m-pad, 0) !important;
  }
  /* Drugi przycisk ma wlasne wciecie; brak wartosci w zrodle znaczy zero,
     a nie wciecie pierwszego (oryginal: 153x28 bez wciecia). */
  .fea-hero .fea-hero__slide[style*="--fea-cta2-m-y"] .fea-hero__actions .fea-btn--cta2:not(.button_rev02):not(.button_rev02_white),
  .fea-hero .fea-hero__slide[style*="--fea-pad-k1-m:zrodlo"][style*="--fea-cta2-m-y"] .fea-hero__actions .fea-btn--cta2.button_rev02,
  .fea-hero .fea-hero__slide[style*="--fea-pad-k2-m:zrodlo"][style*="--fea-cta2-m-y"] .fea-hero__actions .fea-btn--cta2.button_rev02_white {
    padding: var(--fea-cta2-m-pad, 0) !important;
  }

  /* --- grafika: w oryginale lezy pod napisami, na wlasnych wspolrzednych --- */
  .fea-hero .fea-hero__media[style*="--fea-img-m-y"],
  .fea-hero .fea-hero__media[style*="--fea-img-m-h"],
  .fea-hero .fea-hero__media[style*="--fea-img-m-w"] {
    position: absolute !important;
    left: calc(var(--fea-img-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--fea-img-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0;
    max-width: none !important;
    justify-self: stretch;
    z-index: 1 !important;
  }
  .fea-hero .fea-hero__media[style*="--fea-img-m-kx:prawo"] {
    left: auto !important;
    right: calc(var(--fea-img-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__media[style*="--fea-img-m-kx:srodek"] {
    left: 50% !important;
    transform: translateX(-50%) translateX(calc(var(--fea-img-m-x, 0) * var(--jm, var(--fea-jedn-m))));
  }
  /* Pudelko bezwzgledne z left:50% i width:auto zwija sie do wolnego
     miejsca (195 px przy 390), a translateX(-50%) liczy sie od NIEGO,
     nie od grafiki 284 px - zdjecie kit / stalo na x=94,5 zamiast 50
     (CLR-34 poz. 105). Szerokosc pudelka = szerokosc grafiki ze zrodla. */
  .fea-hero .fea-hero__media[style*="--fea-img-m-kx:srodek"][style*="--fea-img-m-w"] {
    width: calc(var(--fea-img-m-w) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__media[style*="--fea-img-m-ky:dol"] {
    top: auto !important;
    bottom: calc(var(--fea-img-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
  }
  /* Kotwica pionowa SRODKOWA: y liczy sie od srodka sceny. Zdjecie itr /
     (100%, v:middle, y puste) stoi w oryginale na -18 px, u nas na 0
     (CLR-35 poz. 119). */
  .fea-hero .fea-hero__media[style*="--fea-img-m-ky:srodek"] {
    top: calc(50% + var(--fea-img-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
    transform: translateY(-50%);
  }
  .fea-hero .fea-hero__media[style*="--fea-img-m-ky:srodek"][style*="--fea-img-m-kx:srodek"] {
    transform: translate(-50%, -50%) translateX(calc(var(--fea-img-m-x, 0) * var(--jm, var(--fea-jedn-m))));
  }
  /* Kotwica DOLNA przy znanej wysokosci: RevSlider liczy odsuniecie w SIATCE
     (scena - y - wysokosc) i dopiero wynik skaluje. Liczenie od dolu kadru
     rozjezdza sie, gdy warstwa ma wlasna jednostke: zdjecie icso /kariera/
     wypadalo na y=301 zamiast y=11 (pomiar produkcji 2026-09-30). */
  .fea-hero .fea-hero__media[style*="--fea-img-m-ky:dol"][style*="--fea-img-m-h"] {
    top: calc((var(--fea-scena-m, 720) - var(--fea-img-m-y, 0) - var(--fea-img-m-h, 0))
              * var(--jm, var(--fea-jedn-m))) !important;
    bottom: auto !important;
  }

  /* Wymiar idzie na SAM OBRAZEK, w jednostkach bezwzglednych: procentowa
     wysokosc na obrazku w pudelku o wysokosci ze zmiennej nie wyliczala sie
     (przegladarka zostawiala naturalne 2033x2444 pliku). Pudelko grafiki
     hugguje obrazek, wiec kotwica prawa dalej trafia w krawedz. */
  .fea-hero .fea-hero__media[style*="--fea-img-m-h"] img {
    height: calc(var(--fea-img-m-h) * var(--jm, var(--fea-jedn-m))) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
  }
  .fea-hero .fea-hero__media[style*="--fea-img-m-w"] img {
    width: calc(var(--fea-img-m-w) * var(--jm, var(--fea-jedn-m))) !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
  }
  /* Oba wymiary ze zrodla - kadrujemy jak RevSlider. */
  .fea-hero .fea-hero__media[style*="--fea-img-m-w"][style*="--fea-img-m-h"] img {
    width: calc(var(--fea-img-m-w) * var(--jm, var(--fea-jedn-m))) !important;
    height: calc(var(--fea-img-m-h) * var(--jm, var(--fea-jedn-m))) !important;
    object-fit: cover;
  }
}

/* Przypinka na telefonie: wspolrzedne ze zrodla, tak jak kazda inna warstwa.
   Oryginal stawia pinezke na wlasnych liczbach w siatce telefonu (Centrum
   /produkty-i-uslugi/: x=278 y=227 przy 16x16) i POKAZUJE ja takze na
   telefonie - my chowalismy ja razem z podpisem. Podpis zostaje schowany,
   bo w oryginale pojawia sie wylacznie po najechaniu, a na dotyku najechania
   nie ma (pomiar produkcji 2026-09-30). */
@container hero (max-width: 560px) {
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__przypinka[style*="--fea-pin-m-y"] {
    position: absolute !important;
    left: calc(var(--fea-pin-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--fea-pin-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--fea-pin-m-w, 16) * var(--jm, var(--fea-jedn-m))) !important;
    height: calc(var(--fea-pin-m-h, var(--fea-pin-m-w, 16)) * var(--jm, var(--fea-jedn-m))) !important;
    z-index: 5 !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__przypinka[style*="--fea-pin-m-y"] .fea-hero__pin {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    height: 100% !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__przypinka[style*="--fea-pin-m-y"] .fea-hero__pin-icon {
    width: 100% !important;
    height: 100% !important;
  }
  /* Podpis, ktorego zrodlo na telefonie nie pokazuje - Centrum /kariera/
     ma tam visibility.m = false i bez tego nazwisko osoby ze zdjecia
     wychodzi jako nadmiarowy tekst. */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__przypinka .fea-hero__badge--bez-mobile {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Podpis, ktory oryginal na telefonie POKAZUJE: wlasne wspolrzedne
     w siatce telefonu, tak samo jak kropka. Liczby sa bezwzgledne wzgledem
     sceny, a podpis wisi w kropce, wiec odejmujemy wspolrzedne kropki. */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__przypinka[style*="--fea-badge-m-y"] .fea-hero__badge:not(.fea-hero__badge--bez-mobile) {
    position: absolute !important;
    left: calc((var(--fea-badge-m-x, 0) - var(--fea-pin-m-x, 0)) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc((var(--fea-badge-m-y, 0) - var(--fea-pin-m-y, 0)) * var(--jm, var(--fea-jedn-m))) !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(var(--fea-badge-m-w, 120) * var(--jm, var(--fea-jedn-m))) !important;
    max-width: none !important;
    /* Zerowy margines: podpis ma w innych zakresach 30px z lewej i 10px
       z gory na odsuniecie od kropki, a tu wspolrzedne sa ze zrodla. */
    margin: 0 !important;
    min-height: calc(var(--fea-badge-m-h, 0) * var(--jm, var(--fea-jedn-m))) !important;
    height: auto !important;
    padding: var(--fea-badge-m-pad, 0) !important;
    font-size: calc(var(--fea-badge-m-px, 16) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--fea-badge-m-lh, var(--fea-badge-m-px, 16)) * var(--jm, var(--fea-jedn-m))) !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    clip-path: none !important;
    white-space: normal !important;
    pointer-events: auto !important;
    z-index: 6 !important;
  }
}

/* Naklejki, pasek narzedzi i kreska na telefonie: wymiary i wspolrzedne
   ze zrodla zamiast zwijania do toku tresci.

   Pomiar produkcji przy 390 px (git, slajdy seminaryjne): kalendarz metryczki
   ma 22,8x22,8 px przy x=130 y=327, a u nas 195x191 px przy x=0 y=294, bo
   regula telefonu zwijala kazda naklejke do min(220px, 50cqi) i kasowala jej
   wspolrzedne. Pinezka wychodzila 10 razy za duza i przykrywala napisy.
   Pasek "Kontakt" wracal do toku tresci i ladowal na naglowku zamiast stanac
   w prawym dolnym rogu sceny. */
@container hero (max-width: 560px) {
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__naklejka[style*="--ny-m"] {
    position: absolute !important;
    left: calc(var(--nx-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    right: auto !important;
    top: calc(var(--ny-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--nw-m, 40) * var(--jm, var(--fea-jedn-m))) !important;
    height: auto !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__naklejka[style*="--nkx-m:prawo"] {
    left: auto !important;
    right: calc(var(--nx-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__naklejka[style*="--nkx-m:srodek"] {
    left: calc(50% + var(--nx-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    transform: translateX(-50%);
  }

  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__narzedzia[style*="--ay-m"] {
    position: absolute !important;
    left: calc(var(--ax-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    right: auto !important;
    top: calc(var(--ay-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 4 !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__narzedzia[style*="--akx-m:prawo"] {
    left: auto !important;
    right: calc(var(--ax-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
  }
  /* Pozycje z WLASNYMI wartosciami telefonowymi (--narz-m-*) obsluguje
     blok nizej; te reguly zostaja dla slajdow, gdzie zrodlo daje tylko
     wartosci calego paska.
     Wysokosc paska ze zrodla: w oryginale caly przycisk "Kontakt" ma na
     telefonie 98x101 px siatki (80x82 przy 390 px), a u nas ikona brala
     0,8 tej wysokosci i podpis doklejal sie PONIZEJ, wiec pasek wychodzil
     na 114 px (git, slajdy seminaryjne, pomiar produkcji 2026-09-30). */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__narzedzia[style*="--ah-m"] {
    height: calc(var(--ah-m) * var(--jm, var(--fea-jedn-m))) !important;
    overflow: hidden !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__narzedzia[style*="--ay-m"] .fea-narzedzie:not([style*="--narz-m-h"]) {
    width: calc(var(--aw-m, 55) * var(--jm, var(--fea-jedn-m))) !important;
    font-size: calc(var(--apx-m, 9) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: 1.2 !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__narzedzia[style*="--ah-m"] .fea-narzedzie:not([style*="--narz-m-h"]) {
    height: 100% !important;
    gap: 0 !important;
    justify-content: flex-end !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__narzedzia[style*="--ay-m"] .fea-narzedzie:not([style*="--narz-m-h"]) i {
    display: block !important;
    width: calc(var(--aw-m, 55) * var(--jm, var(--fea-jedn-m))) !important;
    height: calc(var(--ah-m, 70) * var(--jm, var(--fea-jedn-m)) * 0.8) !important;
  }
  /* Ikona dzieli pudelko z podpisem: bierze to, co zostaje. */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__narzedzia[style*="--ah-m"] .fea-narzedzie:not([style*="--narz-m-h"]) i {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* ---- NARZEDZIA NA WLASNYCH WSPOLRZEDNYCH ----
     Zrodlo daje kazdej ikonie wlasne pudelko, wlasne wciecie gorne i wlasny
     stopien pisma. Pasek liczyl to jednym rozmiarem dla wszystkich pozycji,
     a wciecie szlo jednostka DESKTOPU: na /konferencja-pemine/ podpisy
     "Kontakt" i "Do pobrania" siadaly na ikonie zamiast pod nia
     (produkcja @390: pudelko 44,7x59,3 przy wcieciu 54 px). */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__narzedzia:has(.fea-narzedzie[style*="--narz-m-h"]) {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-narzedzie[style*="--narz-m-h"] {
    position: absolute !important;
    left: calc((var(--narz-m-x, 0) - var(--ax-m, 0)) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc((var(--narz-m-y, 0) - var(--ay-m, 0)) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--narz-m-w, 55) * var(--jm, var(--fea-jedn-m))) !important;
    height: calc(var(--narz-m-h, 73) * var(--jm, var(--fea-jedn-m))) !important;
    font-size: calc(var(--narz-m-px, 9) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--narz-m-lh, var(--narz-m-px, 9)) * var(--jm, var(--fea-jedn-m))) !important;
    gap: 0 !important;
  }
  /* Pozycja bez wciecia gornego trzyma ikone w osobnym elemencie: ma sie
     zmiescic w pudelku ze zrodla, a nie zostac przy zaszytych 44x52
     (na /wyposazenie-ce/ zrodlo daje telefonowi 13x17 i ikona wychodzila
     poza pasek). */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-narzedzie[style*="--narz-m-h"]:not([style*="--narz-m-pad"]):not([style*="--fea-narz-ikw"]):not([style*="--narz-m-ikh"]) i {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }
  /* Ikona o literalnej szerokosci ze zrodla zostaje przy swoich liczbach
     takze w scenie telefonu - oryginal jej nie skaluje. */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-narzedzie[style*="--fea-narz-ikw"]:not([style*="--narz-m-pad"]) {
    display: block !important;
    text-align: center !important;
    /* Wciecie poziome ze zrodla: ikona szersza niz wnetrze pudelka stoi
       od lewego wciecia, nie na srodku pudelka (git /seminarium-bhp.../
       @390: 299 px u oryginalu, 294 px u nas; CLR-31 poz. 79). */
    box-sizing: border-box !important;
    padding: 0 calc(var(--narz-m-bok, 0) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-narzedzie[style*="--fea-narz-ikw"]:not([style*="--narz-m-pad"]) i {
    width: calc(var(--fea-narz-ikw) * 1px) !important;
    height: calc(var(--fea-narz-ikw) * var(--fea-narz-ikp, 1) * 1px) !important;
    flex: none !important;
    margin: 0 0 0 max(0px, calc((100% - var(--fea-narz-ikw) * 1px) / 2)) !important;
  }

  /* Margines ikony ze zrodla liczy sie na telefonie jednostka SIATKI
     TELEFONU: oryginal skaluje wartosci dzieci wspolczynnikiem sceny
     telefonu (Centrum /produkty-i-uslugi/ @390: 24 px * 390/480 = 20 px),
     a jednostka desktopu dawala tu 2,4 px (CLR-31 poz. 77, 90). */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn--svg-zrodla {
    --fea-svg-jedn: var(--jm, var(--fea-jedn-m));
  }

  /* Odsuniecie spoczynkowe w pikselach ekranu na telefonie - patrz AF). */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wox-m:"],
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--woy-m:"] {
    translate: calc(var(--wox-m, 0) * (1px - var(--jm, var(--fea-jedn-m))))
               calc(var(--woy-m, 0) * (1px - var(--jm, var(--fea-jedn-m))));
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__naklejka[style*="--nox-m:"],
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__naklejka[style*="--noy-m:"] {
    translate: calc(var(--nox-m, 0) * (1px - var(--jm, var(--fea-jedn-m))))
               calc(var(--noy-m, 0) * (1px - var(--jm, var(--fea-jedn-m))));
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"][style*="--fea-nad-m-ox:"] .fea-tablica__nad,
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"][style*="--fea-nad-m-oy:"] .fea-tablica__nad {
    translate: calc(var(--fea-nad-m-ox, 0) * (1px - var(--fea-jedn-m)))
               calc(var(--fea-nad-m-oy, 0) * (1px - var(--fea-jedn-m)));
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"][style*="--fea-h-m-ox:"] .fea-hero__title,
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"][style*="--fea-h-m-oy:"] .fea-hero__title,
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"][style*="--fea-h-m-ox:"] .fea-tablica__tytul,
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"][style*="--fea-h-m-oy:"] .fea-tablica__tytul {
    translate: calc(var(--fea-h-m-ox, 0) * (1px - var(--fea-jedn-m)))
               calc(var(--fea-h-m-oy, 0) * (1px - var(--fea-jedn-m)));
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"][style*="--fea-d-m-ox:"] .fea-hero__lead:not(.fea-hero__lead--drugi),
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"][style*="--fea-d-m-oy:"] .fea-hero__lead:not(.fea-hero__lead--drugi) {
    translate: calc(var(--fea-d-m-ox, 0) * (1px - var(--fea-jedn-m)))
               calc(var(--fea-d-m-oy, 0) * (1px - var(--fea-jedn-m)));
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__media[style*="--fea-img-m-ox:"],
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__media[style*="--fea-img-m-oy:"] {
    translate: calc(var(--fea-img-m-ox, 0) * (1px - var(--fea-jedn-m)))
               calc(var(--fea-img-m-oy, 0) * (1px - var(--fea-jedn-m)));
  }

  /* Podpis pinezki uruchamiany jej akcja (mouseenter -> layer_target) jest
     w oryginale ukryty do najechania takze na telefonie: "Soft magnetic
     cores" na imn /en/offer/ u nas wisial na stale nad zdjeciem
     (CLR-32 poz. 93). Dotkniecie pinezki (focus-within) go odslania. */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__przypinka:not(:hover):not(:focus-within) .fea-hero__badge--po-najechaniu {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Przycisk WYLACZONY na telefonie (visibility.m = false) nie wraca przez
     wspolrzedne telefonu: reguly wspolrzednych, kotwic i szerokosci wyzej
     sa swoistsze od AO) i stawialy nazwy miast impib / na 20, 250 i 488 px
     (CLR-32 poz. 92). Ta regula stoi za nimi i jest od nich swoistsza. */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn.fea-bez-mobile[style*="--by-m"][style*="--bx-m"],
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn.fea-bez-mobile[style*="--by-m"][style*="--bw-m"] {
    position: absolute !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    font-size: 1px !important;
  }
  /* Gdy zrodlo podaje WLASNE pudelko ikony i podpisu, oba staja na swoich
     liczbach wewnatrz kafelka. Bez tego ikona brala cala szerokosc kafelka
     i wysokosc "co zostalo": na git /seminarium-bhp.../ rysowala sie 41x53
     przy zrodlowych 74x94, czyli o jedna trzecia za malo
     (pomiar 2026-10-08, CLR-31 poz. 79, 80, 83, 85). */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-narzedzie[style*="--narz-m-ikh"]:not([style*="--narz-m-pad"]) {
    display: block !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-narzedzie[style*="--narz-m-ikh"]:not([style*="--narz-m-pad"]) i {
    position: absolute !important;
    left: calc(var(--narz-m-ikx, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--narz-m-iky, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--narz-m-ikw, 0) * var(--jm, var(--fea-jedn-m))) !important;
    height: calc(var(--narz-m-ikh, 0) * var(--jm, var(--fea-jedn-m))) !important;
    flex: none !important;
    margin: 0 !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-narzedzie[style*="--narz-m-ikh"]:not([style*="--narz-m-pad"]) span {
    position: absolute !important;
    left: calc(var(--narz-m-nx, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--narz-m-ny, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--narz-m-nw, var(--narz-m-w, 55)) * var(--jm, var(--fea-jedn-m))) !important;
    margin: 0 !important;
  }

  /* Ikona jako tlo calej warstwy: podpis spada pod nia wcieciem ze zrodla,
     a osobny element ikony jest wtedy zbedny. */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-narzedzie[style*="--narz-m-pad"] {
    display: block !important;
    padding-top: calc(var(--narz-m-pad) * var(--jm, var(--fea-jedn-m))) !important;
    background-size: contain !important;
    background-position: center top !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-narzedzie[style*="--narz-m-pad"] i {
    display: none !important;
  }

  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__kreska[style*="--kw-m"] {
    width: calc(var(--kw-m) * var(--jm, var(--fea-jedn-m))) !important;
    max-width: none !important;
  }
}

/* Naglowki TABLICY na telefonie: stopien pisma i interlinia ze zrodla.
   Tablica ma wlasny uklad i nie wchodzi do sceny telefonu, ale jej dwa
   napisy maja w zrodle wartosci telefonowe (git /: 21 px przy 101 px
   desktopowych) i bez nich szly z clampa (pomiar produkcji 2026-09-30). */
@container hero (max-width: 560px) {
  .fea-hero .fea-hero__slide[style*="--fea-nad-m-px"] .fea-tablica__nad {
    font-size: calc(var(--fea-nad-m-px) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--fea-nad-m-lh, var(--fea-nad-m-px)) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-h-m-px"] .fea-tablica__tytul {
    font-size: calc(var(--fea-h-m-px) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--fea-h-m-lh, var(--fea-h-m-px)) * var(--jm, var(--fea-jedn-m))) !important;
  }

  /* ---- SCENA TABLICY NA TELEFONIE ----

     Oryginal nie zwija tu kart w rzad: kazda stoi na wlasnych wspolrzednych
     w siatce telefonu, dwie w gornym wierszu i dwie w dolnym, a pigulka
     "STRONA WYDARZENIA" ma wlasne x i y liczone od krawedzi sceny (git /,
     pomiar produkcji @390: plakat 247,121 przy 97x155, pigulka 234,292
     przy 118x33). My skladalismy siatke dwukolumnowa z kartami po 166 px
     i pigulkami przyklejonymi pod plakatem. */
  .fea-hero .fea-tablica[style*="--fea-scena-m"] {
    position: relative !important;
    display: block !important;
    height: calc(var(--fea-scena-m, 720) * var(--fea-jedn-m)) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  /* Slajd tablicy ma na telefonie wciecie 8px od gory - wspolrzedne ze
     zrodla licza sie od krawedzi sceny, wiec musi zniknac. */
  .fea-hero .fea-hero__slide--tablica[style*="--fea-scena-m"] {
    padding: 0 !important;
    gap: 0 !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-nad-m-y"] .fea-tablica__nad,
  .fea-hero .fea-hero__slide[style*="--fea-h-m-y"] .fea-tablica__tytul {
    position: absolute !important;
    margin: 0 !important;
    max-width: none !important;
    z-index: 3 !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-nad-m-y"] .fea-tablica__nad {
    left: calc(var(--fea-nad-m-x, 0) * var(--fea-jedn-m)) !important;
    top: calc(var(--fea-nad-m-y, 0) * var(--fea-jedn-m)) !important;
    width: calc(var(--fea-nad-m-w, var(--fea-grid-m, 480)) * var(--fea-jedn-m)) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-h-m-y"] .fea-tablica__tytul {
    left: calc(var(--fea-h-m-x, 0) * var(--fea-jedn-m)) !important;
    top: calc(var(--fea-h-m-y, 0) * var(--fea-jedn-m)) !important;
    /* Bez szerokosci w zrodle napis ma szerokosc tresci - tak jak w
       oryginale (git /: 275 px przy 390 px kadru). */
    width: max-content !important;
    max-width: calc(var(--fea-grid-m, 480) * var(--fea-jedn-m)) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-h-m-w"] .fea-tablica__tytul {
    width: calc(var(--fea-h-m-w) * var(--fea-jedn-m)) !important;
  }
  /* Rzad i kontener kart przestaja byc pudelkami ukladu - karty maja
     pozycjonowac sie wzgledem sceny tablicy. */
  .fea-hero .fea-tablica[style*="--fea-scena-m"] .fea-tablica__rzad,
  .fea-hero .fea-tablica[style*="--fea-scena-m"] .fea-tablica__karty {
    display: contents !important;
  }
  .fea-hero .fea-tablica[style*="--fea-scena-m"] .fea-tablica__karta[style*="--kart-m-y"] {
    position: absolute !important;
    left: calc(var(--kart-m-x, 0) * var(--fea-jedn-m)) !important;
    top: calc(var(--kart-m-y, 0) * var(--fea-jedn-m)) !important;
    width: calc(var(--kart-m-w, 120) * var(--fea-jedn-m)) !important;
    height: calc(var(--kart-m-h, 191) * var(--fea-jedn-m)) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    display: block !important;
  }
  .fea-hero .fea-tablica[style*="--fea-scena-m"] .fea-tablica__karta[style*="--kart-m-y"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  /* Pigulka: wspolrzedne ze zrodla sa liczone od krawedzi SCENY, a element
     wisi w karcie - stad odjecie wspolrzednych karty. */
  .fea-hero .fea-tablica[style*="--fea-scena-m"] .fea-tablica__karta[style*="--kpig-m-y"] .fea-tablica__pigulka {
    position: absolute !important;
    left: calc((var(--kpig-m-x, 0) - var(--kart-m-x, 0)) * var(--fea-jedn-m)) !important;
    top: calc((var(--kpig-m-y, 0) - var(--kart-m-y, 0)) * var(--fea-jedn-m)) !important;
    width: calc(var(--kpig-m-w, 145) * var(--fea-jedn-m)) !important;
    /* Pigulka jest w zrodle SZERSZA od plakatu (145 px przy 120 px siatki),
       a stoi w karcie - bez tego przycinala sie do jej szerokosci. */
    max-width: none !important;
    height: calc(var(--kpig-m-h, 40) * var(--fea-jedn-m)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: var(--kpig-m-pad, 0) !important;
    font-size: calc(var(--kpig-m-px, 14) * var(--fea-jedn-m)) !important;
    line-height: calc(var(--kpig-m-h, 40) * var(--fea-jedn-m)) !important;
    white-space: nowrap !important;
    z-index: 4 !important;
  }
  .fea-hero .fea-tablica[style*="--fea-scena-m"] .fea-tablica__blok[style*="--blok-m-y"] {
    position: absolute !important;
    left: calc(var(--blok-m-x, 0) * var(--fea-jedn-m)) !important;
    top: calc(var(--blok-m-y, 0) * var(--fea-jedn-m)) !important;
    width: calc(var(--blok-m-w, 228) * var(--fea-jedn-m)) !important;
    height: calc(var(--blok-m-h, 90) * var(--fea-jedn-m)) !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  .fea-hero .fea-tablica[style*="--fea-scena-m"] .fea-tablica__blok[style*="--blok-m-y"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
}

/* ============================================================
   AM) ROZDROZE NA TELEFONIE

   Oryginal nie zmniejsza tu ukladu desktopowego, tylko sklada inna scene:
   panorama PIONOWA przy prawej krawedzi (w zrodle osobna warstwa, na szerokim
   ekranie wypchnieta poza kadr przez x=-533), zdanie u gory, a pinezki
   kolumna przy lewej krawedzi - kazda na wlasnych wspolrzednych, a nie
   w procentach panoramy (pomiar produkcji git /, 2026-09-30).
   ============================================================ */
.fea-rozdroze__obraz-m { display: none !important; }

@container hero (max-width: 560px) {
  .fea-hero .fea-rozdroze[style*="--fea-pan-m-y"] {
    position: relative !important;
    display: block !important;
    height: calc(var(--fea-scena-m, 720) * var(--jm, var(--fea-jedn-m))) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .fea-hero .fea-rozdroze[style*="--fea-zd-m-y"] .fea-rozdroze__zdanie {
    position: absolute !important;
    left: calc(var(--fea-zd-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--fea-zd-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--fea-zd-m-w, 240) * var(--jm, var(--fea-jedn-m))) !important;
    margin: 0 !important;
    font-size: calc(var(--fea-zd-m-px, 40) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--fea-zd-m-lh, var(--fea-zd-m-px, 40)) * var(--jm, var(--fea-jedn-m))) !important;
    z-index: 3 !important;
  }

  .fea-hero .fea-rozdroze[style*="--fea-pan-m-y"] .fea-rozdroze__panorama {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }
  /* Pozioma panorama schodzi z kadru, pionowa wchodzi na jej miejsce. */
  .fea-hero .fea-rozdroze[style*="--fea-pan-m-y"] .fea-rozdroze__panorama > img:not(.fea-rozdroze__obraz-m) {
    display: none !important;
  }
  .fea-hero .fea-rozdroze[style*="--fea-pan-m-y"] .fea-rozdroze__obraz-m {
    display: block !important;
    position: absolute !important;
    left: calc(var(--fea-pan-m-x, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--fea-pan-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--fea-pan-m-w, 224) * var(--jm, var(--fea-jedn-m))) !important;
    height: calc(var(--fea-pan-m-h, 664) * var(--jm, var(--fea-jedn-m))) !important;
    max-width: none !important;
    object-fit: contain !important;
    z-index: 1 !important;
  }

  .fea-hero .fea-rozdroze[style*="--fea-pan-m-y"] .fea-rozdroze__pin[style*="--py-m"] {
    position: absolute !important;
    left: calc(var(--px-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--py-m, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    z-index: 4 !important;
  }
  .fea-hero .fea-rozdroze[style*="--fea-pan-m-y"] .fea-rozdroze__pin[style*="--py-m"] .fea-rozdroze__ikona {
    width: calc(var(--pw-m, 19) * var(--jm, var(--fea-jedn-m))) !important;
    height: calc(var(--ph-m, var(--pw-m, 19)) * var(--jm, var(--fea-jedn-m))) !important;
  }
  .fea-hero .fea-rozdroze[style*="--fea-pan-m-y"] .fea-rozdroze__pin[style*="--pdx-m"] > span {
    position: absolute !important;
    left: calc((var(--pdx-m, 30) - var(--px-m, 0)) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc((var(--pdy-m, 0) - var(--py-m, 0)) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--pdw-m, 130) * var(--jm, var(--fea-jedn-m))) !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: calc(var(--pdpx-m, 16) * var(--jm, var(--fea-jedn-m))) !important;
    line-height: calc(var(--pdlh-m, var(--pdpx-m, 16)) * var(--jm, var(--fea-jedn-m))) !important;
  }
}


/* ============================================================
   AN) KOTWICA PIONOWA "SRODEK" NA TELEFONIE

   RevSlider trzyma kotwice per urzadzenie (y:t,t,m,m). Przy kotwicy
   srodkowej wspolrzedna liczy sie od POLOWY sceny do SRODKA warstwy,
   nie od gornej krawedzi. Na stronie glownej itr oba akapity maja na
   telefonie "m": "Tradycja inzynierii" ma yo=-20 i stoi na produkcji
   przy 390 px na y=120 (290/2 - 10 - 15), a "Od ponad 70 lat" ma
   yo=96 i stoi na y=164. Bez tej reguly szly na surowe -10 i 48,
   czyli oba poza kadr (pomiar produkcji 2026-09-30).
   Polowa sceny liczy sie z LICZB ze zrodla (scena_m / 2 przeliczone
   jednostka kadru), a nie z pudelka slajdu: w trybie pikselowym pudelko ma
   pelne 580 px siatki, a oryginal liczy kotwice od nominalnej wysokosci
   modulu, czyli 290 px przy kadrze 390 (ins: napis y=-15 stoi na 82, nie
   na 227 - pomiar produkcji 2026-09-30).
   ============================================================ */
@container hero (max-width: 560px) {
  .fea-hero .fea-hero__slide[style*="--fea-h-m-ky:srodek"] .fea-hero__title:not(.fea-hero__title--drugi),
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-ky:srodek"] .fea-hero__title--drugi,
  .fea-hero .fea-hero__slide[style*="--fea-d-m-ky:srodek"] .fea-hero__lead:not(.fea-hero__lead--drugi),
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-ky:srodek"] .fea-hero__lead--drugi,
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-ky:srodek"] .fea-hero__actions,
  .fea-hero .fea-hero__slide[style*="--fea-cta2-m-ky:srodek"] .fea-hero__actions--drugi,
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wky-m:srodek"],
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn[style*="--bky-m:srodek"] {
    transform: translateY(-50%);
  }
  .fea-hero .fea-hero__slide[style*="--fea-h-m-ky:srodek"] .fea-hero__title:not(.fea-hero__title--drugi) {
    top: calc(var(--fea-scena-m, 720) * 0.5 * (100cqw / var(--fea-grid-m, 480)) + var(--fea-h-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-ky:srodek"] .fea-hero__title--drugi {
    top: calc(var(--fea-scena-m, 720) * 0.5 * (100cqw / var(--fea-grid-m, 480)) + var(--fea-h2-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-ky:srodek"] .fea-hero__lead:not(.fea-hero__lead--drugi) {
    top: calc(var(--fea-scena-m, 720) * 0.5 * (100cqw / var(--fea-grid-m, 480)) + var(--fea-d-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-ky:srodek"] .fea-hero__lead--drugi {
    top: calc(var(--fea-scena-m, 720) * 0.5 * (100cqw / var(--fea-grid-m, 480)) + var(--fea-d2-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-ky:srodek"] .fea-hero__actions {
    top: calc(var(--fea-scena-m, 720) * 0.5 * (100cqw / var(--fea-grid-m, 480)) + var(--fea-cta-m-y, 0) * var(--jm, var(--fea-jedn-m))) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wky-m:srodek"] {
    top: calc(var(--fea-scena-m, 720) * 0.5 * (100cqw / var(--fea-grid-m, 480)) + var(--wy-m, 0) * var(--jm, var(--fea-jedn-m))) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn[style*="--bky-m:srodek"] {
    top: calc(var(--fea-scena-m, 720) * 0.5 * (100cqw / var(--fea-grid-m, 480)) + var(--by-m, 0) * var(--jm, var(--fea-jedn-m))) !important; }

  /* Obie kotwice naraz: jedna deklaracja transform, zeby druga os nie
     kasowala pierwszej. */
  .fea-hero .fea-hero__slide[style*="--fea-h-m-ky:srodek"][style*="--fea-h-m-kx:srodek"] .fea-hero__title:not(.fea-hero__title--drugi),
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-ky:srodek"][style*="--fea-h2-m-kx:srodek"] .fea-hero__title--drugi,
  .fea-hero .fea-hero__slide[style*="--fea-d-m-ky:srodek"][style*="--fea-d-m-kx:srodek"] .fea-hero__lead:not(.fea-hero__lead--drugi),
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-ky:srodek"][style*="--fea-d2-m-kx:srodek"] .fea-hero__lead--drugi,
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wky-m:srodek"][style*="--wkx-m:srodek"],
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn[style*="--bky-m:srodek"][style*="--bkx-m:srodek"] {
    transform: translate(-50%, -50%);
  }

  /* Podpis z wlasnymi wspolrzednymi telefonu, ale BEZ kropki: para nie ma
     wtedy wlasnego pudelka i podpis liczylby sie od toku tresci. */
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__przypinka[style*="--fea-badge-m-y"]:not([style*="--fea-pin-m-y"]) {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* ============================================================
   AO) WARSTWY WYLACZONE NA TELEFONIE - PIERWSZENSTWO

   Blok K) chowa warstwy z visibility.m = false, ale scena telefonu
   (blok AL) nadaje im position/left/top/width z !important i schowek
   1x1 przestawal dzialac: na stronie glownej kit trzy napisy procesu
   ("diagnozujemy problem", "dobieramy ekspertow", "proponujemy
   rozwiazanie") wychodzily na telefonie w kadr, jeden z nich na
   x=487 px przy kadrze 390 px. Oryginal nie pokazuje ich tam wcale
   (pomiar produkcji 2026-09-30). Tresc zostaje w drzewie dostepnosci.
   ============================================================ */
@container hero (max-width: 780px) {
  .fea-hero .fea-hero__slide .fea-bez-mobile,
  .fea-hero .fea-hero__slide .fea-bez-mobile.fea-warstwa,
  .fea-hero .fea-hero__slide .fea-btn.fea-bez-mobile {
    position: absolute !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    transform: none !important;
    font-size: 1px !important;
  }
}

/* ============================================================
   AP) PRZYCIEMNIENIE WYLACZNIE NA TELEFONIE

   Zrodlo ma na czesci slajdow osobna warstwe ksztaltu, schowana na
   desktopie, a widoczna na tablecie i telefonie: itr i pimot kladzie
   czern 0,6-0,7 na calej scenie, piap biel 0,8 na 440 px siatki. Bez niej
   napisy na telefonie czytaly sie wprost ze zdjecia (weryfikacja 2026-09-30).
   ============================================================ */
.fea-hero .fea-hero__welon--telefon { display: none; }

@container hero (max-width: 780px) {
  .fea-hero .fea-hero__welon--telefon {
    display: block;
    position: absolute;
    /* Nad zdjeciem, pod trescia: tresc siedzi na 3. */
    z-index: 2;
    pointer-events: none;
  }
}

/* ============================================================
   AQ) SZEROKOSC PODANA PROCENTEM

   Zrodlo bywa podaje szerokosc warstwy jako "100%". Przeliczenie na piksele
   siatki jest poprawne tylko w scenie proporcjonalnej, gdzie siatka rowna sie
   kadrowi. W scenie pikselowej (Centrum, siatka 780) 100% dawalo 780 px przy
   kadrze 390: naglowek /en/ lamal sie na dwa wiersze zamiast trzech i wychodzil
   poza kadr (produkcja: 390x90, u nas 780x60; CLR-31 poz. 76).
   ============================================================ */
@container hero (max-width: 560px) {
  .fea-hero .fea-hero__slide[style*="--fea-h-m-pw"] .fea-hero__title:not(.fea-hero__title--drugi),
  .fea-hero .fea-hero__slide[style*="--fea-h-m-pw"] .fea-tablica__tytul {
    width: calc(var(--fea-h-m-pw) * 1%) !important;
    max-width: 100% !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-pw"] .fea-hero__title--drugi {
    width: calc(var(--fea-h2-m-pw) * 1%) !important;
    max-width: 100% !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-pw"] .fea-hero__lead:not(.fea-hero__lead--drugi) {
    width: calc(var(--fea-d-m-pw) * 1%) !important;
    max-width: 100% !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-pw"] .fea-hero__lead--drugi {
    width: calc(var(--fea-d2-m-pw) * 1%) !important;
    max-width: 100% !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wpw-m"] {
    width: calc(var(--wpw-m) * 1%) !important;
    max-width: 100% !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn[style*="--bpw-m"] {
    width: calc(var(--bpw-m) * 1%) !important;
    max-width: 100% !important;
  }
  /* Procent szerokosci grafiki liczy sie od KADRU (tak RevSlider), a nie od
     pudelka, ktore juz ma szerokosc z tego procentu: zdjecie imif /kariera/
     (120%) wychodzilo 562 px zamiast 468 (CLR-35 poz. 112). */
  .fea-hero .fea-hero__media[style*="--fea-img-m-pw"][style*="--fea-img-m-w"] {
    width: calc(var(--fea-img-m-pw) * 1cqw) !important;
  }
  .fea-hero .fea-hero__media[style*="--fea-img-m-pw"][style*="--fea-img-m-w"] img {
    width: 100% !important;
  }
}

/* ============================================================
   AR) WYROWNANIE TEKSTU ZE ZRODLA NA TELEFONIE

   Zrodlo podaje wyrownanie czterema wartosciami (a:left,right,right,right),
   wiec telefon bywa inny niz desktop. Na git /warsztaty-ndt-w-energetyce-
   jadrowej/ oba napisy stoja w oryginale do PRAWEJ, a u nas szly do lewej,
   mimo ze pudelko zgadzalo sie co do piksela (CLR-31 poz. 89).
   ============================================================ */
@container hero (max-width: 560px) {
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wta-m:prawo"] { text-align: right !important; }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wta-m:srodek"] { text-align: center !important; }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wta-m:lewo"] { text-align: left !important; }

  .fea-hero .fea-hero__slide[style*="--fea-h-m-ta:prawo"] .fea-hero__title:not(.fea-hero__title--drugi),
  .fea-hero .fea-hero__slide[style*="--fea-h-m-ta:prawo"] .fea-tablica__tytul { text-align: right !important; }
  .fea-hero .fea-hero__slide[style*="--fea-h-m-ta:srodek"] .fea-hero__title:not(.fea-hero__title--drugi),
  .fea-hero .fea-hero__slide[style*="--fea-h-m-ta:srodek"] .fea-tablica__tytul { text-align: center !important; }
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-ta:prawo"] .fea-hero__title--drugi { text-align: right !important; }
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-ta:srodek"] .fea-hero__title--drugi { text-align: center !important; }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-ta:prawo"] .fea-hero__lead:not(.fea-hero__lead--drugi) { text-align: right !important; }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-ta:srodek"] .fea-hero__lead:not(.fea-hero__lead--drugi) { text-align: center !important; }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-ta:prawo"] .fea-hero__lead--drugi { text-align: right !important; }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-ta:srodek"] .fea-hero__lead--drugi { text-align: center !important; }
}

/* ============================================================
   AS) KRESKA NA WSPOLRZEDNYCH ZE ZRODLA

   Plaska linia (Line-75.svg) lezy w oryginale MIEDZY dwoma naglowkami.
   Na slajdzie skladanym ze sceny kolumna tekstu jest pusta i ma zerowe
   pudelko, wiec kreska plynaca w jej wnetrzu siadala nad naglowkami:
   git /certyfikowane-materialy-odniesienia/ mial ja u nas na 30,33 przy
   1440 i 0,10 przy 390, a oryginal ma 5,82 i 14,44 (CLR-31 poz. 82).
   ============================================================ */
.fea-hero .fea-hero__kreska--stoi {
  position: absolute;
  left: calc(var(--fea-margines, 0px) + var(--kreska-x, 0) * var(--fea-jedn));
  top: calc(var(--kreska-y, 0) * var(--fea-jedn));
  /* Reguly biegnaca w kolumnie tekstu daja kreske odstep 10px/18px. Na
     wspolrzednych ze zrodla ten odstep jest bledem: dolicza sie do top
     i zsuwa linie o 10px w dol (1440: 92 zamiast 82). */
  margin: 0;
  z-index: 3;
}

@container hero (max-width: 560px) {
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__kreska--stoi[style*="--kreska-my"] {
    left: calc(var(--kreska-mx, 0) * var(--jm, var(--fea-jedn-m))) !important;
    top: calc(var(--kreska-my, 0) * var(--jm, var(--fea-jedn-m))) !important;
    width: calc(var(--kw-m, 310) * var(--jm, var(--fea-jedn-m))) !important;
    height: calc(var(--kreska-mh, 3) * var(--jm, var(--fea-jedn-m))) !important;
    max-width: none !important;
  }
}

/* ==== AH) RUNDA 35: zaleglosci CLR-21 do CLR-28 (weryfikacja 2026-10-16) ====
   Kazda regula odpowiada jednemu punktowi z docs/slidery-przekazanie.md,
   sekcja "Weryfikacja zaleglych zgloszen". Znaczniki w style sa z dwukropkiem
   (patrz runda 29: selektor nie moze lapac dluzszej zmiennej). */

/* 1. Podpis przypinki W SPOCZYNKU: klatka wejscia ma liczbowy start
   (st:4960), wiec oryginal pokazuje nazwisko bez najechania; najechanie
   tylko odtwarza animacje (Centrum /kariera/, ichp /kariera/, akcelerator).
   Na telefonie bez zmian: tam rzadzi --bez-mobile i --fea-badge-m-y. */
.fea-hero .fea-hero__przypinka .fea-hero__badge--spoczynek {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* 6. Odnosnik calego slajdu (rs_slidelink) i odnosnik grafiki. Lezy pod
   kolumna tekstu i pod mediami; kolumna tekstu przepuszcza klikniecia,
   lapia je tylko jej elementy (napisy, przyciski). Pudelko mediow ma
   wlasny odnosnik na wierzchu, bo samo lezy nad odnosnikiem slajdu. */
.fea-hero .fea-hero__slide-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.fea-hero .fea-hero__slide:has(> .fea-hero__slide-link) .fea-hero__text { pointer-events: none; }
.fea-hero .fea-hero__slide:has(> .fea-hero__slide-link) .fea-hero__text > * { pointer-events: auto; }
.fea-hero .fea-hero__media > .fea-hero__media-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

/* 4. Rozdroze: zdanie na x ze zrodla (git /: u gory po prawej, x=2300),
   druga grupa zdania na wlasnym x wzgledem pierwszej (desktop). */
.fea-hero .fea-rozdroze[style*="--fea-zdanie-lewa:"] > .fea-rozdroze__zdanie {
  left: var(--fea-zdanie-lewa);
  right: auto;
  margin: 0;
  white-space: nowrap;
}
@container hero (min-width: 561px) {
  .fea-hero .fea-rozdroze[style*="--fea-zd2-dx:"] > .fea-rozdroze__zdanie > .fea-rozdroze__zdanie-b {
    position: absolute;
    left: var(--fea-zd2-dx);
    top: 0;
    white-space: nowrap;
  }
}

@container hero (min-width: 561px) {
  /* 5. Tablica wydarzen: kazdy element na wspolrzednych ze zrodla, jak na
     telefonie. Rzad i kontener kart przestaja byc pudelkami ukladu. */
  .fea-hero .fea-hero__slide--tablica:has(> .fea-tablica[style*="--fea-tab-wys:"]) { padding-block: 0; }
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] {
    position: relative;
    min-height: calc(var(--fea-tab-wys) * var(--fea-jedn));
  }
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] > .fea-tablica__nad[style*="--nad-y:"],
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] > .fea-tablica__tytul[style*="--tyt-y:"] {
    position: absolute;
    margin: 0;
    white-space: nowrap;
  }
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] > .fea-tablica__nad[style*="--nad-y:"] {
    left: calc(var(--nad-x, 0) * var(--fea-jedn));
    top: calc(var(--nad-y) * var(--fea-jedn));
  }
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] > .fea-tablica__tytul[style*="--tyt-y:"] {
    left: calc(var(--tyt-x, 0) * var(--fea-jedn));
    top: calc(var(--tyt-y) * var(--fea-jedn));
  }
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] .fea-tablica__rzad,
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] .fea-tablica__karty { display: contents; }
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] .fea-tablica__karta[style*="--kart-y:"] {
    position: absolute;
    left: calc(var(--kart-x, 0) * var(--fea-jedn));
    top: calc(var(--kart-y) * var(--fea-jedn));
    width: calc(var(--kart-w, 454) * var(--fea-jedn));
    height: calc(var(--kart-h, 723) * var(--fea-jedn));
    margin: 0;
    padding: 0;
    gap: 0;
    display: block;
  }
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] .fea-tablica__karta[style*="--kart-y:"] img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  /* Pigulka ma wspolrzedne od sceny, a stoi w karcie - odejmujemy karte. */
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] .fea-tablica__karta[style*="--kpig-y:"] .fea-tablica__pigulka {
    position: absolute;
    left: calc((var(--kpig-x, 0) - var(--kart-x, 0)) * var(--fea-jedn));
    top: calc((var(--kpig-y) - var(--kart-y, 0)) * var(--fea-jedn));
    width: calc(var(--kpig-w, 408) * var(--fea-jedn));
    max-width: none;
    margin: 0;
    line-height: calc(var(--kpig-h, 64) * var(--fea-jedn));
    white-space: nowrap;
  }
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] .fea-tablica__blok[style*="--blok-y:"] {
    position: absolute;
    left: calc(var(--blok-x, 0) * var(--fea-jedn));
    top: calc(var(--blok-y) * var(--fea-jedn));
    width: calc(var(--blok-w, 519) * var(--fea-jedn));
    margin: 0;
    justify-self: auto;
  }
  .fea-hero .fea-tablica[style*="--fea-tab-wys:"] .fea-tablica__blok[style*="--blok-y:"] img {
    width: 100%;
    max-width: none;
  }

  /* 7. Wiersze plakietek na wlasnych x (ilot / slajd 2): odsuniecie od
     naglowka przez translate, zeby nie ruszac marginesow pudelka. */
  .fea-hero .fea-hero__slide[style*="--fea-h2-dx:"] .fea-hero__text > .fea-hero__title--drugi { translate: var(--fea-h2-dx) 0; }
  .fea-hero .fea-hero__slide[style*="--fea-d-dx:"] .fea-hero__text > .fea-hero__lead:not(.fea-hero__lead--drugi) { translate: var(--fea-d-dx) 0; }
  /* Drugi akapit z wlasnym x (--fea-d2-lewa) i tlem: ujemny margines
     poziomy pudelka cofal go o jego wciecie (ilot / "Sprawdz nasza oferte"
     9 px w lewo). Lewa krawedz pudelka ma stac na x ze zrodla. */
  .fea-hero .fea-hero__slide[style*="--fea-d2-lewa:"] .fea-hero__text > .fea-hero__lead--drugi.fea-hero__plakietka { margin-left: 0; }

  /* 8. Pudelko plakietki w ukladzie tekstowym zaczyna sie na y ze zrodla:
     ujemny margines pionowy pudelka podnosil kazdy wiersz o jego wciecie
     (ilot /: 4 px za wysoko). Poziomy zostaje - rownowazy go wciecie kolumny. */
  .fea-hero .fea-hero__slide.fea-hero__slide--text .fea-hero__text > .fea-hero__title.fea-hero__plakietka,
  .fea-hero .fea-hero__slide.fea-hero__slide--text .fea-hero__text > .fea-hero__lead.fea-hero__plakietka {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@container hero (max-width: 560px) {
  /* 1. Podpis w spoczynku, ktorego zrodlo NIE pokazuje na telefonie, zostaje
     przezroczysty - schowek 1x1 z clip-path i tak go kryje, ale pomiar
     i czytnik maja widziec to samo, co oko. */
  .fea-hero .fea-hero__przypinka .fea-hero__badge--spoczynek.fea-hero__badge--bez-mobile { opacity: 0; pointer-events: none; }

  /* 2. Waga pisma warstwy sceny na telefonie (kit / "Malopolskie i Slaskie
     Innowacje": 600 przy 300 na desktopie). */
  .fea-hero .fea-warstwa[style*="--wfw-m:"] { font-weight: var(--wfw-m) !important; }

  /* 3. Sztywne wymiary przycisku ze zrodla (ai /kariera/: 302x29 na siatce
     780). Przy wysokosci mniejszej od wciecia pudelko konczy sie na wcieciu,
     a napis lamie sie i wystaje pod spod - dokladnie jak w oryginale. */
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-w:"] .fea-hero__actions .fea-btn--cta1 {
    width: calc(var(--fea-cta-m-w) * var(--jm, var(--fea-jedn-m))) !important;
    white-space: normal !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-h:"] .fea-hero__actions .fea-btn--cta1 {
    height: calc(var(--fea-cta-m-h) * var(--jm, var(--fea-jedn-m))) !important;
    box-sizing: border-box;
  }
  .fea-hero .fea-hero__slide[style*="--fea-cta2-m-w:"] .fea-hero__actions .fea-btn--cta2 {
    width: calc(var(--fea-cta2-m-w) * var(--jm, var(--fea-jedn-m))) !important;
    white-space: normal !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-cta2-m-h:"] .fea-hero__actions .fea-btn--cta2 {
    height: calc(var(--fea-cta2-m-h) * var(--jm, var(--fea-jedn-m))) !important;
    box-sizing: border-box;
  }

  /* 4. Rozdroze na telefonie: scena zaczyna sie od gornej krawedzi slajdu.
     Slajd ma wciecie pionowe 78 siatki (8 px przy 390) liczone jednostka
     DESKTOPOWA, a wszystkie wspolrzedne telefonu sa od gory modulu - przez
     to panorama i pinezki staly 8 px za nisko (git /, 2026-10-16). Druga
     grupa zdania ("1 kierunek") na wlasnych wspolrzednych wzgledem pierwszej. */
  .fea-hero .fea-hero__slide--rozdroze:has(> .fea-rozdroze[style*="--fea-zd-m-y"]) { padding-block: 0 !important; }
  .fea-hero .fea-rozdroze[style*="--fea-zd-m-y"] .fea-rozdroze__zdanie { white-space: normal !important; }
  .fea-hero .fea-rozdroze[style*="--fea-zd2-m-dy:"] .fea-rozdroze__zdanie > .fea-rozdroze__zdanie-b {
    position: absolute;
    left: calc(var(--fea-zd2-m-dx, 0) * var(--jm, var(--fea-jedn-m)));
    top: calc(var(--fea-zd2-m-dy, 0) * var(--jm, var(--fea-jedn-m)));
    white-space: nowrap;
  }
}
/* 9. Tlo slajdu (backdrop) na CALA wysokosc slajdu. Motyw ma
   .elementor img { height: auto !important } (style.*.css), wiec obraz mial
   naturalna wysokosc (ilot /: 810 px przy slajdzie 394) i kadr pokazywal
   gore zdjecia zamiast srodka, a na telefonie nie siegal dolu slajdu
   (CLR-38 poz. 3). Bez !important przegrywa niezaleznie od swoistosci. */
.fea-hero .fea-hero__slide > .fea-hero__backdrop {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
}

@container hero (max-width: 560px) {
  /* 10. Kolor pisma telefonu ze zrodla (imif /, imif /kariera/, itr
     /kariera/: biel na zdjeciu przy czerni na desktopie; CLR-38). */
  .fea-hero .fea-hero__slide[style*="--fea-h-m-kolor:"] .fea-hero__title:not(.fea-hero__title--drugi) { color: var(--fea-h-m-kolor) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-kolor:"] .fea-hero__title--drugi { color: var(--fea-h2-m-kolor) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-kolor:"] .fea-hero__lead:not(.fea-hero__lead--drugi) { color: var(--fea-d-m-kolor) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-kolor:"] .fea-hero__lead--drugi { color: var(--fea-d2-m-kolor) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-tags-m-kolor:"] .fea-hero__tags { color: var(--fea-tags-m-kolor) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-kolor:"] .fea-hero__actions .fea-btn--cta1 { color: var(--fea-cta-m-kolor) !important; }
  .fea-hero .fea-hero__slide[style*="--fea-cta2-m-kolor:"] .fea-hero__actions .fea-btn--cta2 { color: var(--fea-cta2-m-kolor) !important; }
  .fea-hero .fea-warstwa[style*="--wkolor-m:"] { color: var(--wkolor-m) !important; }

  /* 11. Przycisk zapisany w TRESCI warstwy (itee /: <a class="btn--customized">
     w warstwie o pismie 4 px) wisi w oryginale wysrodkowany na wierszu
     warstwy, a ten wiersz ma STALE 14 px (interlinia klasy motywu, nie
     koperta 6 px) na kazdej szerokosci. U nas przycisk stal od gory wiersza
     i dolna polowa z napisem wychodzila pod kadr (CLR-38 poz. 7). */
  .fea-hero .fea-hero__slide[style*="--fea-cta-m-lh:"] .fea-hero__actions .fea-btn--cta1.btn--customized {
    translate: 0 calc(7px - 50%);
  }

  /* 12. Pudelko tekstu rosnie razem z zaokraglonym pismem (runda 37,
     CLR-38 poz. 5). Pismo telefonu zaokraglamy do pelnych pikseli (blok AG,
     tak jak RevSlider), ale szerokosc pudelka zostawala ulamkowa, wiec
     wiersz zlozony przez autora na styk przestawal sie miescic: ilot
     /pracuj-z-nami/ "Chcesz realizowac ciekawe projekty?" ma w zrodle
     pudelko na dwa wiersze (381 x 104 przy pismie 45 w siatce 780), po
     przeskalowaniu 190,5 px i pismo 22,5 -> 23 px; "Chcesz realizowac"
     mierzy 180,1 px przy 178,5 px tresci, naglowek lamal sie na cztery
     wiersze i czwarty wychodzil pod kadr. Oryginal robi to samo, klient
     chce poprawnie. Szerokosc liczymy w proporcji do zaokraglonego pisma
     (w / px * round(px * jedn)), nigdy wezsza niz ze zrodla, tylko gdy
     zrodlo podaje szerokosc. Zaokraglenie w dol zostawia pudelko bez
     zmian, zeby nie dokladac zlaman, ktorych oryginal nie ma. Warstwy
     z kadrem CSS slidera (-kadr, szerokosc 100cqw) i z szerokoscia
     procentowa (-pw) zostaja przy swoich regulach: tam pudelko nie
     pochodzi z w * jedn, a regresja 2026-10-26 pokazala, ze ta regula
     je nadpisywala (icso /, lukasiewicz /, impib /, kit /poznaj-nas/). */
  .fea-hero .fea-hero__slide[style*="--fea-h-m-y"][style*="--fea-h-m-w:"]:not([style*="--fea-h-m-kadr:"]):not([style*="--fea-h-m-pw:"]) .fea-hero__title:not(.fea-hero__title--drugi) {
    width: max(calc(var(--fea-h-m-w) * var(--jm, var(--fea-jedn-m))),
               calc(var(--fea-h-m-w) / var(--fea-h-m-px, 36) * round(calc(calc(var(--fea-h-m-px, 36) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-h2-m-y"][style*="--fea-h2-m-w:"]:not([style*="--fea-h2-m-kadr:"]):not([style*="--fea-h2-m-pw:"]) .fea-hero__title--drugi {
    width: max(calc(var(--fea-h2-m-w) * var(--jm, var(--fea-jedn-m))),
               calc(var(--fea-h2-m-w) / var(--fea-h2-m-px, 36) * round(calc(calc(var(--fea-h2-m-px, 36) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-d-m-y"][style*="--fea-d-m-w:"]:not([style*="--fea-d-m-kadr:"]):not([style*="--fea-d-m-pw:"]) .fea-hero__lead:not(.fea-hero__lead--drugi) {
    width: max(calc(var(--fea-d-m-w) * var(--jm, var(--fea-jedn-m))),
               calc(var(--fea-d-m-w) / var(--fea-d-m-px, 16) * round(calc(calc(var(--fea-d-m-px, 16) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-d2-m-y"][style*="--fea-d2-m-w:"]:not([style*="--fea-d2-m-kadr:"]):not([style*="--fea-d2-m-pw:"]) .fea-hero__lead--drugi {
    width: max(calc(var(--fea-d2-m-w) * var(--jm, var(--fea-jedn-m))),
               calc(var(--fea-d2-m-w) / var(--fea-d2-m-px, 16) * round(calc(calc(var(--fea-d2-m-px, 16) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px))) !important;
  }
  .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wy-m"][style*="--ww-m:"][style*="--wpx-m:"]:not([style*="--wkadr-m:"]):not([style*="--wpw-m:"]) {
    width: max(calc(var(--ww-m) * var(--jm, var(--fea-jedn-m))),
               calc(var(--ww-m) / var(--wpx-m, 16) * round(calc(calc(var(--wpx-m, 16) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px))) !important;
  }
}
/* ==== koniec AH ==== */

/* ==== AG) PISMO ZAOKRAGLONE DO PELNYCH PIKSELI (blok generowany) ==== */
/* Blok generowany przez wdrozenie/50-zaokraglenie-pisma.php - nie edytowac recznie.
   RevSlider wypisuje font-size i line-height jako liczby calkowite
   (Math.round po przeskalowaniu), my liczylismy ulamki: pigulki na git byly
   o 3 px szersze, akapit wit / przy 390 px lamal sie inaczej (CLR-31).
   Kazda regula ponizej powtarza regule z arkusza wyzej z wartoscia
   owinieta w round(); przegladarka bez round() pomija caly blok. */
@supports (font-size: round(1.4px, 1px)) {
  .fea-hero .fea-warstwa[style*="--wpx:"] { font-size: round(calc(var(--wpx) + 0.01px), 1px); }
  .fea-hero .fea-warstwa[style*="--wlh:"] { line-height: round(calc(var(--wlh) + 0.01px), 1px); }
  .fea-hero .fea-btn[style*="--fea-bfs:"] { font-size: round(calc(var(--fea-bfs) + 0.01px), 1px) !important; }
  .fea-hero .fea-btn[style*="--fea-blh:"] { line-height: round(calc(var(--fea-blh) + 0.01px), 1px) !important; }
  .fea-hero__title {
    font-size: round(calc(clamp(30px, 5cqi, 64px) + 0.01px), 1px);
  }
  .fea-hero__lead {
    font-size: round(calc(clamp(17px, 1.9cqi, 24px) + 0.01px), 1px);
  }
  .fea-hero--cover .fea-hero__title {
    font-size: round(calc(clamp(30px, 4.4cqi, 56px) + 0.01px), 1px);
  }
  .fea-hero--text .fea-hero__title {
    font-size: round(calc(clamp(34px, 6cqi, 76px) + 0.01px), 1px);
  }
  .fea-hero--event .fea-hero__title {
    font-size: round(calc(clamp(28px, 3.6cqi, 46px) + 0.01px), 1px);
  }
  .fea-hero__tagline {
    font-size: round(calc(clamp(16px, 1.7cqi, 20px) + 0.01px), 1px);
  }
  .fea-hero__subline {
    font-size: round(calc(var(--fea-s-size, clamp(16px, 1.6cqi, 19px)) + 0.01px), 1px);
  }
  .fea-hero .fea-hero__title {
    font-size: round(calc(clamp(30px, 5cqi, 64px) + 0.01px), 1px);
  }
  .fea-hero .fea-hero__lead {
    font-size: round(calc(clamp(17px, 1.9cqi, 24px) + 0.01px), 1px);
  }
  .fea-hero .fea-hero__tags li {
    font-size: round(calc(var(--fea-t-size, 14px) + 0.01px), 1px);
    line-height: round(calc(var(--fea-t-lh, 16px) + 0.01px), 1px);
  }
  .fea-hero .fea-hero__slide .fea-hero__title {
    font-size: round(calc(var(--fea-h-size, clamp(30px, 5cqi, 64px)) + 0.01px), 1px);
    line-height: round(calc(min(var(--fea-h-lh, 1.14em), 1.35em) + 0.01px), 1px);
  }
  .fea-hero .fea-hero__slide .fea-hero__lead, .fea-hero .fea-hero__slide .fea-hero__tagline {
    font-size: round(calc(var(--fea-d-size, clamp(17px, 1.9cqi, 24px)) + 0.01px), 1px);
  }
  .fea-tablica__nad, .fea-tablica__tytul {
    font-size: round(calc(calc(101 * var(--fea-jedn)) + 0.01px), 1px);
    line-height: round(calc(calc(122 * var(--fea-jedn)) + 0.01px), 1px);
  }
  .fea-tablica__pigulka {
    font-size: round(calc(calc(25 * var(--fea-jedn)) + 0.01px), 1px);
    line-height: round(calc(calc(64 * var(--fea-jedn)) + 0.01px), 1px);
  }
  .fea-rozdroze__zdanie {
    font-size: round(calc(calc(101 * var(--fea-jedn)) + 0.01px), 1px);
    line-height: round(calc(calc(122 * var(--fea-jedn)) + 0.01px), 1px);
  }
  .fea-rozdroze__pin {
    font-size: round(calc(calc(40 * var(--fea-jedn)) + 0.01px), 1px);
    line-height: round(calc(calc(45 * var(--fea-jedn)) + 0.01px), 1px);
  }
  .fea-hero .fea-hero__narzedzia--stoi .fea-narzedzie {
    font-size: round(calc(calc(var(--nf, 24) * var(--fea-jedn)) + 0.01px), 1px);
  }
  .fea-hero .fea-hero__slide .fea-hero__lead--drugi {
    font-size: round(calc(var(--fea-d2-size, var(--fea-d-size, clamp(17px, 1.9cqi, 24px))) + 0.01px), 1px);
  }
  .fea-hero .fea-hero__actions .fea-btn {
    font-size: round(calc(var(--fea-cta-size, 18px) + 0.01px), 1px);
    line-height: round(calc(var(--fea-cta-lh, 36px) + 0.01px), 1px);
  }
  .fea-hero .fea-tablica__nad, .fea-hero .fea-tablica__tytul, .fea-hero .fea-rozdroze__zdanie {
    font-size: round(calc(calc(101 * var(--fea-jedn)) + 0.01px), 1px);
    line-height: round(calc(calc(122 * var(--fea-jedn)) + 0.01px), 1px);
  }
  @container hero (min-width: 1200px) {
    .fea-hero .fea-hero__badge {
      font-size: round(calc(var(--fea-badge-fs, 18px) + 0.01px), 1px);
    }
  }
  @container (max-width: 560px) {
    .fea-tablica__nad, .fea-tablica__tytul {
      font-size: round(calc(calc(150 * var(--fea-jedn)) + 0.01px), 1px);
    }
    .fea-rozdroze__zdanie {
      font-size: round(calc(calc(150 * var(--fea-jedn)) + 0.01px), 1px);
    }
    .fea-rozdroze__pin {
      font-size: round(calc(calc(64 * var(--fea-jedn)) + 0.01px), 1px);
    }
  }
  @container hero (max-width: 900px) {
    .fea-hero .fea-warstwa {
      font-size: round(calc(clamp(15px, 4.2cqw, 22px) + 0.01px), 1px);
    }
  }
  @container hero (max-width: 780px) {
    .fea-hero .fea-btn {
      font-size: round(calc(clamp(13px, 3.4cqw, 16px) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide .fea-hero__title, .fea-hero .fea-hero__slide .fea-hero__title--drugi {
      font-size: round(calc(max(20px, var(--fea-h-size, clamp(20px, 6cqw, 32px))) + 0.01px), 1px);
    }
    .fea-hero .fea-hero__lead, .fea-hero .fea-hero__subline {
      font-size: round(calc(clamp(14px, 3.8cqw, 17px) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__meta li, .fea-hero .fea-hero__tags li {
      font-size: round(calc(clamp(13px, 3.4cqw, 15px) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-tablica__nad, .fea-hero .fea-tablica__tytul, .fea-hero .fea-rozdroze__zdanie {
      font-size: round(calc(clamp(20px, 6cqw, 34px) + 0.01px), 1px);
    }
    .fea-hero .fea-tablica__pigulka {
      font-size: round(calc(clamp(12px, 3.2cqw, 15px) + 0.01px), 1px);
    }
    .fea-hero .fea-rozdroze__pin {
      font-size: round(calc(clamp(11px, 3cqw, 14px) + 0.01px), 1px);
    }
  }
  @container hero (max-width: 560px) {
    .fea-hero .fea-hero__slide[style*="--fea-h2-m-y"] .fea-hero__title--drugi {
      font-size: round(calc(calc(var(--fea-h2-m-px, 36) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--fea-h2-m-lh, var(--fea-h2-m-px, 36)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-h-m-y"] .fea-hero__title:not(.fea-hero__title--drugi) {
      font-size: round(calc(calc(var(--fea-h-m-px, 36) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px);
      line-height: round(calc(calc(var(--fea-h-m-lh, var(--fea-h-m-px, 36)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-d-m-y"] .fea-hero__lead:not(.fea-hero__lead--drugi) {
      font-size: round(calc(calc(var(--fea-d-m-px, 16) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--fea-d-m-lh, var(--fea-d-m-px, 16)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-d2-m-y"] .fea-hero__lead--drugi {
      font-size: round(calc(calc(var(--fea-d2-m-px, 16) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--fea-d2-m-lh, var(--fea-d2-m-px, 16)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-tags-m-y"] .fea-hero__meta li, .fea-hero .fea-hero__slide[style*="--fea-tags-m-y"] .fea-hero__tags li {
      font-size: round(calc(calc(var(--fea-tags-m-px, 14) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--fea-tags-m-lh, var(--fea-tags-m-px, 14)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-warstwa[style*="--wy-m"] {
      font-size: round(calc(calc(var(--wpx-m, 16) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px);
      line-height: round(calc(calc(var(--wlh-m, var(--wpx-m, 16)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-btn[style*="--by-m"] {
      font-size: round(calc(calc(var(--bpx-m, 16) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--blh-m, var(--bpx-m, 16)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-cta-m-y"] .fea-hero__actions .fea-btn {
      font-size: round(calc(calc(var(--fea-cta-m-px, 16) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--fea-cta-m-lh, var(--fea-cta-m-px, 16)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-cta2-m-px"] .fea-hero__actions .fea-btn--cta2 {
      font-size: round(calc(calc(var(--fea-cta2-m-px) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--fea-cta2-m-lh, var(--fea-cta2-m-px)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__przypinka[style*="--fea-badge-m-y"] .fea-hero__badge:not(.fea-hero__badge--bez-mobile) {
      font-size: round(calc(calc(var(--fea-badge-m-px, 16) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--fea-badge-m-lh, var(--fea-badge-m-px, 16)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-hero__narzedzia[style*="--ay-m"] .fea-narzedzie:not([style*="--narz-m-h"]) {
      font-size: round(calc(calc(var(--apx-m, 9) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-scena-m"] .fea-narzedzie[style*="--narz-m-h"] {
      font-size: round(calc(calc(var(--narz-m-px, 9) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--narz-m-lh, var(--narz-m-px, 9)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-nad-m-px"] .fea-tablica__nad {
      font-size: round(calc(calc(var(--fea-nad-m-px) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--fea-nad-m-lh, var(--fea-nad-m-px)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-hero__slide[style*="--fea-h-m-px"] .fea-tablica__tytul {
      font-size: round(calc(calc(var(--fea-h-m-px) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--fea-h-m-lh, var(--fea-h-m-px)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-tablica[style*="--fea-scena-m"] .fea-tablica__karta[style*="--kpig-m-y"] .fea-tablica__pigulka {
      font-size: round(calc(calc(var(--kpig-m-px, 14) * var(--fea-jedn-m)) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--kpig-m-h, 40) * var(--fea-jedn-m)) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-rozdroze[style*="--fea-zd-m-y"] .fea-rozdroze__zdanie {
      font-size: round(calc(calc(var(--fea-zd-m-px, 40) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--fea-zd-m-lh, var(--fea-zd-m-px, 40)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
    .fea-hero .fea-rozdroze[style*="--fea-pan-m-y"] .fea-rozdroze__pin[style*="--pdx-m"] > span {
      font-size: round(calc(calc(var(--pdpx-m, 16) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
      line-height: round(calc(calc(var(--pdlh-m, var(--pdpx-m, 16)) * var(--jm, var(--fea-jedn-m))) + 0.01px), 1px) !important;
    }
  }
  @container hero (min-width: 561px) {
    .fea-hero .fea-tablica[style*="--fea-tab-wys:"] .fea-tablica__karta[style*="--kpig-y:"] .fea-tablica__pigulka {
      line-height: round(calc(calc(var(--kpig-h, 64) * var(--fea-jedn)) + 0.01px), 1px);
    }
  }
}
/* ==== koniec AG ==== */