/* --- Scoped styles for the embedded slider --- */
#wsls{
  /* Переменные для плавности анимаций */
  --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-normal: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#wsls html, #wsls body{ scroll-snap-type: none; overscroll-behavior-y: contain; }
#wsls html, #wsls body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #f5f5f5;
}
#wsls /* Скрытие стандартного скроллбара */
html::-webkit-scrollbar, #wsls body::-webkit-scrollbar{
  width: 0;
  height: 0;
  background: transparent;
}
#wsls html::-webkit-scrollbar-track, #wsls body::-webkit-scrollbar-track{
  background: transparent;
}
#wsls html::-webkit-scrollbar-thumb, #wsls body::-webkit-scrollbar-thumb{
  background: transparent;
}
#wsls /* Для Firefox */
html{
  scrollbar-width: none;
}
#wsls body{
  scrollbar-width: none;
}
#wsls /* Для IE и Edge */
html{
  -ms-overflow-style: none;
}
#wsls body{
  -ms-overflow-style: none;
}
#wsls > p, #wsls h1, #wsls h2, #wsls h3, #wsls h4, #wsls h5, #wsls h6, #wsls span, #wsls a, #wsls li{
  color: black;
}
#wsls .main-container{
  height: auto;
  min-height: calc(100 * var(--oor-vh));
  overflow: visible;
  position: relative;
}
#wsls /* Общие секции */
.intro, #wsls .after{
  min-height: 1500px;
  padding: 4rem 2rem;
  background: #e7efff;
}
#wsls /* Слайдер */
.slider-section{
  overflow: hidden;
  position: relative;
}
#wsls .slider-section{ 
  height: calc(100 * var(--oor-vh)); 
  min-height: calc(100 * var(--oor-vh)); 
  transition: none;
}

/* На больших экранах >1920px слайдер сразу видимый */
@media (min-width: 1921px) {
  #wsls .slider-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
#wsls .slider-section > *:first-child{ margin-top: 0; }/* на случай collapsing margins */

/* Десктоп: слайдер остается на месте, но заполняет весь экран */
@media (min-width: 769px){
  #wsls .slider-section.slider-active {
    /* НЕ меняем position - остается relative */
    /* НЕ меняем top/left - остается на своем месте */
    width: 100% !important;
    height: calc(100 * var(--oor-vh)) !important;
    z-index: 1000 !important;
    /* Добавляем тень или границу для визуального выделения */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    /* Плавная анимация активации */
    transition: all var(--transition-slow);
  }
}
#wsls .slider{
  width: 100%;
  height: 100%;
  overflow: hidden; /* изменено с visible на hidden для корректного отображения */
  position: relative;
  display: flex;
  align-items: center;
  /* Разрешаем вертикальную прокрутку браузером поверх слайдера */
  touch-action: pan-y;
  padding-left: 600px; /* обеспечиваем видимость слайдов справа от колонки */
  padding-right: 200px; /* увеличиваем отступ справа чтобы последний слайд был виден полностью */
  z-index: 1; /* слайды под колонкой */
}
#wsls .slider-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 600px; /* минимальная ширина колонки */
  height: 100%;
  pointer-events: none; /* клик сквозь */
  display: flex;
  align-items: stretch;
  z-index: 2; /* колонка поверх слайдов */
}
#wsls .overlay-inner{
  width: 100%;
  display: grid;
  grid-template-rows: 1fr auto 1fr; /* верх, центр(svg), низ */
  align-items: center;
  justify-items: start; /* всё по левому краю */
}
#wsls .overlay-top{
  align-self: start;
  justify-self: start;
}
#wsls .overlay-center{ align-self: center; justify-self: start; }
#wsls .overlay-center svg{ display: block; }
#wsls .overlay-bottom{
  align-self: end;
  justify-self: start;
  pointer-events: auto; /* ссылка кликабельна, несмотря на наложение */
}
#wsls /* Мобильный заголовок и ссылка (видимы только на мобиле) */
.slider-heading, #wsls .slider-all-link{
  display: none;
}
#wsls .slider-track{
  position: relative;
  width: max-content;
  will-change: transform;
  /* Плавная анимация для трека */
  transition: transform var(--transition-fast);
}
#wsls .slider-wrapper{
  height: 100%;
  display: flex;
  align-items: center;
  gap: 100px;
  padding: 0 0; /* убираем 600px паддинг, теперь колонка наложением */
  /* Настройки для плавного драга */
  touch-action: pan-y; /* разрешаем только вертикальную прокрутку браузера */
  user-select: none; /* предотвращаем выделение текста */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: max-content;
  cursor: default; /* убираем grab по умолчанию */
  /* Плавные переходы для wrapper */
  transition: all var(--transition-fast);
  /* Drag-vs-click паттерн */
  user-select: none;
  touch-action: pan-y;
}
#wsls /* Добавляем правый отступ для последнего слайда, #wsls равный gap между слайдами */
.slider-wrapper .slide:last-child{
  margin-right: 100px;
}
#wsls .slide{
  width: 400px;
  height: auto;           /* высота по содержимому на десктопе */
  background: transparent;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Плавные переходы для слайдов */
  transition: all var(--transition-normal);
  transform-origin: center center;
  transform: translate3d(0,0,0);
}
#wsls .slide img{
  display: block;
  width: 100%;
  height: auto;          /* сохраняет пропорции на десктопе */
  object-fit: contain;
  aspect-ratio: 3 / 2;   /* запасной вариант до загрузки, чтобы не было узкой полосы */
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  /* Drag-vs-click паттерн - draggable="false" устанавливается в HTML */
}
#wsls /* Центрирование изображения внутри доступной высоты (пропорциональное масштабирование) */
.slide-media{
  width: min(380px, 100%);
  aspect-ratio: 3 / 4; /* контейнер 3:4 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px; /* отступ снизу для Artist name */
}

