/* =============================================
   RODZAJE DRZWI — sekcja "wybor typu" (uklad wg transigo.framer.website)
   Laduje WYLACZNIE `pages/oferta-drzwi.html`.

   Uklad: dwie kolumny — po lewej label + naglowek + lista rodzajow drzwi,
   po prawej zdjecie z plywajaca biala karta.

   Zachowanie przeniesione ze wzorca 1:1: KLIK na pozycji ustawia ja jako
   aktywna (bialy kafel + pomaranczowa strzalka), pozostale wracaja do
   stanu neutralnego. Wzorzec NIE zmienia przy tym zdjecia ani karty po
   prawej — one sa statyczne, i tu jest tak samo.

   SWIADOMIE POMINIETY: pomaranczowy pionowy pasek przy lewej krawedzi
   aktywnego kafla (zyczenie klienta). Nie dodawaj go z powrotem.

   UWAGA — model powiekszania skopiowany 1:1 ze wzorca (ZMIERZONE na zywej
   stronie transigo, geometria obu stanow): kafel ZWINIETY ma padding 0
   (tekst zaczyna sie na krawedzi kafla, dx=0/dy=0; odstepy miedzy kaflami
   robi GAP listy 30px), kafel AKTYWNY ma padding 30px ZE WSZYSTKICH stron —
   tekst przesuwa sie o 30px w prawo i w dol, WJEZDZAJAC w glab rosnacej
   karty (u wzorca: wysokosc 100 → 160 = tresc + 2×30). Ten ruch tekstu JEST
   sednem animacji — NIE wyrownuj paddingow „zeby tekst nie skakal", to juz
   raz cofnelo efekt (v14) i klient to odrzucil. Przeciw reflow opisu dziala
   `max-width` na `.door-types__item-desc` (opis miesci sie w szerokosci
   AKTYWNEGO stanu, wiec zwezenie kolumny nie zmienia lamania linii).
   Wysokosc CALEJ listy sie nie zmienia (aktywna jest zawsze dokladnie jedna
   pozycja: +60px na jednej = −60px na drugiej), wiec sekcje ponizej nie
   skacza.
   ============================================= */

.door-types {
  background-color: var(--white);
  padding: 100px 24px;
  /* Wjazdy `data-reveal="left|right"` — bez tego wysuw z prawej robilby
     poziome przewijanie strony. `clip`, a NIE `hidden`: `hidden`
     zrobiloby z sekcji kontener przewijania. */
  overflow-x: clip;
  /* Cel kotwicy dla kart z przekrojami na gorze strony
     (`href="#rodzaje-okien"` itd.). Navbar jest `position: fixed`, wiec bez
     tego etykieta sekcji ladowalaby tuz pod nim: wlasny padding-top sekcji
     to 100/80/72px, a dolna krawedz navbara to ~76/72/68px, czyli na
     telefonie zostawaloby raptem 4px. 24px daje odstep 48/32/28px na
     kolejnych breakpointach. Regula jest bezczynna na stronach, ktore
     jeszcze nie maja tych linkow. */
  scroll-margin-top: 24px;
}

.door-types__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  /* Prawa kolumna ma SZTYWNE 624px, bo kadr tej sekcji ma byc dokladnie tej
     samej wielkosci co zdjecie w hero strony oferty (zyczenie klienta).
     624 × 691 to `flex: 0 0 624px` + `height: 691px` z `.offer-page
     .hero__image` / `__image-stack` (css/offer-page.css, blok min-width 1025).
     Zmieniasz tam rozmiar hero → zmien te liczbe TUTAJ i `--dt-ratio` na
     `__media`, inaczej oba kadry sie rozjada. Wczesniej bylo
     `minmax(0, 1fr)`, czyli kadr byl plynny (664–668px) i wyzszy od hero. */
  grid-template-columns: minmax(0, 1fr) 624px;
  gap: 64px;
  /* Lewa kolumna (label + naglowek + lista) jest nizsza niz zdjecie, wiec
     centrujemy ja w pionie wzgledem kadru — inaczej „wisi" u gory.
     Ponizej 1024px kontener to jedna kolumna, wiec to bez znaczenia. */
  align-items: center;
}

