/* =====================================================================
   Stories — кружки-группы + полноэкранный вьюер (референс goldapple.kz).
   Коверфлоу: активная карточка в центре, соседние выглядывают по бокам.
   Сегменты прогресса сверху, автопереключение кадров, клик/свайп, X.

   Карточка масштабируется пропорционально 9:16 от трёх ограничений:
   максимум по высоте, максимум по ширине экрана и потолок 823px.
   Все внутренние отступы и шрифты считаются от --story-w.
   ===================================================================== */

/* --- Ряд кружков --- */
.stories { position: relative; z-index: 0; padding: 60px 0 58px 0; 
/*  background: var(--page-bg); */
}
.stories__row { display: flex; justify-content: center; gap: 30px; flex-wrap: nowrap; max-width: 610px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; padding: 10px 10px; }
.stories__row::-webkit-scrollbar { display: none; }

.story-circle { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 94px; padding: 0; transition: transform .2s ease; }
.story-circle:hover { transform: scale(1.05); }
.story-circle__ring {
  display: flex; align-items: center; justify-content: center; padding: 7px;
  position: relative; align-self: stretch; width: 100%; flex: 0 0 auto;
  border-radius: 59px; border: none;
}
.story-circle__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: 59px;
  background: linear-gradient(180deg, rgba(193, 23, 158, 1) 0%, rgba(255, 160, 55, 1) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}
.story-circle__img {
  position: relative; width: 80px; height: 80px; border-radius: 50%;
  background-size: cover; background-position: center; z-index: 2;
}
.story-circle__label { font-size: 17px; font-weight: 400; line-height: 25.5px; color: #030303; font-family: "SF Pro Display", "SF UI Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; text-align: center; }

/* --- Скрытый источник данных --- */
.stories-data { display: none; }

/* --- Оверлей вьюера --- */
.stories-viewer { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.86); backdrop-filter: blur(6px); }
.stories-viewer[hidden] { display: none; }
.stories-viewer__stage { position: absolute; inset: 0; overflow: hidden; }

