/* Афиша фото услуги в профиле (ui/service-hero.js, решение №231):
   большая карусель вместо прежней узкой строки-плашки — фото просит
   собой заметную высоту, а не квадрат размером с ноготь. Литералы
   цвета — только themes.css, здесь их нет ни одного. */

.hero {
  position: relative;
  height: 51.3cqw;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  touch-action: pan-y;
}

.hero__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform var(--base) var(--ease);
}

.hero__slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.hero__slide--blank {
  display: grid;
  place-items: center;
  color: var(--text-faint);
}

.hero__slide--blank .icon { width: var(--fs-2xl); height: var(--fs-2xl); }

.hero__more {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border: none;
  border-radius: 50%;
  background: var(--veil);
  color: var(--on-badge);
  cursor: pointer;
}

.hero__more .icon { width: var(--fs-md); height: var(--fs-md); }

.hero__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border: none;
  border-radius: 50%;
  background: var(--veil);
  color: var(--on-badge);
  cursor: pointer;
}

.hero__arrow--prev { left: var(--sp-3); }
.hero__arrow--next { right: var(--sp-3); }

.hero__arrow .icon { width: var(--fs-sm); height: var(--fs-sm); }

/* Тот же знак «вперёд», что у остальных переходов в продукте
   (`chevron`), развёрнут зеркально для «назад» — второй рисунок
   под то же самое не нужен. */
.hero__arrow--prev .icon { transform: rotate(180deg); }

/* Затемнение снизу: сплошная плашка под именем и точками, а не чистый
   градиент от края до края, — на светлом фото полупрозрачный край
   градиента у самого верха оставлял бы белую надпись почти без
   подложки. Плавно темнеет только верхняя треть, под сами точки
   и имя веиль уже стоит в полную силу. */
.hero__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4) var(--sp-3);
  background: linear-gradient(to top, var(--veil) 0%, var(--veil) 65%, transparent 100%);
}

.hero__dots {
  display: flex;
  gap: var(--sp-2);
}

.hero__dot {
  width: var(--sp-2);
  height: var(--sp-2);
  border-radius: 50%;
  background: var(--on-badge);
  opacity: .5;
  transition: opacity var(--fast) var(--ease);
}

.hero__dot.is-on { opacity: 1; }

.hero__name {
  margin: 0;
  max-width: 100%;
  color: var(--on-badge);
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -.01em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}