/* =============================================
   LEWA KOLUMNA — label + naglowek + lista
   ============================================= */
.door-types__label {
  display: block;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: var(--dark-gray);
  margin-bottom: 18px;
}
.door-types__label::before { content: "// "; }

.door-types__heading {
  font-family: var(--font-family);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  color: var(--dark-gray);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

/* Bez hairline'ow nad/pod lista (usuniete na zyczenie klienta 2026-07-23).
   Miedzy pozycjami linii tez NIE ma. */
.door-types__list {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  /* Odstepy miedzy kaflami — 1:1 ze wzorcem (zmierzone 30px). Kafel zwiniety
     ma padding 0, wiec bez gapu pozycje sklejalyby sie ze soba. */
  gap: 30px;
}

/* =============================================
   POZYCJA LISTY
   `<button>` — obsluga klawiatury (Enter/Spacja) jest wtedy natywna.
   ============================================= */
.door-types__item {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  width: 100%;
  /* ZWINIETY = padding 0 (zmierzone na wzorcu: tekst na krawedzi kafla,
     dx=0/dy=0). Aktywacja animuje padding 0 → 30px ze wszystkich stron
     (`.is-active` nizej) — to wlasnie ten ruch tekstu w glab rosnacej karty
     jest animacja ze wzorca. Odstepy miedzy kaflami daje `gap` listy. */
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background-color: transparent;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
  /* POWOLNY, gladki wzrost (0.7s) — wzorzec transigo rosnie spokojnie, bez
     „snapu". Krzywa `cubic-bezier(0.37, 0, 0.63, 1)` (easeInOutSine) ma miekki
     start I miekkie zakonczenie — poprzednie 0.45s + easeOutQuint zaczynalo sie
     gwaltownie i czytalo jako „za szybkie". Padding (wzrost), fade wypelnienia
     (`::before`) i cien maja TEN SAM czas i krzywa, wiec kafel rosnie i wypelnia
     sie jednym, spojnym ruchem. */
  transition: padding 0.7s cubic-bezier(0.37, 0, 0.63, 1),
              background-color 0.7s cubic-bezier(0.37, 0, 0.63, 1),
              box-shadow 0.7s cubic-bezier(0.37, 0, 0.63, 1);
}

/* Biale tlo aktywnej pozycji WTAPIA sie (czysty fade opacity 0 → 1), a sam
   kafel jednoczesnie ROSNIE przez wiekszy padding (`.is-active` nizej,
   zsynchronizowany czasem 0.45s). To 1:1 charakter animacji ze wzorca
   (transigo „Success Section", wariant „Open" = jasne wypelnienie
   `rgba(255,255,255,0.07)` + wiekszy kafel): „wypelnianie + lekkie
   powiekszanie", BEZ zadnego ruchu kierunkowego. Warstwa jest na `::before`
   (a nie na tle itemu), bo osobny element nie koliduje z reguła revealu (ta
   celuje w `.door-types__item`, wiec przejscia `::before` nie nadpisuje).
   Celowo BEZ `transform: scale` — skalowanie „ze srodka" czyta sie jak pop;
   powiekszanie niesie sam padding. */
.door-types__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #ffffff;
  border-radius: inherit;
  opacity: 0;
  /* Ten sam czas i krzywa co wzrost kafla (patrz `.door-types__item`) —
     wypelnienie i powiekszanie ida razem, spokojnie, bez „snapu". */
  transition: opacity 0.7s cubic-bezier(0.37, 0, 0.63, 1);
  pointer-events: none;
}

.door-types__item.is-active::before {
  opacity: 1;
}

/* Tresc nad warstwa wypelnienia. */
.door-types__item-text,
.door-types__item-arrow {
  position: relative;
  z-index: 1;
}

.door-types__item:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

