/* Rubicello Slider — style slidera (frontend) */
.rbs{
  --rbs-h: clamp(460px, 74vh, 780px);   /* wysokość slidera */
  --rbs-accent: #74161b;                /* bordo Rubicello */
  --rbs-accent-hover: #8e1d23;
  --rbs-dark: #2a1517;                  /* kolor ciemnych napisów */
  --rbs-cream: 250,246,241;             /* rozjaśnienie (RGB) */
  --rbs-shade: 20,9,10;                 /* przyciemnienie (RGB) */
  --rbs-container: 1280px;              /* szerokość treści — dopasuj do kontenera strony */
  --rbs-pad: clamp(20px, 5vw, 64px);    /* margines boczny treści */
  --rbs-ui-space: clamp(70px, 10vh, 100px); /* miejsce na nawigację pod treścią */
  position: relative;
  width: 100%;
  height: var(--rbs-height, var(--rbs-h)); /* --rbs-height ustawia się w Slider → Ustawienia */
  overflow: hidden;
  background: #1a0d0e;
  color: #fff;
  isolation: isolate;
  touch-action: pan-y;
  /* Jeśli slider siedzi w wąskim kontenerze i nie da się go ustawić na pełną szerokość,
     odkomentuj 2 linie poniżej:
  width: 100vw;
  margin-left: calc(50% - 50vw); */
}
.rbs *, .rbs *::before, .rbs *::after{ box-sizing: border-box; }

.rbs__track{ position:absolute; inset:0; }

.rbs__slide{
  position:absolute; inset:0;
  overflow:hidden;
  transform:translateX(100%);
  will-change:transform;
}
.rbs__slide.is-active{ transform:translateX(0); }

/* warstwa tła (przesuwana wolniej = paralaksa) */
.rbs__bg{ position:absolute; inset:0; will-change:transform; }
.rbs__img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.14);
}
.rbs__slide.is-zoom .rbs__img{
  transform:scale(1.03);
  transition:transform 9s cubic-bezier(.25,.46,.45,.94);
}

/* przyciemnienie pod napisy */
.rbs__slide::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(var(--rbs-shade),.84) 0%, rgba(var(--rbs-shade),.6) 42%, rgba(var(--rbs-shade),.28) 100%),
    linear-gradient(0deg, rgba(var(--rbs-shade),.6) 0%, rgba(var(--rbs-shade),0) 38%);
}

.rbs__content{
  position:relative; z-index:2;
  height:100%;
  max-width:var(--rbs-container);
  margin:0 auto;
  padding:0 var(--rbs-pad) var(--rbs-ui-space);
  display:flex; flex-direction:column; justify-content:center;
}
.rbs__inner{ max-width:660px; }

/* ---------- typografia ---------- */
.rbs .rbs__eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:13px; line-height:1.3;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
  margin:0 0 1.2em;
}
.rbs .rbs__eyebrow::before{
  content:""; flex:0 0 28px; height:1px; background:currentColor; opacity:.8;
}
.rbs .rbs__title{
  font-family:inherit;
  font-size:clamp(28px, 4.1vw, 56px);
  line-height:1.1;
  font-weight:600;
  letter-spacing:-.01em;
  color:#fff;
  margin:0 0 .55em;
  text-wrap:balance;
}
.rbs .rbs__text{
  font-size:clamp(15px, 1.2vw, 18px);
  line-height:1.65;
  color:rgba(255,255,255,.88);
  margin:0 0 2em;
  max-width:580px;
}
.rbs .rbs__caption{
  display:flex; align-items:center; gap:14px;
  font-size:14px; line-height:1.5; letter-spacing:.02em;
  color:rgba(255,255,255,.92);
  margin:0;
  max-width:560px;
}
.rbs .rbs__caption::before{
  content:""; flex:0 0 32px; height:1px; background:currentColor; opacity:.75;
}

