/* =============================================
   SHOWROOM / SALON SECTION (mirror of why-us)
   Used on: hero.html, oferta-okna.html
   ============================================= */
.showroom {
  background-color: var(--white);
  padding: 100px 24px;
  position: relative;
  overflow: hidden;
}

.showroom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at 20% 50%, rgba(var(--orange-rgb), 0.06) 0%, rgba(var(--orange-rgb), 0.02) 40%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.showroom__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ---- Left: Text content ---- */
.showroom__content {
  display: flex;
  flex-direction: column;
}

.showroom__label {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--dark-gray);
  border: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  align-self: flex-start;
}

.showroom__heading {
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dark-gray);
  margin-bottom: 20px;
}

.showroom__subheading {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gray-500);
  margin-bottom: 44px;
  max-width: 520px;
}

/* ---- Feature list ---- */
.showroom__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.showroom__feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.showroom__feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(var(--orange-rgb), 0.4), rgba(var(--orange-end-rgb), 0.4));
  color: var(--orange);
}

.showroom__feature-icon svg {
  width: 24px;
  height: 24px;
}


.showroom__feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.showroom__feature-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dark-gray);
  line-height: 1.3;
}

.showroom__feature-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--gray-500);
  /* Ensure consistent height — always at least 2 lines */
  min-height: 3.1em;
}

/* ---- Right: Image ---- */
.showroom__image-wrapper {
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow:
    0 24px 64px rgba(30, 30, 30, 0.10),
    0 8px 24px rgba(var(--orange-rgb), 0.06);
}

.showroom__image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(30, 30, 30, 0.25) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 11px;
}

.showroom__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Floating badge ---- */
.showroom__badge {
  position: absolute;
  bottom: 32px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 21px 31px;
  background: rgba(249, 246, 244, 0.75);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  z-index: 2;
  animation: showroom-float 3s ease-in-out infinite;
  animation-play-state: paused;
  will-change: transform;
  contain: layout style;
}

.showroom.in-view .showroom__badge {
  animation-play-state: running;
}

.showroom__badge-icon {
  flex-shrink: 0;
  width: 57px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--orange-rgb), 0.12);
  border-radius: 50%;
  color: var(--orange);
}

.showroom__badge-icon svg {
  width: 29px;
  height: 29px;
}

.showroom__badge-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.showroom__badge-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--dark-gray);
  line-height: 1.3;
}

.showroom__badge-hours {
  font-size: 26px;
  font-weight: 700;
  color: var(--dark-gray);
  line-height: 1.2;
}

@keyframes showroom-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ---- Scroll reveal ---- */
.showroom__container.reveal-showroom {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
}

.showroom__container.reveal-showroom.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   RESPONSIVE — SHOWROOM
   ============================================= */
/* Offer page: image left, text right */
.offer-page .showroom__container {
  grid-template-columns: 5fr 6fr;
}

.offer-page .showroom__image-wrapper {
  order: -1;
}

/* === Wide desktop (≤1200px) === */
@media (max-width: 1200px) {
  .showroom__heading {
    font-size: 44px;
  }
}