/* BRAK JAKIEGOKOLWIEK podswietlenia tla pozycji — ani na hover, ani na
   `:active` (wcisniecie). Wzorzec (transigo) tez go nie ma; jedyna afordancja
   to `cursor: pointer`, a informacja zwrotna po kliknieciu to wypelnienie
   aktywnej pozycji (wipe `::before`). Globalne podswietlenie dotkniecia jest
   wylaczone globalnie (base.css v130). */

.door-types__item.is-active {
  /* AKTYWNY = padding 30px ze wszystkich stron — DOKLADNIE jak wzorzec
     (zmierzone: tekst dx=30/dy=30, wysokosc = tresc + 60px). Tekst wjezdza
     w prawo i w dol, kafel rosnie o 60px. Cien to nasza adaptacja wypelnienia
     na jasnym tle (wzorzec ma polprzezroczysta biel na granacie, bez cienia). */
  padding: 30px;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.14);
  cursor: default;
}

.door-types__item-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.door-types__item-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--dark-gray);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.door-types__item-desc {
  font-size: 16px;
  font-weight: 400;
  color: rgba(21, 21, 21, 0.7);
  line-height: 1.6;
  /* Miesci sie w szerokosci kolumny stanu AKTYWNEGO (kolumna ~668px minus
     2×30 padding, 24 gap i 44 strzalka ≈ 540px) — dzieki temu animowanie
     paddingu poziomego NIE zmienia lamania linii opisu (zero reflow-skoku
     w trakcie ruchu). Wzorzec ma na tyle krotkie opisy, ze nie potrzebuje
     tego zabezpieczenia. */
  max-width: 520px;
}

/* Kwadratowa plakietka strzalki — 1:1 z konwencja ikon serwisu
   (.why-us__feature-icon, .showroom__card-icon, .portfolio-process__step-icon):
   radius 5px, miekkie polprzezroczyste pomaranczowe tlo, pomaranczowa ikona,
   BEZ obrysu. Aktywna pozycja przechodzi na pelny gradient + biala ikona —
   to jedyny sygnal, ktory kafel jest wybrany, wiec nie zrownuj go z reszta. */
.door-types__item-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--orange-rgb), 0.12);
  color: var(--orange);
  transition: background-color 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.door-types__item-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

.door-types__item.is-active .door-types__item-arrow {
  background: var(--orange-gradient);
  color: var(--white);
}

/* =============================================
   PRAWA KOLUMNA — pionowy "beben" kadrow (mechanika ze wzorca)
   Kadr (`__media`) przycina tasme (`__track`), na ktorej slajdy stoja JEDEN
   POD DRUGIM, rozdzielone przerwa `--dt-gap`. Klik w pozycje listy przesuwa
   tasme w gore o dokladnie jeden slajd: stary kadr wyjezdza gora, nowy
   wjezdza dolem, a miedzy nimi na chwile widac tlo sekcji — tak jak we
   wzorcu (zmierzone: przerwa ~17% wysokosci kadru).

   WYSOKOSC SLAJDU NIE JEST NIGDZIE PODANA — slajd ma te sama szerokosc
   i te sama proporcje (`--dt-ratio`) co kadr, wiec jego wysokosc rowna sie
   wysokosci kadru na kazdej szerokosci ekranu. Dlatego przy zmianie
   proporcji w bloku responsywnym ruszaj TYLKO `--dt-ratio` na `__media`
   (custom property dziedziczy sie do slajdow).

   Przesuniecie (`--dt-y`) liczy inline JS z `offsetTop` aktywnego slajdu,
   nie z wysokosci wpisanej w CSS — dzieki temu dziala przy dowolnej
   przerwie i po zmianie rozmiaru okna.
   ============================================= */