/* ---------- przyciski ---------- */
.rbs .rbs__btns{ display:flex; flex-wrap:wrap; gap:12px; }
.rbs .rbs__btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.95em 1.7em;
  background:var(--rbs-accent);
  border:1px solid var(--rbs-accent);
  color:#fff;
  font-size:15px; font-weight:600; line-height:1.2;
  text-decoration:none;
  border-radius:4px;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.rbs .rbs__btn:hover, .rbs .rbs__btn:focus-visible{
  background:var(--rbs-accent-hover); border-color:var(--rbs-accent-hover); color:#fff;
}
.rbs .rbs__btn--ghost{ background:transparent; border-color:rgba(255,255,255,.6); }
.rbs .rbs__btn--ghost:hover, .rbs .rbs__btn--ghost:focus-visible{
  background:#fff; border-color:#fff; color:var(--rbs-accent);
}

/* link na cały slajd */
.rbs__cover-link{ position:absolute; inset:0; z-index:2; -webkit-user-drag:none; }

/* ---------- animacja napisów — wolniejszy fade niż ruch tła ---------- */
.rbs__anim{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .45s ease, transform .45s ease;
}
.rbs__slide.is-shown .rbs__anim{
  opacity:1;
  transform:none;
  transition:opacity 1.3s ease, transform 1.5s cubic-bezier(.22,1,.36,1);
  transition-delay:550ms;
}
.rbs__slide.is-shown .rbs__anim:nth-child(2){ transition-delay:720ms; }
.rbs__slide.is-shown .rbs__anim:nth-child(3){ transition-delay:890ms; }
.rbs__slide.is-shown .rbs__anim:nth-child(4){ transition-delay:1060ms; }

/* =====================================================================
   RODZAJE SLAJDÓW
   ===================================================================== */

/* 2. Tekst na środku */
.rbs .rbs__slide--center .rbs__content{ align-items:center; text-align:center; }
.rbs .rbs__slide--center .rbs__inner{ max-width:820px; }
.rbs .rbs__slide--center .rbs__text{ margin-left:auto; margin-right:auto; }
.rbs .rbs__slide--center .rbs__btns,
.rbs .rbs__slide--center .rbs__eyebrow{ justify-content:center; }
.rbs .rbs__slide--center::after{
  background:radial-gradient(ellipse 70% 80% at 50% 50%, rgba(var(--rbs-shade),.78) 0%, rgba(var(--rbs-shade),.55) 60%, rgba(var(--rbs-shade),.6) 100%);
}

/* 3. Sam tytuł */
.rbs .rbs__slide--title .rbs__content{ align-items:center; text-align:center; }
.rbs .rbs__slide--title .rbs__inner{ max-width:1100px; }
.rbs .rbs__slide--title .rbs__title{
  font-size:clamp(38px, 6.6vw, 96px);
  line-height:1.02; font-weight:500; letter-spacing:-.02em; margin:0;
}
.rbs .rbs__slide--title .rbs__title::after{
  content:""; display:block;
  width:64px; height:2px; margin:.42em auto 0;
  background:currentColor; opacity:.7;
}
.rbs .rbs__slide--title::after{ background:rgba(var(--rbs-shade),.52); }

