/* ==========================================================
   ps-carousel — мини-карусель фото внутри карточки команды
   Переиспользуемый блок для всех страниц package-step-v2-*
   Префикс .ps-carousel — изолирован, опирается на токены .ps-bright
   ========================================================== */

/* Контейнер карусели полностью заполняет фотозону карточки
   и НЕ меняет её размеры — слои абсолютны поверх .ps-bright__team-media */
.ps-bright .ps-carousel{
  position:absolute;
  inset:0;
  z-index:1;            /* база — фото */
}

/* --- Порядок наложения внутри фотозоны ---
   фото(1) < градиент(2) < бейджи/стикер(3) < точки(4)
   Поднимаем существующие элементы карточки над фото карусели. */
.ps-bright .ps-bright__team-media::after{z-index:2;}     /* читаемость бейджей */
.ps-bright .ps-bright__team-tags{z-index:3;}
.ps-bright .ps-bright__vip-badge{z-index:3;}
.ps-bright .ps-bright__team--selected .ps-bright__team-media::before{z-index:3;}

/* Слайды — стопкой, кроссфейд по opacity */
.ps-bright .ps-carousel__slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;     /* дублируем на случай отсутствия общего правила */
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease, transform .8s ease;
  will-change:opacity;
  /* main.css темы вешает pointer-events:none на <img> — перекрываем,
     иначе клик не доходит до лайтбокса (target оказывается на родителе) */
  pointer-events:auto;
  cursor:zoom-in;
}

/* Индикатор «play» поверх слайда, если это видео (poster карусели) */
.ps-bright .ps-carousel__slide[data-video-url]{ cursor:pointer; }
.ps-bright .ps-carousel__slide[data-video-url].is-active::after{
  /* Псевдо у <img> не работает, поэтому используем оверлей через js-карусель.
     Здесь оставлено как fallback для будущей замены img→wrapper. */
}
.ps-bright .ps-carousel__video-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;pointer-events:none;
  width:54px;height:54px;border-radius:50%;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:0 8px 28px -8px rgba(0,0,0,.5);
  transition:transform .2s ease, background .2s ease;
}
.ps-bright .ps-carousel:hover .ps-carousel__video-badge{
  transform:translate(-50%,-50%) scale(1.08);
  background:rgba(0,0,0,.7);
}
.ps-bright .ps-carousel__video-badge svg{width:22px;height:22px;}
.ps-bright .ps-carousel__slide.is-active{
  opacity:1;
  visibility:visible;
}

/* Точки-переключатели — поверх фото, снизу по центру.
   z-index выше градиента ::after (он без z-index -> над статикой,
   поэтому поднимаем точки явно над ним) */
.ps-bright .ps-carousel__dots{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  z-index:4;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  padding:0 12px;
  pointer-events:none;  /* сам контейнер прозрачен для кликов */
}
.ps-bright .ps-carousel__dots .ps-carousel__dot{
  pointer-events:auto;  /* кнопки кликабельны */
}

/* Одна точка */
.ps-carousel__dot{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:8px;
  height:8px;
  padding:0;
  border:none;
  border-radius:50%;
  cursor:pointer;
  background:rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(31,20,10,.45), inset 0 0 0 1px rgba(255,255,255,.35);
  transition:background .2s ease, transform .2s ease, width .2s ease;
}
.ps-carousel__dot:hover{
  background:rgba(255,255,255,.85);
}
.ps-carousel__dot.is-active{
  background:var(--ps-orange,#ff6a1a);
  width:18px;            /* активная — «пилюля» в фирменном оранжевом */
  border-radius:999px;
  box-shadow:0 2px 6px -1px rgba(229,74,0,.6), inset 0 0 0 1px rgba(255,255,255,.4);
}
/* Доступный фокус с клавиатуры */
.ps-carousel__dot:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* --- Стрелки навигации --- */
.ps-carousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  cursor:pointer;
  background:rgba(255,255,255,.82);
  color:var(--ps-ink,#1f140a);
  box-shadow:0 4px 12px -4px rgba(31,20,10,.5), inset 0 0 0 1px rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}
.ps-carousel__arrow--prev{left:10px;}
.ps-carousel__arrow--next{right:10px;}
.ps-carousel__arrow svg{width:18px;height:18px;}
.ps-carousel__arrow:hover{background:#fff;color:var(--ps-orange-deep,#e54a00);}
.ps-carousel__arrow:active{transform:translateY(-50%) scale(.9);}
.ps-carousel__arrow:focus-visible{
  opacity:1;
  outline:2px solid var(--ps-orange,#ff6a1a);
  outline-offset:2px;
}

/* На десктопе (есть hover + точный курсор) стрелки видимы, ярче при наведении */
@media (hover:hover) and (pointer:fine){
  .ps-carousel__arrow{opacity:.9;}
  .ps-bright__team:hover .ps-carousel__arrow{opacity:1;}
}
/* На мобильных стрелки скрыты — навигация свайпом (точки остаются) */
@media (max-width: 720px){
  .ps-carousel__arrow{display:none;}
}

/* Не даём браузеру перетаскивать картинку вместо обработки свайпа */
.ps-bright .ps-carousel__slide{
  -webkit-user-drag:none;
  -khtml-user-drag:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* Если у карточки всего одно фото — нет ни точек, ни стрелок */
.ps-carousel--single .ps-carousel__dots,
.ps-carousel--single .ps-carousel__arrow{display:none;}

/* На узких экранах точки чуть крупнее для удобства тапа */
@media (max-width: 720px){
  .ps-carousel__dot{width:9px;height:9px;}
  .ps-carousel__dot.is-active{width:20px;}
  .ps-bright .ps-carousel__dots{bottom:9px;}
}