.door-types__media {
  /* 624 / 691 = proporcja kadru hero strony oferty (patrz `__container`).
     Szerokosc daje kolumna gridu, wiec ta proporcja wyznacza WYSOKOSC —
     i dziedziczy sie do slajdow, dzieki czemu slajd nadal rowna sie kadrowi
     (bylo `5 / 6`, czyli kadr 664 × 797 przy hero 624 × 691). */
  --dt-ratio: 624 / 691;
  /* Przerwa miedzy slajdami — we wzorcu ~130px przy kadrze 752px.
     MUSI byc w px: procentowy `gap` we flexie w kolumnie liczy sie od
     wlasnej wysokosci tasmy, a ta jest wyznaczana przez tresc (indefinite),
     wiec wyszloby z tego zero. */
  --dt-gap: 130px;
  position: relative;
  aspect-ratio: var(--dt-ratio);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.door-types__track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--dt-gap);
  transform: translate3d(0, var(--dt-y, 0px), 0);
  /* Czas i krzywa dobrane do POMIARU wzorca (probkowanie rAF): ~50% drogi
     w ~160 ms, ~90% w ~415 ms, potem dlugie, miekkie dochodzenie do konca.
     Przy 1.05 s ta krzywa trafia w 163 / 399 ms, czyli praktycznie 1:1.
     Krzywa jest ta sama, ktorej uzywa reszta serwisu — nie podmieniaj jej
     na `--reveal-ease` (expo-out wypala niemal caly ruch w pierwszych
     ~120 ms i czyta sie jak przeskok, nie jak przejazd). */
  transition: transform 1.05s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

.door-types__slide {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: var(--dt-ratio);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Ustawiane z JS na czas przeliczenia po zmianie rozmiaru okna — bez tego
   tasma "dojezdzalaby" do nowej pozycji, choc nikt nie kliknal. */
.door-types__track.is-instant {
  transition: none;
}

/* Slajd BEZ zdjecia produktowego — dla kategorii, do ktorych nie mamy jeszcze
   grafiki (kurtyny ppoz, doki, szlabany). Neutralne, markowe tlo + ikona
   „zdjecie w przygotowaniu" zamiast cudzego, wprowadzajacego w blad zdjecia.
   DO PODMIANY, gdy klient dostarczy realne foto (wystarczy zamienic
   `<div class="door-types__placeholder">…</div>` na `<img class="door-types__img">`). */
.door-types__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ECE8DF, #E4E0D6);
  color: rgba(21, 21, 21, 0.26);
}
.door-types__placeholder svg {
  width: 72px;
  height: 72px;
  display: block;
}

.door-types__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `cover` — zdjecie WYPELNIA cala ramke (bez tla po bokach), kosztem
     przyciecia gory/dolu, bo zdjecia to bardzo waskie, wysokie kadry drzwi.
     Zyczenie klienta (powrot do „starego rozmiaru", gdzie obraz wypelnia kadr).
     Anuluje `contain` z v13. */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Plakietka na dole kadru — rozpieta miedzy lewa i prawa krawedzia zdjecia
   (rowny odstep 24px z obu stron i od dolu), czyli ~93% szerokosci kadru.
   Przyklejona DOLEM (`bottom: 24px`) — jak pierwotnie; krotki wypad na
   `top: 100px` (2026-08-06) byl bledna interpretacja zyczenia klienta
   i zostal cofniety w tej samej sesji. Chodzilo o SKROCENIE WYSOKOSCI karty,
   nie o jej przesuniecie — zalatwia to nizszy padding (28px → 20px) razem
   z usunieta ikona (`.door-types__card-icon`, usunieta z CSS i z markupu
   wszystkich 19 stron) i cienszym odstepem pod tytulem (12px → 8px); efekt
   unoszenia (`door-types-float`) byl juz wczesniej usuniety tego samego dnia.
   TLO JEST PELNE BIALE, NIE SZKLO — `backdrop-filter` zostal usuniety razem z
   przezroczystoscia: na ciemniejszych zdjeciach (drzwi, bramy) tekst na
   polprzezroczystym kremie gubil kontrast. Nie przywracaj `rgba(...)` +
   `blur()` bez sprawdzenia czytelnosci na najciemniejszym zdjeciu w sekcji.
   `#ffffff`, a NIE `var(--white)` — token jest kremowy (#FAF9F4). */
.door-types__card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.18);
}

.door-types__card-title {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--dark-gray);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