/* Стили для slide-media как ссылки */
a.slide-media {
  color: inherit;
  text-decoration: none;
  display: block;
}

a.slide-media:hover {
  color: inherit;
  text-decoration: none;
}

/* Отключаем кастомный курсор в секции слайдера для корректной работы drag */
#wsls .slide-media.text-cuberto-cursor-2 {
  pointer-events: auto; /* Включаем pointer-events для drag-vs-click */
}

/* Для десктопа: отключаем кастомный курсор в секции слайдера */
@media (min-width: 769px) {
  #wsls .slide-media.text-cuberto-cursor-2 {
    cursor: default !important; /* Убираем кастомный курсор, используем default */
  }
}

/* Скрываем курсор на мобильных устройствах (только для других секций) */
@media (max-width: 768px) {
  /* Убираем это правило, так как оно мешает drag-vs-click */
}

/* Drag-vs-click паттерн - для всех разрешений */
/* Состояние драга */
#wsls .slider-wrapper.is-dragging {
  cursor: grabbing !important;
}

/* Курсор grab только во время драга */
#wsls .slider-wrapper.is-dragging img {
  cursor: grabbing !important;
}

/* Блокируем pointer-events для потомков ТОЛЬКО во время драга */
#wsls .slider-wrapper.is-dragging * {
  pointer-events: none;
}

/* Блокируем кастомный курсор во время драга */
#wsls .slider-wrapper.is-dragging .text-cuberto-cursor-2 {
  cursor: grabbing !important;
}

/* Изображения не должны перетаскиваться */
#wsls .slide img[draggable="false"] {
  -webkit-user-drag: none;
  user-select: none;
  cursor: pointer; /* курсор pointer только на изображениях */
}
#wsls .slide-media img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* изображения 3:4, как cover */
}
#wsls /* подписи к слайдам — десктоп */
.slide-meta-top, #wsls .slide-meta-bottom{
  text-align: left;
  width: 100%;
}
#wsls .slide-meta-top{ margin-bottom: 8px; }
#wsls .slide-meta-bottom{ margin-top: 8px; }
#wsls /* Десктоп: по умолчанию подписи скрыты */
.slide-meta-top, #wsls .slide-meta-bottom, #wsls .artist-name{
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 200ms ease;
}
#wsls /* Активный слайд: показываем подписи */
.slide.meta-active .slide-meta-top, #wsls .slide.meta-active .slide-meta-bottom, #wsls .slide.meta-active .artist-name{
  opacity: 1 !important;
  visibility: visible !important;
}
#wsls /* Плавное затухание предыдущего слайда */
.slide.meta-fading .slide-meta-top, #wsls .slide.meta-fading .slide-meta-bottom, #wsls .slide.meta-fading .artist-name{
  opacity: 0.3 !important;
  visibility: visible !important;
  transition: opacity 600ms ease-out !important;
}
#wsls /* Artist name под изображением */
.artist-name{
  text-align: left;
  width: 100%;
  display: block; /* гарантируем блочное отображение */
}
/* 🔧 Адаптация под мобильные */
@media (max-width: 768px){
  #wsls .slider-section {
    --mobile-slide-width: 82vw; /* ширина первого слайда < 100vw для видимого превью второго */
    --mobile-gap: 24px;         /* расстояние между слайдами и слева */
    height: calc(100 * var(--oor-vh));              /* фиксированная высота экрана */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px 0;
  }

  #wsls .slider-overlay { display: none; }
  #wsls .slider-heading { display: block; margin: 0 24px 32px 24px; }
  #wsls .slider-all-link { 
    display: inline-block; 
    margin: 32px 24px 0 24px; 
    text-transform: uppercase;
    align-content: center;
    position: relative;
    line-height: 24px;
  }
  
  #wsls .slider-all-link::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M11.7909 11.0826L13.6659 9.20837H2.125V8.50004H13.6659L11.7909 6.62579L12.2917 6.125L15.0216 8.85421L12.2917 11.5841L11.7909 11.0826Z' fill='black'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
  }

  #wsls .slider {
    height: auto;
    padding-left: 0; /* на мобильном не нужен отступ под колонку */
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  #wsls .slider-track {
    position: static;  /* позволяем треку занимать высоту по содержимому */
    height: auto;
  }

  #wsls .slider-wrapper {
    padding-left: var(--mobile-gap);  /* отступ слева = межслайдовому отступу */
    padding-right: 0;                 /* справа оставляем превью второго слайда */
    gap: 0; /* избегаем глюков gap при transform на iOS */
    /* Разрешаем и вертикальную, и горизонтальную прокрутку для touch событий */
    touch-action: pan-x pan-y;
    align-items: flex-start;          /* контент прижат к верху */
    height: auto;
  }

  #wsls .slide {
    height: auto;                     /* высота по содержимому */
    border-radius: 0;
    box-shadow: none;
    margin-right: var(--mobile-gap);
    background: transparent;          /* фон не нужен */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #wsls .slide img {
    width: 100%;
    height: auto;          /* сохраняем исходные пропорции, не обрезая изображение */
    object-fit: contain;
  }

  /* последний слайд без правого отступа */
  #wsls .slider-wrapper .slide:last-child {
    margin-right: 0;
  }

  /* подписи к слайдам */
  #wsls .slide-meta-top,
  #wsls .slide-meta-bottom {
    text-align: left;
    width: 100%;
  }

  #wsls .slide-meta-top { margin-bottom: 8px; }
  #wsls .slide-meta-bottom { margin-top: 8px; }

  /* Artist name на мобильных */
  #wsls .artist-name {
    text-align: left;
    width: 100%;
    display: block; /* гарантируем блочное отображение */
  }

  /* Мобильный — без изменений: подписи всегда видны */
  #wsls .slide-meta-top,
  #wsls .slide-meta-bottom,
  #wsls .artist-name {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Мобильные правки для очень маленьких экранов (460px и ниже) */
