/* Pure CSS slider — замена ThemePunch Revolution Slider (Stage 5 / slider_rework).
   Поддержка 1-10 слайдов, slider_speed 3..30s, fade transition, multi-instance, accessibility.
   Visual style (border, shadow, margin) перенесён из slider.css → совместимость с responsive.css. */

.tbj-rs-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f7f7f7;
  /* Визуальное наследие от .fullwidthbanner-container (старый slider.css) */
  border: 5px solid #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 1px #d9dadb;
  margin: 20px 0 0 0;
}

/* Совместимость с layout fullwidth (раньше из slider.css:341) */
#slider .fullwidth .tbj-rs-wrapper {
  margin: -24px 0 0 0;
}

/* Современные браузеры: aspect-ratio задаётся inline через style.
   Padding-top hack отключаем — оставляем только aspect-ratio. */
@supports (aspect-ratio: 1) {
  .tbj-rs-wrapper { padding-top: 0 !important; }
}

.tbj-rs-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  text-decoration: none;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  /* Длительности — в первую очередь через классы (см. .tbj-rs-dur-* / .tbj-rs-total-*).
     Если slider_speed нестандартный — fallback через CSS variables в style. */
  animation-duration: var(--tbj-total-dur, 27s);
  animation-delay: calc(var(--tbj-slide-dur, 9s) * var(--tbj-idx, 0));
}

.tbj-rs-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* Длительности через классы — для known slider_speed значений.
   Защита от теоретического стрипа Cloudflare custom-properties в inline style. */
.tbj-rs-dur-3   { --tbj-slide-dur: 3s; }
.tbj-rs-dur-5   { --tbj-slide-dur: 5s; }
.tbj-rs-dur-7   { --tbj-slide-dur: 7s; }
.tbj-rs-dur-9   { --tbj-slide-dur: 9s; }    /* default — текущее значение в БД */
.tbj-rs-dur-10  { --tbj-slide-dur: 10s; }
.tbj-rs-dur-12  { --tbj-slide-dur: 12s; }
.tbj-rs-dur-15  { --tbj-slide-dur: 15s; }
.tbj-rs-dur-20  { --tbj-slide-dur: 20s; }
.tbj-rs-dur-30  { --tbj-slide-dur: 30s; }

/* Total-dur и animation-name через классы — для known total */
.tbj-rs-total-1 .tbj-rs-slide  { opacity: 1; animation: none; }
.tbj-rs-total-2  .tbj-rs-slide { animation-name: tbj-rs-fade-2;  --tbj-total-dur: calc(var(--tbj-slide-dur, 9s) * 2);  }
.tbj-rs-total-3  .tbj-rs-slide { animation-name: tbj-rs-fade-3;  --tbj-total-dur: calc(var(--tbj-slide-dur, 9s) * 3);  }
.tbj-rs-total-4  .tbj-rs-slide { animation-name: tbj-rs-fade-4;  --tbj-total-dur: calc(var(--tbj-slide-dur, 9s) * 4);  }
.tbj-rs-total-5  .tbj-rs-slide { animation-name: tbj-rs-fade-5;  --tbj-total-dur: calc(var(--tbj-slide-dur, 9s) * 5);  }
.tbj-rs-total-6  .tbj-rs-slide { animation-name: tbj-rs-fade-6;  --tbj-total-dur: calc(var(--tbj-slide-dur, 9s) * 6);  }
.tbj-rs-total-7  .tbj-rs-slide { animation-name: tbj-rs-fade-7;  --tbj-total-dur: calc(var(--tbj-slide-dur, 9s) * 7);  }
.tbj-rs-total-8  .tbj-rs-slide { animation-name: tbj-rs-fade-8;  --tbj-total-dur: calc(var(--tbj-slide-dur, 9s) * 8);  }
.tbj-rs-total-9  .tbj-rs-slide { animation-name: tbj-rs-fade-9;  --tbj-total-dur: calc(var(--tbj-slide-dur, 9s) * 9);  }
.tbj-rs-total-10 .tbj-rs-slide { animation-name: tbj-rs-fade-10; --tbj-total-dur: calc(var(--tbj-slide-dur, 9s) * 10); }

/* @keyframes: слайд виден 1/total цикла. fade-in/out — для плавного переключения. */
@keyframes tbj-rs-fade-2  { 0%, 0.75% {opacity:0} 0.76%, 50%   {opacity:1} 50.75%, 100% {opacity:0} }
@keyframes tbj-rs-fade-3  { 0%, 0.50% {opacity:0} 0.51%, 33.3% {opacity:1} 34.0%,  100% {opacity:0} }
@keyframes tbj-rs-fade-4  { 0%, 0.40% {opacity:0} 0.41%, 25%   {opacity:1} 25.5%,  100% {opacity:0} }
@keyframes tbj-rs-fade-5  { 0%, 0.30% {opacity:0} 0.31%, 20%   {opacity:1} 20.5%,  100% {opacity:0} }
@keyframes tbj-rs-fade-6  { 0%, 0.25% {opacity:0} 0.26%, 16.6% {opacity:1} 17.0%,  100% {opacity:0} }
@keyframes tbj-rs-fade-7  { 0%, 0.20% {opacity:0} 0.21%, 14.2% {opacity:1} 14.7%,  100% {opacity:0} }
@keyframes tbj-rs-fade-8  { 0%, 0.20% {opacity:0} 0.21%, 12.5% {opacity:1} 13.0%,  100% {opacity:0} }
@keyframes tbj-rs-fade-9  { 0%, 0.15% {opacity:0} 0.16%, 11.1% {opacity:1} 11.6%,  100% {opacity:0} }
@keyframes tbj-rs-fade-10 { 0%, 0.15% {opacity:0} 0.16%, 10%   {opacity:1} 10.5%,  100% {opacity:0} }

/* pause-on-hover (desktop only — на touch не сработает) */
@media (hover: hover) {
  .tbj-rs-wrapper:hover .tbj-rs-slide { animation-play-state: paused; }
}

/* accessibility: пользователи с reduced-motion видят только 1-й слайд */
@media (prefers-reduced-motion: reduce) {
  .tbj-rs-slide { animation: none; opacity: 0; }
  .tbj-rs-slide[data-idx="0"] { opacity: 1; }
}

/* Captions fallback — если админ когда-то добавит layered text, рендерим статически без анимаций */
.tbj-rs-caption {
  position: absolute;
  pointer-events: none;
}