/* WYSOKOSC KARTY = WYSOKOSC TEGO TEKSTU. Karta jest przyklejona DOLEM
   (`bottom: 24px`), wiec kazda dodatkowa linia opisu podnosi jej GORNA
   krawedz o 24px i karty przestaja byc rowne miedzy slajdami.
   Dlatego obowiazuja DWIE reguly, ktore trzeba trzymac razem:
   1) NA DESKTOPIE (>=1201px) kazdy opis musi zmiescic sie w JEDNEJ linii,
      czyli w **536px** (kadr 624 - 2x24 marginesu karty - 2x20 paddingu —
      liczba urosla z 520px razem ze zmniejszeniem paddingu w tej sesji).
      To jest twardy budzet tresci — po zmianie tekstu przemierz go
      (canvas `measureText` z computed fontem), bo przekroczenie o 1px
      daje 24px wyzsza karte.
   2) PONIZEJ 1201px kadr jest wezszy i opisy i tak zawijaja sie na 2 linie
      (ale nie wszystkie — najkrotsze mieszcza sie w jednej), wiec rownosc
      trzyma podloga `min-height` nizej. */
.door-types__card-text {
  font-size: 15px;
  font-weight: 400;
  color: rgba(21, 21, 21, 0.7);
  line-height: 1.6;
  margin: 0;
}

/* Podloga 2 linii — wyrownuje karty niezaleznie od dlugosci tekstu.
   `em` liczy sie od wlasnego `font-size`, wiec dziala takze po zejsciu
   na 14px w bloku <=768px (nie zamieniaj na px). Na desktopie podlogi
   celowo NIE MA — tam rownosc daje budzet jednej linii z punktu 1 wyzej. */
@media (max-width: 1200px) {
  .door-types__card-text {
    min-height: calc(2 * 1.6em);
  }
}

/* Ponizej 360px karta ma juz tylko ~216–237px na tekst, wiec czesc opisow
   wchodzi na 3 linie, a kilka TYTULOW na 2 — czyli dochodzi drugie zrodlo
   nierownosci, ktorego wyzej nie ma. Stad podwojna podloga.
   PROG 359px JEST ZMIERZONY, NIE OKRAGLY: przy 360px wszystkie opisy
   mieszcza sie jeszcze w 2 liniach, przy 341px juz nie (sprawdzone na
   wszystkich 19 stronach) — dlatego blok nie moze zaczynac sie nizej.
   `line-height` tytulu jest tu ustawiony JAWNIE (globalnie ma `normal`,
   czyli wartosc zalezna od fontu, ktorej nie da sie policzyc w `em`) —
   zmiana jest zamknieta w tym bloku, wiec nie rusza szerszych ekranow. */
@media (max-width: 359px) {
  .door-types__card-text {
    min-height: calc(3 * 1.6em);
  }

  .door-types__card-title {
    line-height: 1.25;
    min-height: calc(2 * 1.25em);
  }
}

/* =============================================
   SCROLL REVEAL
   Stan ukryty pod bramka `.eo-reveal` dodawana przez inline JS strony —
   brak/stary JS = tresc widoczna bez animacji (wzorzec partners.css v32).
   ============================================= */
.door-types.eo-reveal {
  --eo-reveal-dur: 0.7s;
  --eo-ease: ease-out;
  --eo-shift: 30px;
}

.door-types.eo-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--eo-shift));
  transition: opacity var(--eo-reveal-dur) var(--eo-ease),
              transform var(--eo-reveal-dur) var(--eo-ease);
}

/* Kierunki — MUSZA zostac po regule wyzej (rowna specyficznosc,
   decyduje kolejnosc w zrodle). */
.door-types.eo-reveal [data-reveal="left"]  { transform: translateX(calc(-1 * var(--eo-shift))); }
.door-types.eo-reveal [data-reveal="right"] { transform: translateX(var(--eo-shift)); }

/* Pozycja listy ma wlasne `transition` (padding/tlo/cien) — regula
   revealu je nadpisuje, wiec trzeba je tu powtorzyc, inaczej
   przelaczanie aktywnej pozycji przestaje byc animowane. */