/* 4. Ciemne napisy na rozjaśnionym tle */
.rbs .rbs__slide--light::after{
  background:linear-gradient(90deg, rgba(var(--rbs-cream),.95) 0%, rgba(var(--rbs-cream),.82) 42%, rgba(var(--rbs-cream),.2) 100%);
}
.rbs .rbs__slide--light .rbs__title{ color:var(--rbs-dark); }
.rbs .rbs__slide--light .rbs__text{ color:rgba(42,21,23,.82); }
.rbs .rbs__slide--light .rbs__eyebrow,
.rbs .rbs__slide--light .rbs__caption{ color:var(--rbs-accent); }
.rbs .rbs__slide--light .rbs__btn--ghost{ color:var(--rbs-dark); border-color:rgba(42,21,23,.45); }
.rbs .rbs__slide--light .rbs__btn--ghost:hover{ background:var(--rbs-dark); border-color:var(--rbs-dark); color:#fff; }
.rbs .rbs__slide--light.rbs__slide--center::after{ background:rgba(var(--rbs-cream),.78); }

/* 5. Samo zdjęcie */
.rbs .rbs__slide--image::after{
  background:linear-gradient(0deg, rgba(var(--rbs-shade),.5) 0%, rgba(var(--rbs-shade),0) 26%);
}

/* 5b. Samo zdjęcie z przybliżaniem — odwrotny kierunek Ken Burns (czas z .is-zoom) */
.rbs .rbs__slide--zoom-in .rbs__img{ transform:scale(1.03); }
.rbs .rbs__slide--zoom-in.is-zoom .rbs__img{ transform:scale(1.14); }

/* 6. Mały podpis na dole */
.rbs .rbs__slide--caption::after{
  background:linear-gradient(0deg, rgba(var(--rbs-shade),.78) 0%, rgba(var(--rbs-shade),.3) 28%, rgba(var(--rbs-shade),0) 48%);
}
.rbs .rbs__slide--caption .rbs__content{ justify-content:flex-end; padding-bottom:calc(var(--rbs-ui-space) + 20px); }

/* 7. Tekst po prawej */
.rbs .rbs__slide--right .rbs__content{ align-items:flex-end; }
.rbs .rbs__slide--right .rbs__inner{ max-width:600px; }
.rbs .rbs__slide--right::after{
  background:
    linear-gradient(270deg, rgba(var(--rbs-shade),.86) 0%, rgba(var(--rbs-shade),.6) 45%, rgba(var(--rbs-shade),.2) 100%),
    linear-gradient(0deg, rgba(var(--rbs-shade),.55) 0%, rgba(var(--rbs-shade),0) 35%);
}

/* 8. Podział: panel + zdjęcie */
.rbs .rbs__slide--split{ background:var(--rbs-accent); }
.rbs .rbs__slide--split .rbs__bg{ left:46%; overflow:hidden; }   /* zdjęcie przycięte do swojego pola */
.rbs .rbs__slide--split::after{ display:none; }
.rbs .rbs__slide--split .rbs__bg::after{                              /* cień jedzie razem ze zdjęciem */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(var(--rbs-shade),.5) 0%, rgba(var(--rbs-shade),0) 30%);
}
.rbs .rbs__slide--split .rbs__content{
  max-width:none; width:46%; margin:0;
  padding-left:max(var(--rbs-pad), calc((100% - var(--rbs-container)) / 2 + var(--rbs-pad)));
  padding-right:clamp(24px, 4vw, 64px);
}
.rbs .rbs__slide--split .rbs__title{ font-size:clamp(28px, 3.4vw, 48px); }
.rbs .rbs__slide--split .rbs__btn{ background:#fff; border-color:#fff; color:var(--rbs-accent); }
.rbs .rbs__slide--split .rbs__btn:hover{ background:#f3e7e4; border-color:#f3e7e4; color:var(--rbs-accent); }

/* 9. Tekst w karcie */
.rbs .rbs__slide--boxed::after{
  background:
    linear-gradient(0deg, rgba(var(--rbs-shade),.5) 0%, rgba(var(--rbs-shade),0) 32%),
    rgba(var(--rbs-shade),.12);
}
.rbs .rbs__slide--boxed .rbs__inner{
  max-width:540px;
  padding:clamp(28px, 3.4vw, 52px);
  background:rgba(255,255,255,.96);
  border-radius:4px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.5);
  opacity:0;
  transition:opacity .45s ease;
}
.rbs .rbs__slide--boxed.is-shown .rbs__inner{ opacity:1; transition:opacity 1s ease .3s; }
.rbs .rbs__slide--boxed .rbs__title{ color:var(--rbs-dark); font-size:clamp(26px, 2.8vw, 40px); }
.rbs .rbs__slide--boxed .rbs__text{ color:rgba(42,21,23,.8); font-size:16px; margin-bottom:1.6em; }
.rbs .rbs__slide--boxed .rbs__eyebrow{ color:var(--rbs-accent); }
.rbs .rbs__slide--boxed .rbs__btn--ghost{ color:var(--rbs-dark); border-color:rgba(42,21,23,.45); }
.rbs .rbs__slide--boxed .rbs__btn--ghost:hover{ background:var(--rbs-dark); border-color:var(--rbs-dark); color:#fff; }

/* 10. Duży tytuł u dołu */
.rbs .rbs__slide--bottom::after{
  background:linear-gradient(0deg, rgba(var(--rbs-shade),.9) 0%, rgba(var(--rbs-shade),.55) 40%, rgba(var(--rbs-shade),.12) 78%);
}
.rbs .rbs__slide--bottom .rbs__content{ justify-content:flex-end; padding-bottom:calc(var(--rbs-ui-space) + 30px); }
.rbs .rbs__slide--bottom .rbs__inner{ max-width:920px; }
.rbs .rbs__slide--bottom .rbs__title{ font-size:clamp(34px, 5.4vw, 76px); line-height:1.03; letter-spacing:-.02em; margin-bottom:.45em; }

/* 11. Zdjęcie obok — w całości, bez Ken Burns */
.rbs .rbs__slide--side{ background:var(--rbs-side-bg, #f3ece5); }
.rbs .rbs__slide--side::after{ display:none; }
.rbs__media{
  position:absolute;
  top:clamp(28px, 7vh, 64px);
  bottom:var(--rbs-ui-space);
  left:52%;
  right:max(var(--rbs-pad), calc((100% - var(--rbs-container)) / 2 + var(--rbs-pad)));
  display:flex; align-items:center; justify-content:center;
}
.rbs .rbs__media img{
  display:block;
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  margin:0;
  border-radius:4px;
  box-shadow:0 30px 60px -28px rgba(42,21,23,.45);
}
.rbs .rbs__slide--side .rbs__inner{ width:44%; max-width:540px; }
.rbs .rbs__slide--side .rbs__title{ color:var(--rbs-dark); font-size:clamp(28px, 3.4vw, 48px); }
.rbs .rbs__slide--side .rbs__text{ color:rgba(42,21,23,.82); }
.rbs .rbs__slide--side .rbs__eyebrow{ color:var(--rbs-accent); }
.rbs .rbs__slide--side .rbs__btn--ghost{ color:var(--rbs-dark); border-color:rgba(42,21,23,.45); }
/* 11b. wersja na ciemnym tle */
.rbs .rbs__slide--side.rbs__slide--side-dark{ background:var(--rbs-side-bg, #241315); }
.rbs .rbs__slide--side.rbs__slide--side-dark .rbs__title{ color:#fff; }
.rbs .rbs__slide--side.rbs__slide--side-dark .rbs__text{ color:rgba(255,255,255,.86); }
.rbs .rbs__slide--side.rbs__slide--side-dark .rbs__eyebrow{ color:rgba(255,255,255,.8); }
.rbs .rbs__slide--side.rbs__slide--side-dark .rbs__btn--ghost{ color:#fff; border-color:rgba(255,255,255,.6); }
.rbs .rbs__slide--side-dark .rbs__media img{ box-shadow:0 30px 60px -24px rgba(0,0,0,.7); }

/* =====================================================================
   NAWIGACJA — część wspólna (+ styl „bars”)
   ===================================================================== */
.rbs__ui{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:flex-end;
  padding-bottom:clamp(18px, 4vh, 40px);
  color:#fff;
  pointer-events:none;
  transition:color .4s ease;
}
.rbs.rbs--ui-dark .rbs__ui{ color:var(--rbs-dark); }
.rbs__ui-inner{
  width:100%;
  max-width:var(--rbs-container);
  margin:0 auto;
  padding:0 var(--rbs-pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.rbs__dots, .rbs__nav{ display:flex; align-items:center; pointer-events:auto; }
.rbs__dots{ gap:8px; }
.rbs__nav{ gap:12px; }

.rbs button.rbs__dot,
.rbs button.rbs__arrow{
  -webkit-appearance:none; appearance:none;
  margin:0; padding:0; border:0; box-shadow:none;
  min-height:0; min-width:0;
  font:inherit; line-height:1; color:inherit;
  text-transform:none; letter-spacing:normal;
  cursor:pointer;
}
.rbs button.rbs__dot{
  position:relative;
  width:36px; height:28px;
  background:transparent;
}
.rbs button.rbs__dot::before,
.rbs .rbs__dot-fill{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:3px; margin-top:-1.5px;
  background:currentColor;
}
.rbs button.rbs__dot::before{ opacity:.3; transition:opacity .3s ease; }
.rbs button.rbs__dot:hover::before{ opacity:.6; }
.rbs .rbs__dot-fill{ transform:scaleX(0); transform-origin:left center; }
.rbs__dot-thumb, .rbs__dot-num, .rbs__dot-label{ display:none; }

.rbs__dot.is-active .rbs__dot-fill{
  animation:rbs-fill var(--rbs-delay, 6500ms) linear forwards;
}
.rbs.is-hover .rbs__dot.is-active .rbs__dot-fill,
.rbs.is-focus .rbs__dot.is-active .rbs__dot-fill,
.rbs.is-tab-hidden .rbs__dot.is-active .rbs__dot-fill{
  animation-play-state:paused;
}
.rbs.no-autoplay .rbs__dot.is-active .rbs__dot-fill{ animation:none; transform:none; }
@keyframes rbs-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes rbs-fill-y{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

.rbs__counter{
  font-size:14px; letter-spacing:.08em;
  margin-right:6px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.rbs__current{ font-weight:600; }
.rbs__sep, .rbs__total{ opacity:.65; }

.rbs button.rbs__arrow{
  width:48px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
  pointer-events:auto;
  transition:background-color .3s ease, border-color .3s ease, color .3s ease;
}
.rbs button.rbs__arrow:hover{ background:var(--rbs-accent); border-color:var(--rbs-accent); color:#fff; }
.rbs button:focus-visible, .rbs a:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
.rbs a.rbs__btn:focus-visible{ outline-color:#fff; }

/* ciemne strzałki na jasnych slajdach (włącza się automatycznie) */
.rbs.rbs--ui-dark button.rbs__arrow{
  color:var(--rbs-dark);
  background:rgba(255,255,255,.55);
  border-color:rgba(42,21,23,.35);
}
.rbs.rbs--ui-dark button.rbs__arrow:hover{ background:var(--rbs-accent); border-color:var(--rbs-accent); color:#fff; }

/* ---------- styl: dots ---------- */
.rbs.rbs--nav-dots{ --rbs-pad: clamp(20px, 8vw, 128px); }
.rbs.rbs--nav-dots .rbs__ui-inner{ justify-content:center; }
.rbs.rbs--nav-dots .rbs__counter{ display:none; }
.rbs.rbs--nav-dots .rbs__dots{ gap:2px; }
.rbs.rbs--nav-dots button.rbs__dot{ width:22px; height:22px; transition:width .5s cubic-bezier(.22,1,.36,1); }
.rbs.rbs--nav-dots button.rbs__dot.is-active{ width:46px; }
.rbs.rbs--nav-dots button.rbs__dot::before,
.rbs.rbs--nav-dots .rbs__dot-fill{ left:6px; right:6px; height:10px; margin-top:-5px; border-radius:5px; }
.rbs.rbs--nav-dots button.rbs__dot::before{ opacity:.45; }
.rbs.rbs--nav-dots button.rbs__dot:hover::before{ opacity:.8; }
.rbs.rbs--nav-dots button.rbs__arrow{
  position:absolute; top:50%;
  width:56px; height:56px; margin-top:-28px;
}
.rbs.rbs--nav-dots .rbs__arrow--prev{ left:clamp(12px, 2.2vw, 40px); }
.rbs.rbs--nav-dots .rbs__arrow--next{ right:clamp(12px, 2.2vw, 40px); }

/* ---------- styl: numbers ---------- */
.rbs.rbs--nav-numbers .rbs__counter{ display:none; }
.rbs.rbs--nav-numbers .rbs__dots{ gap:6px; }
.rbs.rbs--nav-numbers button.rbs__dot{ width:auto; height:auto; padding:8px 4px 12px; }
.rbs.rbs--nav-numbers .rbs__dot-num{
  display:block;
  font-size:14px; font-weight:600; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  opacity:.5; transition:opacity .3s ease;
}
.rbs.rbs--nav-numbers .rbs__dot:hover .rbs__dot-num,
.rbs.rbs--nav-numbers .rbs__dot.is-active .rbs__dot-num{ opacity:1; }
.rbs.rbs--nav-numbers button.rbs__dot::before,
.rbs.rbs--nav-numbers .rbs__dot-fill{ top:auto; bottom:0; height:2px; margin:0; left:4px; right:4px; }
.rbs.rbs--nav-numbers button.rbs__dot::before{ opacity:0; }
.rbs.rbs--nav-numbers button.rbs__dot.is-active::before{ opacity:.3; }

/* ---------- styl: tabs ---------- */
.rbs.rbs--nav-tabs{ --rbs-ui-space: clamp(120px, 16vh, 150px); }
.rbs.rbs--nav-tabs .rbs__nav{ display:none; }
.rbs.rbs--nav-tabs .rbs__dots{ flex:1; gap:0; align-items:stretch; min-width:0; }
.rbs.rbs--nav-tabs button.rbs__dot{
  flex:1 1 0; min-width:0;
  width:auto; height:auto;
  padding:16px 14px 2px 0;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  text-align:left;
}
.rbs.rbs--nav-tabs button.rbs__dot::before,
.rbs.rbs--nav-tabs .rbs__dot-fill{ top:0; margin:0; height:2px; right:14px; }
.rbs.rbs--nav-tabs .rbs__dot-num,
.rbs.rbs--nav-tabs .rbs__dot-label{
  display:block; max-width:100%;
  opacity:.6; transition:opacity .3s ease;
}
.rbs.rbs--nav-tabs .rbs__dot-num{ font-size:12px; font-weight:600; letter-spacing:.08em; }
.rbs.rbs--nav-tabs .rbs__dot-label{
  font-size:14px; font-weight:600; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rbs.rbs--nav-tabs .rbs__dot:hover .rbs__dot-num,
.rbs.rbs--nav-tabs .rbs__dot:hover .rbs__dot-label,
.rbs.rbs--nav-tabs .rbs__dot.is-active .rbs__dot-num,
.rbs.rbs--nav-tabs .rbs__dot.is-active .rbs__dot-label{ opacity:1; }

/* ---------- styl: thumbs ---------- */
.rbs.rbs--nav-thumbs{ --rbs-ui-space: clamp(100px, 14vh, 130px); }
.rbs.rbs--nav-thumbs .rbs__dots{ gap:8px; }
.rbs.rbs--nav-thumbs button.rbs__dot{ width:68px; height:auto; padding:0 0 9px; }
.rbs.rbs--nav-thumbs .rbs__dot-thumb{
  display:block;
  width:100%; height:44px;
  border-radius:3px;
  background-color:rgba(255,255,255,.15);
  background-size:cover; background-position:center;
  opacity:.5;
  transition:opacity .3s ease, transform .3s ease;
}
.rbs.rbs--nav-thumbs .rbs__dot:hover .rbs__dot-thumb{ opacity:.85; }
.rbs.rbs--nav-thumbs .rbs__dot.is-active .rbs__dot-thumb{ opacity:1; transform:translateY(-3px); }
.rbs.rbs--nav-thumbs button.rbs__dot::before,
.rbs.rbs--nav-thumbs .rbs__dot-fill{ top:auto; bottom:0; height:2px; margin:0; }

/* ---------- styl: vertical ---------- */
.rbs.rbs--nav-vertical{ --rbs-pad: clamp(20px, 7vw, 112px); }
.rbs.rbs--nav-vertical .rbs__ui-inner{ justify-content:flex-end; }
.rbs.rbs--nav-vertical .rbs__dots{
  position:absolute;
  right:clamp(14px, 2.6vw, 44px);
  top:50%; transform:translateY(-50%);
  flex-direction:column; gap:4px;
}
.rbs.rbs--nav-vertical button.rbs__dot{ width:24px; height:26px; }
.rbs.rbs--nav-vertical button.rbs__dot::before,
.rbs.rbs--nav-vertical .rbs__dot-fill{
  left:50%; right:auto; top:0; bottom:0;
  width:2px; height:auto; margin:0 0 0 -1px;
}
.rbs.rbs--nav-vertical .rbs__dot-fill{ transform:scaleY(0); transform-origin:center top; }
.rbs.rbs--nav-vertical .rbs__dot.is-active .rbs__dot-fill{ animation-name:rbs-fill-y; }

/* ---------- styl: line ---------- */
.rbs.rbs--nav-line .rbs__ui-inner{ justify-content:flex-end; }
.rbs.rbs--nav-line .rbs__dots{ position:absolute; left:0; right:0; bottom:0; gap:2px; align-items:flex-end; }
.rbs.rbs--nav-line button.rbs__dot{ flex:1 1 0; width:auto; height:16px; }
.rbs.rbs--nav-line button.rbs__dot::before,
.rbs.rbs--nav-line .rbs__dot-fill{ top:auto; bottom:0; height:4px; margin:0; transition:height .25s ease, opacity .3s ease; }
.rbs.rbs--nav-line button.rbs__dot:hover::before{ height:7px; }
.rbs.rbs--nav-line .rbs__counter{ font-size:30px; font-weight:300; letter-spacing:.02em; margin-right:16px; }
.rbs.rbs--nav-line .rbs__sep, .rbs.rbs--nav-line .rbs__total{ font-size:16px; }

/* =====================================================================
   MNIEJSZE EKRANY
   ===================================================================== */
@media (max-width: 1100px){
  .rbs.rbs--nav-thumbs button.rbs__dot{ width:50px; }
  .rbs.rbs--nav-thumbs .rbs__dot-thumb{ height:34px; }
  .rbs.rbs--nav-thumbs .rbs__dots{ gap:6px; }
}

@media (max-width: 767px){
  .rbs{ --rbs-h: clamp(500px, 84vh, 660px); --rbs-ui-space: 100px; height: var(--rbs-height-m, var(--rbs-height, var(--rbs-h))); }
  .rbs__slide::after{
    background:linear-gradient(0deg, rgba(var(--rbs-shade),.9) 0%, rgba(var(--rbs-shade),.62) 55%, rgba(var(--rbs-shade),.35) 100%);
  }
  .rbs__content{ justify-content:flex-end; }
  .rbs .rbs__eyebrow{ font-size:12px; letter-spacing:.12em; }
  .rbs__ui-inner{ gap:12px; }
  .rbs__counter{ display:none; }
  .rbs button.rbs__arrow{ width:42px; height:42px; }

  /* środek i sam tytuł zostają wyśrodkowane w pionie */
  .rbs .rbs__slide--center .rbs__content,
  .rbs .rbs__slide--title .rbs__content{ justify-content:center; }

  .rbs .rbs__slide--right .rbs__content{ align-items:stretch; }
  .rbs .rbs__slide--right::after{
    background:linear-gradient(0deg, rgba(var(--rbs-shade),.9) 0%, rgba(var(--rbs-shade),.62) 55%, rgba(var(--rbs-shade),.35) 100%);
  }
  .rbs .rbs__slide--light::after{
    background:linear-gradient(0deg, rgba(var(--rbs-cream),.97) 0%, rgba(var(--rbs-cream),.86) 55%, rgba(var(--rbs-cream),.45) 100%);
  }

  /* podział: zdjęcie na górze, panel na dole */
  .rbs .rbs__slide--split .rbs__bg{ left:0; bottom:58%; }
  .rbs .rbs__slide--split .rbs__bg::after{ display:none; }
  .rbs .rbs__slide--split .rbs__content{ width:100%; padding:0 var(--rbs-pad) var(--rbs-ui-space); }
  .rbs .rbs__slide--split .rbs__title,
  .rbs .rbs__slide--side .rbs__title{ font-size:26px; }
  .rbs .rbs__slide--split .rbs__text,
  .rbs .rbs__slide--side .rbs__text{
    font-size:14px; margin-bottom:1.4em;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* zdjęcie obok: zdjęcie na górze, tekst pod nim */
  .rbs__media{ top:20px; bottom:auto; height:38%; left:var(--rbs-pad); right:var(--rbs-pad); }
  .rbs .rbs__slide--side .rbs__inner{ width:auto; }

  .rbs .rbs__slide--boxed .rbs__inner{ padding:24px; }
  .rbs .rbs__slide--boxed .rbs__text{ font-size:15px; }

  /* style nawigacji na telefonie */
  .rbs.rbs--nav-bars button.rbs__dot{ width:14px; }
  .rbs.rbs--nav-bars .rbs__dots{ gap:5px; }

  .rbs.rbs--nav-dots button.rbs__arrow{ display:none; }
  .rbs.rbs--nav-dots button.rbs__dot{ width:18px; }
  .rbs.rbs--nav-dots button.rbs__dot.is-active{ width:36px; }
  .rbs.rbs--nav-dots button.rbs__dot::before,
  .rbs.rbs--nav-dots .rbs__dot-fill{ left:5px; right:5px; height:8px; margin-top:-4px; }

  .rbs.rbs--nav-numbers button.rbs__arrow{ display:none; }
  .rbs.rbs--nav-numbers .rbs__dots{ gap:0; flex-wrap:wrap; }
  .rbs.rbs--nav-numbers .rbs__dot-num{ font-size:12px; letter-spacing:0; }
  .rbs.rbs--nav-numbers button.rbs__dot{ padding:8px 5px 10px; }

  .rbs.rbs--nav-tabs{ --rbs-ui-space: 110px; }
  .rbs.rbs--nav-tabs .rbs__dot-label{ display:none; }
  .rbs.rbs--nav-tabs button.rbs__dot{ padding:12px 6px 2px 0; }
  .rbs.rbs--nav-tabs button.rbs__dot::before,
  .rbs.rbs--nav-tabs .rbs__dot-fill{ right:6px; }
  .rbs.rbs--nav-tabs .rbs__dot-num{ font-size:11px; letter-spacing:0; }

  .rbs.rbs--nav-thumbs{ --rbs-ui-space: 100px; }
  .rbs.rbs--nav-thumbs .rbs__dot-thumb{ display:none; }
  .rbs.rbs--nav-thumbs .rbs__dots{ gap:5px; }
  .rbs.rbs--nav-thumbs button.rbs__dot{ width:14px; height:28px; padding:0; }
  .rbs.rbs--nav-thumbs button.rbs__dot::before,
  .rbs.rbs--nav-thumbs .rbs__dot-fill{ top:50%; bottom:auto; height:3px; margin-top:-1.5px; }

  .rbs.rbs--nav-vertical .rbs__ui-inner{ justify-content:space-between; }
  .rbs.rbs--nav-vertical .rbs__dots{ position:static; transform:none; flex-direction:row; gap:5px; }
  .rbs.rbs--nav-vertical button.rbs__dot{ width:14px; height:28px; }
  .rbs.rbs--nav-vertical button.rbs__dot::before,
  .rbs.rbs--nav-vertical .rbs__dot-fill{ left:0; right:0; top:50%; bottom:auto; width:auto; height:3px; margin:-1.5px 0 0; }
  .rbs.rbs--nav-vertical .rbs__dot-fill{ transform:scaleX(0); transform-origin:left center; }
  .rbs.rbs--nav-vertical .rbs__dot.is-active .rbs__dot-fill{ animation-name:rbs-fill; }

  .rbs.rbs--nav-line .rbs__counter{ display:inline; font-size:24px; }
  .rbs.rbs--nav-line .rbs__sep, .rbs.rbs--nav-line .rbs__total{ font-size:14px; }
}

@media (prefers-reduced-motion: reduce){
  .rbs__anim{ transform:none !important; }
  .rbs__slide.is-zoom .rbs__img,
  .rbs .rbs__slide--zoom-in.is-zoom .rbs__img{ transition:none; transform:scale(1.03); }
}