/* === Tablet (≤1024px) === */
@media (max-width: 1024px) {
  .showroom {
    padding: 80px 24px;
  }

  .showroom__container,
  .offer-page .showroom__container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .offer-page .showroom__image-wrapper {
    order: 4;
  }

  .showroom__content {
    display: contents;
  }

  .showroom__label { order: 1; justify-self: start; margin-bottom: 20px; }
  .showroom__heading { order: 2; margin-bottom: 20px; text-align: left; font-size: 36px; }
  .showroom__subheading { order: 3; margin-bottom: 32px; text-align: left; max-width: 560px; margin-left: 0; margin-right: auto; font-size: 16px; }
  .showroom__image-wrapper {
    order: 4;
    max-width: none;
    width: 100%;
    margin: 0 auto 40px;
    aspect-ratio: 5 / 4;
  }
  .showroom__features { order: 5; }

  .showroom__badge {
    bottom: 24px;
    left: 18px;
    padding: 16px 22px;
    gap: 14px;
    border-radius: 9px;
  }

  .showroom__badge-icon {
    width: 44px;
    height: 44px;
  }

  .showroom__badge-icon svg {
    width: 22px;
    height: 22px;
  }

  .showroom__badge-title {
    font-size: 16px;
  }

  .showroom__badge-hours {
    font-size: 20px;
  }
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  .showroom {
    padding: 72px 20px;
  }

  .showroom__container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Break content wrapper so children participate in grid */
  .showroom__content {
    display: contents;
  }

  /* Order: label → heading → subheading → image+badge → features */
  .showroom__label { order: 1; justify-self: start; margin-bottom: 20px; }
  .showroom__heading { order: 2; margin-bottom: 20px; text-align: left; }
  .showroom__subheading { order: 3; margin-bottom: 32px; text-align: left; }
  .showroom__image-wrapper {
    order: 4;
    max-width: none;
    width: 100%;
    margin: 0 auto 40px;
    aspect-ratio: 5 / 4;
  }
  .showroom__features { order: 5; }

  .showroom__heading {
    font-size: 32px;
  }

  .showroom__subheading {
    font-size: 15px;
  }

  /* Telefon: plakietka rozpieta na CALA szerokosc zdjecia, z rownym luzem
     16px z obu stron. Wariant bento (jedyny renderowany) nadpisuje to jeszcze
     raz nizej — patrz blok "Mobile (≤768px) — single column". */
  .showroom__badge {
    bottom: 20px;
    left: 16px;
    right: 16px;
    padding: 16px 18px;
    gap: 14px;
    border-radius: 8px;
  }

  .showroom__badge-icon {
    width: 44px;
    height: 44px;
  }

  .showroom__badge-icon svg {
    width: 22px;
    height: 22px;
  }

  .showroom__badge-title {
    font-size: 16px;
  }

  .showroom__badge-hours {
    font-size: 22px;
  }

  .showroom__features {
    gap: 16px;
  }

  .showroom__feature-icon {
    width: 42px;
    height: 42px;
  }

  .showroom__feature-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* Section badge prefix "// " */
.showroom__label::before { content: "// "; }
.showroom__label { text-transform: capitalize; }

/* =============================================
   BENTO VARIANT — hero.html only
   Header (label + heading left, subheading right) above
   a 3-col grid: 2 cards | image | 2 cards.
   ============================================= */
.showroom--bento .showroom__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: block;
  grid-template-columns: none;
  gap: 0;
  align-items: initial;
}

/* ---- Header row ---- */
.showroom--bento .showroom__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
  margin-bottom: 56px;
}

.showroom--bento .showroom__label {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin-bottom: 20px;
}

.showroom--bento .showroom__heading {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 0;
}

.showroom--bento .showroom__subheading {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  max-width: 408px;
  margin: 0;
  font-size: 18px;
}

/* ---- Body: 2 cards | image | 2 cards ---- */
.showroom--bento .showroom__layout {
  display: grid;
  grid-template-columns: minmax(260px, 1.0575fr) minmax(0, 1.035fr) minmax(260px, 1.0575fr);
  gap: 24px;
  align-items: stretch;
}

.showroom--bento .showroom__cards {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
  min-height: 0;
}

.showroom--bento .showroom__card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 36px 34px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.showroom--bento .showroom__card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(var(--orange-rgb), 0.12);
  color: var(--orange);
  margin-bottom: auto;
}

.showroom--bento .showroom__card-icon svg {
  width: 24px;
  height: 24px;
}

/* `margin-top` NIE jest tu ozdoba, tylko PODLOGA odstepu pod ikona — patrz
   showroom.css v69. Ikona ma `margin-bottom: auto`, ktore rozdaje WOLNE miejsce
   karty; gdy karta ma wysokosc tresci (telefon, tablet, waski desktop), wolnego
   miejsca nie ma i `auto` daje 0px, wiec ikona przylegala wprost do tytulu.
   Marginesy w kontenerze flex sie NIE kolapsuja i `auto` liczy reszte JUZ PO
   ich odjeciu, wiec odstep wychodzi `max(36px, wolne miejsce)`: na rozciagnietej
   karcie desktopowej nadal 38px (bez zmiany), a tam gdzie bylo 0 — rowne 36px,
   czyli tyle co padding karty. Nie zamieniaj tego na `gap` — gap objalby takze
   pare tytul/opis, ktora ma wlasne 10px. */
.showroom--bento .showroom__card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-gray);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 36px 0 10px;
}

.showroom--bento .showroom__card-desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray-500);
  margin: 0;
}