.door-types.eo-reveal .door-types__item[data-reveal] {
  transition: opacity var(--eo-reveal-dur) var(--eo-ease),
              transform var(--eo-reveal-dur) var(--eo-ease),
              padding 0.7s cubic-bezier(0.37, 0, 0.63, 1),
              background-color 0.7s cubic-bezier(0.37, 0, 0.63, 1),
              box-shadow 0.7s cubic-bezier(0.37, 0, 0.63, 1);
}
/* Bramka wejscia zdejmuje przejscie z `.door-types__item`, wiec jego
   krzywa/czas dla paddingu i tak deklaruje regula wyzej — nic tu nie brakuje. */

.door-types.eo-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* =============================================
   RESPONSYWNOSC
   ============================================= */
/* === Desktop 1025–1200px — kadr nadaza za hero, ktore schodzi tu do 440 × 500
   (`.offer-page .hero__image` w tym samym zakresie, css/offer-page.css).
   Prog 1200 jest przepisany z offer-page.css — jesli tam sie zmieni, tu tez. === */
@media (min-width: 1025px) and (max-width: 1200px) {
  .door-types__container {
    grid-template-columns: minmax(0, 1fr) 440px;
  }

  .door-types__media {
    --dt-ratio: 440 / 500;
  }
}

@media (max-width: 1024px) {
  /* Cel przewijania dla kart z przekrojami. W tym zakresie sekcja jest
     statycznym stosem (patrz nizej), wiec inline JS celuje w KONKRETNY
     kafel, a nie w gore sekcji — tu tylko odsuwamy go od navbara
     (jego dolna krawedz to ~72px na tablecie i ~68px na telefonie). */
  .door-types__item {
    scroll-margin-top: 96px;
  }

  .door-types {
    padding: 80px 24px;
  }

  /* JEDNA KOLUMNA — WSZYSTKO ROZWINIETE OD RAZU (wzorzec transigo mobile,
     zyczenie klienta): kazdy kafel ma SWOJE zdjecie bezposrednio pod soba,
     nic sie nie przelacza ani nie rozwija — strone sie tylko przewija.
     `display: contents` na `__content`/`__list`/`__media`/`__track`
     splaszcza kafle i slajdy do JEDNEGO flexa, a pary kafel → slajd sklada
     `order` (kafle 10/20/30, slajdy 15/25/35). Zero zmian w inline JS
     19 stron — mechanika "bebna" (transform tasmy) i `is-active` po prostu
     nie maja tu pudelka, na ktorym moglyby cokolwiek zrobic. */
  .door-types__container {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Baza ma `align-items: center` (pionowe centrowanie kolumn grida) —
       w kolumnie flexa zwezaloby to dzieci do szerokosci tresci. */
    align-items: stretch;
  }

  .door-types__content,
  .door-types__list,
  .door-types__media,
  .door-types__track {
    display: contents;
  }
  /* UWAGA: przez `display: contents` przestaja istniec: marginesy/gap listy,
     KADR `__media` (aspect-ratio, overflow, max-width) i transform tasmy —
     wlasciwosci pudelka przenosza sie na SLAJDY (nizej). Custom properties
     (`--dt-ratio`) dziedzicza sie mimo `display: contents`, wiec zostaja
     zadeklarowane na `__media` jak wszedzie indziej. */

  .door-types__label { order: 1; }

  .door-types__heading {
    order: 2;
    font-size: 40px;
    /* + margin-top kafla (30px) = dawne 48px odstepu naglowek → lista. */
    margin-bottom: 18px;
  }

  /* Odstepy ida WYLACZNIE z `margin-top` (gap: 0), bo margines wedruje
     ze swoim elementem niezaleznie od `order`. */
  .door-types__item { margin-top: 30px; }
  .door-types__item:nth-child(1) { order: 10; }
  .door-types__item:nth-child(2) { order: 20; }
  .door-types__item:nth-child(3) { order: 30; }

  /* Slajd wskakuje ZA kafel o tym samym indeksie. Mniejszy margines niz
     kafla (24 vs 30) wiaze zdjecie wizualnie z JEGO kaflem. */
  .door-types__slide {
    width: 100%;
    max-width: 520px;
    margin: 24px auto 0;
  }
  .door-types__slide:nth-child(1) { order: 15; }
  .door-types__slide:nth-child(2) { order: 25; }
  .door-types__slide:nth-child(3) { order: 35; }

  /* Przy statycznej liscie stan aktywny NIE MA znaczenia — wszystkie kafle
     maja wygladac IDENTYCZNIE (wzorzec: jednolita lista). Neutralizacja
     bialej karty, cienia, wypelnienia `::before` i pomaranczowej strzalki
     1. kafla. Reguly maja te sama specyficznosc co bazowe stany aktywne —
     wygrywaja pozycja w zrodle (media query nie dodaje wagi). */
  .door-types__item,
  .door-types__item.is-active {
    padding: 0;
    box-shadow: none;
    cursor: default;
  }
  .door-types__item.is-active::before { opacity: 0; }
  .door-types__item.is-active .door-types__item-arrow {
    background: rgba(var(--orange-rgb), 0.12);
    color: var(--orange);
  }

  /* Kolumna jest tu duzo szersza niz na desktopie. */
  .door-types__item-desc {
    max-width: 620px;
  }

  /* Proporcje slajdow zmienia sie WYLACZNIE przez `--dt-ratio` — slajdy
     czytaja te zmienna (dziedziczy sie mimo `display: contents`). */
  .door-types__media {
    --dt-ratio: 4 / 5;
  }
}