@media (max-width: 460px){
  #wsls .slider-section{
    height: auto !important;
    min-height: 0 !important;
    padding: 88px 0 !important;
  }
  #wsls .slider-heading { 
    display: block; 
    margin: 0 16px 24px 16px;
  }
  #wsls .slider-all-link { 
    display: inline-block; 
    margin: 24px 16px 0 16px; 
  }
  
  /* Awwwards-style мобильный слайдер. touch-action: pan-x pan-y — вертикальный скролл секции работает */
  #wsls .slider {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 32px 0 !important;
    touch-action: pan-x pan-y !important;
  }
  
  /* slider-track - контейнер */
  #wsls .slider-track {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    touch-action: pan-x pan-y !important;
  }
  
  /* slider-wrapper - flex контейнер, управляется через JS transform */
  #wsls .slider-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    will-change: transform !important;
    transform-origin: center center !important;
  }
  
  /* Слайды */
  #wsls .slide {
    flex-shrink: 0 !important;
    height: 420px !important;
    overflow: hidden !important;
    margin-right: 16px !important;
  }
  
  #wsls .slide:last-child {
    margin-right: 0 !important;
  }
  
  /* Изображения в слайдах - cover на всю площадь */
  #wsls .slide .slide-media {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
  }
  
  #wsls .slide .slide-media img,
  #wsls .slide .slide-media picture img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  #wsls .slide .slide-media picture {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  
  /* Имя артиста */
  #wsls .slide .artist-name {
    margin-top: 12px !important;
    font-size: 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Убираем margin-right из слайдов */
  #wsls .slider-wrapper .slide:last-child {
    margin-right: 0 !important;
  }
}
  
  /* Улучшенная визуальная обратная связь при свайпе */
  #wsls .slider-track:active .slide {
    transition: transform 0.05s ease-out;
  }
  
  /* slide-media должен занимать всю ширину слайда */
  #wsls .slide-media {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
  }
  
  /* Изображения внутри slide-media должны заполнять контейнер */
  #wsls .slide-media img,
  #wsls .slide-media picture,
  #wsls .slide-media picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Адаптивная ширина слайда - делаем меньше, чтобы был виден краешек следующего */
  /* Примерно 85% ширины экрана, чтобы показать ~15% следующего слайда */
  #wsls .slide {
    --slide-width: calc(85vw - 16px);
  }
  
  /* Для очень маленьких экранов делаем слайды чуть меньше для лучшего peek эффекта */
  @media (max-width: 360px) {
    #wsls .slide {
      --slide-width: calc(82vw - 16px);
    }
  }
}