.stories-viewer__row {
  position: absolute; top: 50%; left: 50%;
  display: flex; gap: 6px; align-items: center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------
   Карточка группы = медиа-область 9:16 + полоса ссылки под ней.

   --story-maxw / --story-maxh — ограничители, их и надо менять в медиа.
   --story-h  — высота ТОЛЬКО медиа-области (в макете 823px).
   --cta-h    — высота полосы со ссылкой (в макете 48px).
   Полная высота карточки = --story-h + --cta-h (в макете 871px),
   поэтому в --story-h заложен делитель 1.0583 = 871 / 823.
   --------------------------------------------------------------------- */
.story-card {
  --story-maxw: 90vw;
  --story-maxh: 85vh;
  --story-h: min(823px, calc(var(--story-maxh) / 1.0583), calc(var(--story-maxw) * 16 / 9));
  --story-w: calc(var(--story-h) * 9 / 16);
  --cta-h: clamp(38px, calc(var(--story-h) * .0583), 48px);

  --body-pad: clamp(16px, calc(var(--story-w) * .069), 32px);
  --body-bottom: clamp(20px, calc(var(--story-w) * .0864), 40px);

  flex: 0 0 auto;
  width: var(--story-w);
  height: calc(var(--story-h) + var(--cta-h));

  /* карточка — только контейнер: ни фона, ни обрезки.
     Скругление, тень и клип живут на .story-card__media,
     иначе ссылка под видео была бы отрезана. */
  overflow: visible;
  position: relative;
  background: none;
  color: #fff;
  transform: scale(.8); opacity: .45;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
}
.story-card.is-active { transform: scale(1); opacity: 1; }

/* Если у кадра нет ссылки — полосу не резервируем, медиа занимает всё.
   Старые браузеры без :has() просто проигнорируют правило и оставят полосу. */
.story-card:not(:has(.story-card__cta)) {
  --cta-h: 0px;
  --story-h: min(823px, var(--story-maxh), calc(var(--story-maxw) * 16 / 9));
}

/* svh не скачет при показе/скрытии адресной строки — карточка не «дышит» */
@supports (height: 1svh) {
  .story-card { --story-maxh: 85svh; }
}

/* Медиа-фон кадра — само видео со скруглением; занимает всё, кроме
   нижней полосы, отведённой под ссылку */
.story-card__media {
  position: absolute; inset: 0 0 var(--cta-h) 0;
  border-radius: clamp(14px, calc(var(--story-w) * .052), 24px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  background: linear-gradient(160deg, #3a2a22, #17171b 70%);
  background-size: cover; background-position: center;
  display: grid; place-items: center; color: rgba(255,255,255,.35); font-size: 13px;
}
.story-card__media.has-video { background-color: #000; }

.story-card__video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Индикатор докачки ролика */
.story-card.is-buffering .story-card__media::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 32px; height: 32px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.85);
  border-radius: 50%;
  animation: storySpin .8s linear infinite;
  z-index: 4;
}
@keyframes storySpin { to { transform: rotate(360deg); } }

.story-card__scrim { 
  position: absolute; 
  inset: 0 0 var(--cta-h) 0; 
  border-radius: clamp(14px, calc(var(--story-w) * .052), 24px);
  pointer-events: none;
/*  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.75) 100%); */
}

/* Сегменты прогресса */
.story-card__segs {
  position: absolute;
  top: clamp(8px, calc(var(--story-w) * .026), 12px);
  left: clamp(8px, calc(var(--story-w) * .026), 12px);
  right: clamp(8px, calc(var(--story-w) * .026), 12px);
  display: flex; gap: 5px; z-index: 3;
}
.seg { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.32); overflow: hidden; }
.seg__fill { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.seg.is-done .seg__fill { width: 100%; }
.story-card.is-active .seg.is-current .seg__fill { animation: segFill var(--seg-dur, 5s) linear forwards; }
.stories-viewer.is-paused .story-card.is-active .seg.is-current .seg__fill { animation-play-state: paused; }
.story-card.is-buffering .seg.is-current .seg__fill { animation-play-state: paused; }
@keyframes segFill { from { width: 0; } to { width: 100%; } }

/* Шапка кадра: аватар + подпись */
.story-card__top {
  position: absolute;
  top: clamp(14px, calc(var(--story-w) * .056), 26px);
  left: clamp(14px, calc(var(--story-w) * .052), 24px);
  right: clamp(14px, calc(var(--story-w) * .052), 24px);
  display: flex; align-items: center; gap: 10px; z-index: 3;
}
.story-card__avatar {
  width: clamp(24px, calc(var(--story-w) * .069), 32px);
  height: clamp(24px, calc(var(--story-w) * .069), 32px);
  border-radius: 50%; background: #cfcfda; flex: none;
}
.story-card__label {
  font-size: clamp(13px, calc(var(--story-w) * .0367), 17px);
  font-weight: 400; line-height: 1.5; color: #fff;
  font-family: "SF Pro Display", "SF UI Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Контент кадра снизу (отсчёт от верхнего края полосы со ссылкой) */
.story-card__body {
  position: absolute;
  left: var(--body-pad);
  right: var(--body-pad);
  bottom: calc(var(--cta-h) + var(--body-bottom));
  z-index: 3; text-align: left;
}
.story-card__title {
  font-size: clamp(19px, calc(var(--story-w) * .069), 32px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  font-family: "SF Pro Display", "SF UI Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
.story-card__title .accent { color: #FF4002; }
.story-card__desc {
  margin-top: clamp(6px, calc(var(--story-w) * .026), 12px);
  font-size: clamp(13px, calc(var(--story-w) * .0346), 16px);
  line-height: 1.5; color: rgba(255,255,255,.85);
}
/* ---------------------------------------------------------------------
   Ссылка — ПОД видео, вне скруглённого блока, без заливки.
   Элемент лежит внутри .story-card__body, поэтому его отступы
   компенсируются отрицательными значениями.
   --------------------------------------------------------------------- */
.story-card__cta {
  position: absolute;
  left: calc(var(--body-pad) * -1);
  right: calc(var(--body-pad) * -1);
  bottom: calc((var(--cta-h) + var(--body-bottom)) * -1);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, calc(var(--story-w) * .024), 11px);

  height: var(--cta-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;

  font-family: "SF Pro Display", "SF UI Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(13px, calc(var(--story-w) * .0346), 16px);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  transition: color .2s ease;
}

/* стрелка красится currentColor, поэтому меняется вместе с текстом */
.story-card__cta::after {
  content: '';
  flex: none;
  width: clamp(16px, calc(var(--story-w) * .045), 21px);
  height: clamp(10px, calc(var(--story-w) * .028), 13px);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 13'%3E%3Cpath d='M0 6.5h19M14 1.5l5.5 5-5.5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 13'%3E%3Cpath d='M0 6.5h19M14 1.5l5.5 5-5.5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.story-card__cta:hover,
.story-card__cta:focus-visible { color: #FF4002; }

/* Управление */
.stories-viewer__close {
  position: absolute; top: 5px; right: 5px; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: #fff; font-size: 32px; line-height: 1;
}
.stories-viewer__close:hover {
  opacity: .7;
}
.stories-viewer__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1;
}
.stories-viewer__nav:hover { background: rgba(255,255,255,.26); }
.stories-viewer__nav--prev,
.stories-viewer__nav--next {
  display: none;
}
.stories-viewer__nav--prev { left: 24px; }
.stories-viewer__nav--next { right: 24px; }

@media (max-width: 768px) {
  .stories { padding: 24px 0 32px 0; }
  .stories__row {
    justify-content: center !important;
    gap: 16px;
    padding: 10px 16px;
    scroll-snap-type: x mandatory;
    max-width: 100%;
  }
  .story-circle {
    scroll-snap-align: start;
    width: 64px;
    gap: 6px;
  }
  .story-circle__ring { padding: 3px; }
  .story-circle__img { width: 56px; height: 56px; }
  .story-circle__label { font-size: 12px; line-height: 1.2; }
}

@media (max-width: 720px) {
  .stories-viewer__nav { display: none; }   /* на мобиле — свайп/тап */
  .story-card { --story-maxw: 88vw; --story-maxh: 88vh; }
  @supports (height: 1svh) {
    .story-card { --story-maxh: 88svh; }
  }
}

/* Низкие широкие экраны (ландшафт на телефоне) — упираемся в высоту */
@media (max-height: 560px) {
  .story-card { --story-maxh: 92vh; }
  @supports (height: 1svh) {
    .story-card { --story-maxh: 92svh; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .stories-viewer__row,
  .story-card { transition-duration: .01ms; }
}