@media (max-width: 768px) {
  .door-types {
    padding: 72px 16px;
  }

  .door-types__heading {
    font-size: 32px;
    /* + margin-top kafla (22px) = 36px odstepu naglowek → lista. */
    margin-bottom: 14px;
  }

  .door-types__item {
    gap: 16px;
    margin-top: 22px;
  }
  /* Stan aktywny jest zneutralizowany juz w bloku ≤1024 (statyczna lista) —
     NIE przywracaj tu `padding` dla `.is-active`. */

  .door-types__slide {
    margin-top: 18px;
  }

  .door-types__item-title {
    font-size: 20px;
  }

  .door-types__item-desc {
    font-size: 15px;
  }

  .door-types__item-arrow {
    width: 40px;
    height: 40px;
  }

  .door-types__item-arrow svg {
    width: 16px;
    height: 16px;
  }

  .door-types__media {
    --dt-ratio: 3 / 4;
  }

  /* Ciasniejszy odstep od krawedzi kadru — na telefonie 24px zjadaloby
     zauwazalna czesc waskiego zdjecia. (`max-width: none` odpadlo razem z
     desktopowym `max-width: 330px`, ktorego juz nie ma. Padding 20px jest tu
     teraz taki sam jak w bazowej regule — zostaje jako jawna wartosc, zeby
     breakpoint byl czytelny sam z siebie, nie przez dziedziczenie.) */
  .door-types__card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 20px;
  }

  .door-types__card-title {
    font-size: 19px;
    margin-bottom: 8px;
  }

  .door-types__card-text {
    font-size: 14px;
  }
}

/* =============================================
   REDUCED MOTION — zostaje sam fade wejscia, znika ruch
   przy przelaczaniu aktywnej pozycji (zgodnie z base.css v131–132).
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .door-types.eo-reveal {
    --eo-shift: 0px;
    --eo-reveal-dur: 0.2s;
  }

  .door-types__item,
  .door-types.eo-reveal .door-types__item[data-reveal] {
    transition: opacity 0.2s ease, background-color 0.2s ease;
  }

  .door-types__item-arrow {
    transition: none;
  }

  /* Kadr przeskakuje na wybrany slajd bez przejazdu. */
  .door-types__track {
    transition: none;
  }

  /* Wypelnienie aktywnej pozycji bez wipe'u — pojawia sie od razu. */
  .door-types__item::before {
    transition: none;
  }
}