/* ---- Image (center column) ---- */
/* `order: 0` NIE jest zbedne: `.offer-page .showroom__image-wrapper { order: -1 }`
   (linia ~257) pochodzi ze STAREGO ukladu stron oferty, gdzie zdjecie mialo stac
   po lewej. Od 2026-07-22 te strony renderuja bento, gdzie zdjecie nalezy do
   SRODKOWEJ kolumny `.showroom__layout` — bez tego zerowania wskakiwalo na
   pierwsza pozycje i uklad czytal sie jako „zdjecie | 4 karty" zamiast
   „2 karty | zdjecie | 2 karty". Obie reguly maja (0,2,0), wiec wygrywa ta
   pozniejsza w zrodle — nie przenos tego bloku ponad reguly `.offer-page`.
   Blok tabletowy bento ma WLASNE `order: -1` (zdjecie nad siatka 2×2) i to
   jest zamierzone. */
.showroom--bento .showroom__image-wrapper {
  aspect-ratio: 20 / 23;
  border-radius: var(--radius-xl);
  align-self: stretch;
  min-height: 0;
  order: 0;
}

/* Floating badge — centered horizontally on the image (bento variant) */
.showroom--bento .showroom__badge {
  bottom: 24px;
  left: 50%;
  right: auto;
  width: max-content;
  max-width: calc(100% - 48px);
  transform: translateX(-50%);
  animation-name: showroom-float-bento;
  background: rgba(249, 246, 244, 0.60);
}

@keyframes showroom-float-bento {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-8px); }
}

/* === Tablet (≤1024px) — image above 2x2 card grid === */
@media (max-width: 1024px) {
  .showroom--bento .showroom__header {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }
  .showroom--bento .showroom__label { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .showroom--bento .showroom__heading { grid-column: 1; grid-row: 2; font-size: 36px; }
  .showroom--bento .showroom__subheading { grid-column: 1; grid-row: 3; justify-self: start; max-width: 560px; font-size: 16px; }

  .showroom--bento .showroom__layout {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .showroom--bento .showroom__image-wrapper {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
    order: -1;
    margin-bottom: 4px;
  }
  .showroom--bento .showroom__cards {
    grid-template-rows: auto;
    gap: 20px;
  }
}

/* === Mobile (≤768px) — single column === */
@media (max-width: 768px) {
  .showroom--bento .showroom__header { margin-bottom: 32px; }
  .showroom--bento .showroom__heading { font-size: 32px; }
  /* Telefon: tekst wiekszy niz na tablecie (16 → 17px).
     `text-align: justify` bylo tu przez v71 i ZOSTALO COFNIETE (v72) razem
     z blizniaczym przypadkiem w why-us.css v70, ktory klient odrzucil ze
     zrzutu („dlaczego sa takie wielkie przerwy"). Na waskiej kolumnie
     mobilnej justowanie rozstrzeliwuje spacje o kilkadziesiat px w liniach,
     ktorym duzo brakuje do pelnej szerokosci. Nie przywracaj go. */
  .showroom--bento .showroom__subheading { font-size: 17px; }

  .showroom--bento .showroom__layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .showroom--bento .showroom__image-wrapper {
    grid-column: 1;
    aspect-ratio: 5 / 4;
  }

  /* Telefon: plakietka przestaje byc wysrodkowanym pudelkiem o szerokosci
     tresci (`left: 50%` + `translateX(-50%)` + `width: max-content` z reguly
     bazowej bento) i jest rozpieta miedzy krawedziami zdjecia z rownym luzem
     16px. Blok bazowy `.showroom__badge` w tym samym media query tego NIE
     zalatwia — ma (0,1,0), a regula bento (0,2,0) lezy wyzej w zrodle i
     wygrywa. Zmiana `animation-name` jest KONIECZNA: `showroom-float-bento`
     ma w kazdej klatce `translateX(-50%)`, wiec zostawiony przesunalby
     plakietke o pol szerokosci w lewo, kasujac cale rozpiecie. */
  .showroom--bento .showroom__badge {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    transform: none;
    animation-name: showroom-float;
  }
  .showroom--bento .showroom__card {
    padding: 28px 26px;
  }
  /* Podloga odstepu pod ikona rowna paddingowi karty — tu 28px, nie 36px
     jak w bazie (patrz komentarz przy regule bazowej). */
  .showroom--bento .showroom__card-title { font-size: 18px; margin-top: 28px; }
}

/* =============================================
   BENTO — KASKADA WEJSCIA (hero.html)
   Sekcja nie wjezdza juz jednym fade'em calego kontenera — wchodzi
   element po elemencie, w kolejnosci wskazanej przez klienta:
     1. label            („// Nasz salon")
     2. heading + subheading RAZEM (stoja w tym samym rzedzie naglowka,
        wiec osobne wejscie wygladaloby jak blad)
     3. 1. karta z lewej + zdjecie + 1. karta z prawej (jeden rzad siatki)
     4. 2. karta z lewej + 2. karta z prawej

   Ruch jest przepisany 1:1 z wejscia hero na stronie glownej
   (`fadeInLeft` / `slideInRight` — 0.7s ease-out + 30px), tak jak w
   why-us.css v63 i services.css v37. NIE wracaj tu do `--reveal-ease`:
   to expo-out, ktory upycha ~90% drogi w pierwszych ~20% czasu i czyta
   sie jako szarpniecie, zwlaszcza na duzym zdjeciu.
   KIERUNKI (v64): naglowek i zdjecie jada Z DOLU, ale 4 karty wjezdzaja
   Z BOKOW — lewa kolumna z lewej, prawa z prawej (zyczenie klienta,
   dorysowane strzalkami na zrzucie). Zaden element nie startuje z
   ujemnym translateY (stala zasada klienta: nic nie wjezdza z gory).
   Poziomy ruch nie robi przewijania w bok, bo `.showroom` ma
   `overflow: hidden`.

   CO JEST NA CZASIE, A CO NA POZYCJI: na kaskadzie czasowej sa tylko
   label, heading i subheading (gora sekcji, w kadrze w chwili startu).
   Karty i zdjecie czekaja na `.is-revealed` z modulu "Showroom Bento
   Reveal" w common.js — w chwili startu kaskady sa pod ekranem, wiec
   czasowe opoznienia wypalilyby sie poza kadrem (ta sama pulapka co
   why-us.css v64 i services.css v35).
   Rzedy odslaniaja sie razem, bo modul grupuje elementy po `top`.

   BRAMKA `.showroom--js-reveal` (v66): stany ukryte i odslaniajace sa
   zagniezdzone pod klasa, ktora dodaje modul w common.js. Bez modulu
   (blad sieci, wylaczony JS, zbuforowana stara wersja pliku) sekcja
   renderuje sie po prostu bez animacji, zamiast zostac na `opacity: 0`
   BEZ sladu w konsoli — dokladnie ta awaria zdarzyla sie realnie w
   "Nasz Montaż" (montage.css v53) i wymusila ten wzorzec takze w
   partners.css v32 i realizacje.css v28. Klasa jest w KAZDEJ regule tego
   bloku, nie tylko w stanach ukrytych: gdyby siedziala tylko tam,
   specyficznosc stanu ukrytego zrownalaby sie z odslaniajacym i o wyniku
   decydowalaby juz tylko kolejnosc w zrodle. Wszystkie reguly urosly
   wiec o jedna klase — punkt odniesienia to teraz (0,5,0) dla stanow
   ukrytych i (0,6,0) dla odslaniajacych.
   ============================================= */
.showroom--bento {
  /* Strojenie tempa: zmieniaj TYLKO te wartosci — opoznienia naglowka sa z
     nich policzone przez calc(). Rozsuwaniem zdjecia i kart zajmuje sie
     `eoStagger` w common.js i ono NIE czyta tych zmiennych. */
  --showroom-reveal-dur: 0.7s;
  --showroom-ease: ease-out;
  --showroom-step: 0.25s;
  --showroom-shift: 30px;
}

/* Kontener sam sie nie animuje — animuja sie jego dzieci. Regula ma (0,3,0),
   wiec przebija zbiorczy `.showroom__container.reveal-showroom` (0,2,0) —
   ten od 2026-07-22 nie obsluguje juz zadnej strony (stary wariant zniknal
   z HTML), ale zostaje jako reguła ogolna.

   UWAGA: ta jedna regula jest CELOWO POZA bramka `.showroom--js-reveal`.
   Gasi zbiorczy fade `.showroom__container.reveal-showroom` (0,2,0), ktory
   ustawia `opacity: 0` i czeka na `.visible` z JS. Gdyby byla zbramkowana,
   brak modulu oznaczalby, ze neutralizacja nie dziala, zbiorczy fade zostaje,
   `.visible` nigdy nie przychodzi — i CALA sekcja jest niewidoczna, czyli
   dokladnie ta awaria, ktorej bramka ma zapobiegac. Poza bramka: bez JS
   kontener jest po prostu widoczny, a dzieci (ich stany ukryte SA zbramkowane)
   renderuja sie bez animacji. */
.showroom--bento .showroom__container.reveal-showroom,
.showroom--bento .showroom__container.reveal-showroom.visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__label,
.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__heading,
.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__subheading,
.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__image-wrapper {
  opacity: 0;
  transform: translateY(var(--showroom-shift));
  transition: opacity var(--showroom-reveal-dur) var(--showroom-ease),
              transform var(--showroom-reveal-dur) var(--showroom-ease);
}

/* Kierunek wjazdu kart jest DZIEDZICZONA ZMIENNA, nie osobna regula na
   `:nth-child`. Gdyby kierunek siedzial we wlasnym selektorze, mialby
   wyzsza specyficznosc niz regula odslaniajaca `.is-revealed` (0,4,0)
   i karty zostalyby przesuniete NA ZAWSZE — dokladnie ta pulapka, ktora
   w why-us.css v61/v64 wymusila `:nth-child(n)` i potrojone klasy.
   Zmienna omija problem: stan ukryty i odsloniety to nadal po JEDNEJ
   regule o niezmienionej specyficznosci. */
.showroom--bento .showroom__layout > .showroom__cards:first-child {
  --showroom-x: calc(-1 * var(--showroom-shift));
}

.showroom--bento .showroom__layout > .showroom__cards:last-child {
  --showroom-x: var(--showroom-shift);
}

.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__card {
  opacity: 0;
  transform: translateX(var(--showroom-x, 0px));
  transition: opacity var(--showroom-reveal-dur) var(--showroom-ease),
              transform var(--showroom-reveal-dur) var(--showroom-ease);
}

/* ---- Naglowek: kaskada czasowa ---- */
.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom.visible .showroom__label,
.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom.visible .showroom__heading,
.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom.visible .showroom__subheading {
  opacity: 1;
  transform: translateY(0);
}

.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom.visible .showroom__label {
  transition-delay: 0s;
}

/* Heading i subheading RAZEM — jeden krok po labelu. */
.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom.visible .showroom__heading,
.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom.visible .showroom__subheading {
  transition-delay: var(--showroom-step);
}

/* ---- Zdjecie i karty: trigger pozycyjny ---- */
.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__image-wrapper.is-revealed,
.showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__card.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__label,
  .showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__heading,
  .showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__subheading,
  .showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__image-wrapper,
  .showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__card {
    transform: none;
    transition-delay: 0s;
  }

  /* Opoznienia naglowka siedza na regulach z `.visible` (0,5,0), wiec wpis
     wyzej (0,4,0) sam ich nie wyzeruje — potrzebna jest ta sama specyficznosc. */
  .showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom.visible .showroom__label,
  .showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom.visible .showroom__heading,
  .showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom.visible .showroom__subheading {
    transition-delay: 0s;
  }
}

/* ---- TELEFON: etykieta + naglowek wjezdzaja Z LEWEJ ----
   Wspolna regula calego serwisu (2026-08-03, base.css v142): na telefonie
   NAGLOWEK sekcji wchodzi Z BOKU, a TRESC (karty, zdjecia, listy) Z DOLU.
   Mieszanka jest zamierzona — klient poprosil, zeby ruch byl „i lewo/prawo,
   i z dolu", zamiast dotychczasowego przypadkowego rozklad kierunkow.
   Selektor jest KOPIA stanu ukrytego wyzej, wiec ma te sama specyficznosc i
   wygrywa kolejnoscia w zrodle; reguly odslaniajace maja o klase wiecej
   (`.visible` / `.is-revealed`), wiec dalej przebijaja obie.
   Warunek `no-preference` jest KONIECZNY: blok `prefers-reduced-motion` w tym
   pliku lezy WYZEJ, wiec bez niego ta regula by go przebila.
   Dystans idzie z tokenu sekcji (na telefonie 44px — base.css v142), a sekcja
   przycina poziomo, wiec wjazd nie robi przewijania w bok. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__label,
  .showroom--js-reveal.showroom--bento .showroom__container.reveal-showroom .showroom__heading {
    transform: translateX(calc(-1 * var(--showroom-shift)));
  }
}