/* Истории — лента по макету 67:29 и полноэкранный просмотрщик.
   Карточка 212×242, внутренняя 206×236, поля 3 под рамку-индикатор. */

.st { background: #fff; }
.st__in { max-width: var(--wrap); margin: 0 auto; padding: 80px var(--side); }

/* Лента прокручивается вбок: историй девять, в колонку 1440 влезает шесть.
   Прокрутка с прилипанием — та же, что в ленте отзывов на телефоне. */
.st__row {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.st__row::-webkit-scrollbar { display: none; }

.st__item { flex: 0 0 212px; scroll-snap-align: start; }

/* Кнопки листания. Лежат поверх краёв ленты, а не в боковом поле: поле
   (--side) сжимается на узком десктопе, и кнопка вылезла бы за колонку.
   По вертикали — центр карточки: .st__card 236 плюс 3+3 под рамку = 242.
   Скрипт снимает hidden, только если ленте есть куда прокручиваться, и
   гасит кнопку у самого края. */
.st__wrap { position: relative; }
.st__arw {
  position: absolute; top: 121px; transform: translateY(-50%);
  z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: background .15s ease, opacity .15s ease;
}
.st__arw:hover { background: var(--accent); color: #fff; }
.st__arw svg { display: block; }
.st__arw--prev { left: -8px; }
.st__arw--next { right: -8px; }
/* У края прокрутки кнопка не нужна: приглушаем и убираем из обхода клавишей,
   но место под ней держим — лента не должна дёргаться. */
.st__arw:disabled { opacity: 0; pointer-events: none; }

/* Рамка непросмотренной истории: 2 px акцентом, отступ 3, радиус 19.
   Просмотренные помечает скрипт — он же помнит их в браузере. */
/* Рамка рисуется внутренней тенью, а не border: в Figma обводка идёт внутрь
   контура, и border добавил бы 4 px к размеру карточки — 212×242 стало бы
   216×246, и вся лента поехала бы. */
.st__ring {
  display: block; padding: 3px; border-radius: 19px;
  box-shadow: inset 0 0 0 2px var(--accent);
  transition: box-shadow .15s ease;
}
.st__item.is-seen .st__ring { box-shadow: none; }
.st__item:hover .st__ring { box-shadow: inset 0 0 0 2px var(--accent-2); }

.st__card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 236px; padding: 14px; border-radius: 16px;
  /* Обложку присылает разметка (background-image в атрибуте style): имя файла
     считается из slug истории, и css про конкретные истории ничего не знает. */
  background-size: cover; background-position: center;
}

/* Цвет темы — background-color, а не сокращение background: сокращение сбросило
   бы background-image, и обложка держалась бы только на том, что встроенный
   стиль важнее файла стилей. */
.st__item--orange .st__card { background-color: var(--accent); }
.st__item--dark   .st__card { background-color: var(--bg-dark); }
.st__item--peach  .st__card { background-color: #FFE7D8; }
.st__item--grey   .st__card { background-color: #EAECF0; }

/* Подложка под подписью. Обложки генерируются, и низ кадра у них разный:
   у «этажа» и «кто платит» тёмный, у «приёмки» светлый. Подпись при этом
   белая или чёрная по теме и меняться не должна — значит читаемость даёт
   градиент, а не картинка. Сверху он прозрачный: силуэт крыши не трогает. */
.st__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent 55%);
}
.st__item--peach .st__card::after,
.st__item--grey  .st__card::after {
  background: linear-gradient(to top, rgba(255, 255, 255, .65), transparent 55%);
}

/* Крыша обрезается верхним краем карточки — в макете она выходит за него. */
.st__roof { position: absolute; top: -14px; left: 50%; margin-left: -60px; }
.st__roof svg { display: block; }
.st__item--peach .st__roof path,
.st__item--grey  .st__roof path { stroke: #fff; }

/* z-index поднимает подпись над градиентом: оба элемента позиционированы,
   и без него ::after как более поздний в дереве лёг бы поверх текста. */
.st__label { position: relative; z-index: 1; font-size: 15px; font-weight: 600; line-height: 19.5px; }
.st__item--orange .st__label,
.st__item--dark   .st__label { color: #fff; }
.st__item--peach  .st__label,
.st__item--grey   .st__label { color: var(--ink); }

/* Содержимое историй в потоке страницы. Скрипт его прячет, забрав текст
   в просмотрщик; без скрипта это обычный читаемый список. */
.st__data {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--side) 40px;
  display: flex; flex-direction: column; gap: 24px;
}
/* display в правиле выше перебивает встроенное поведение атрибута hidden,
   поэтому прятать приходится явно. Без этой строки скрипт выставляет hidden,
   а блок остаётся на экране — и текст историй дублирует ленту. */
.st__data[hidden] { display: none; }
.st__story h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.st__frame p { font-size: 16px; line-height: 25px; color: var(--ink-2); max-width: 80ch; }

/* ─── Просмотрщик ─────────────────────────────────────────────────────────
   Формат из соцсетей: полосы прогресса сверху, тап по правой половине —
   дальше, по левой — назад. */
.sv { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.sv[hidden] { display: none; }
.sv__bg { position: absolute; inset: 0; background: rgba(10,12,16,.92); }

.sv__box {
  position: relative; width: min(420px, 100vw); height: min(760px, 100dvh);
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 16px 20px 24px;
  background: var(--bg-dark); color: #fff;
}
.sv__box[data-theme="orange"] { background: var(--accent); }
.sv__box[data-theme="dark"]   { background: var(--bg-dark); }
.sv__box[data-theme="peach"]  { background: #FFE7D8; color: var(--ink); }
.sv__box[data-theme="grey"]   { background: #EAECF0; color: var(--ink); }

/* Полосы прогресса: по одной на кадр, заполняются за время показа. */
.sv__bars { display: flex; gap: 4px; }
.sv__bar { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.sv__box[data-theme="peach"] .sv__bar,
.sv__box[data-theme="grey"]  .sv__bar { background: rgba(17,17,17,.2); }
.sv__bar i { display: block; height: 100%; width: 0; background: currentColor; }
.sv__bar.is-done i { width: 100%; }
.sv__bar.is-now i { animation: svGrow var(--sv-dur, 6s) linear forwards; }
@keyframes svGrow { from { width: 0; } to { width: 100%; } }

.sv__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.sv__ttl { font-size: 17px; font-weight: 800; }
.sv__x { border: 0; background: transparent; padding: 4px; cursor: pointer; line-height: 0; }
.sv__box[data-theme="peach"] .sv__x path,
.sv__box[data-theme="grey"]  .sv__x path { stroke: var(--ink); }

.sv__body { flex: 1 1 auto; display: flex; align-items: center; }
.sv__body p { font-size: 22px; font-weight: 500; line-height: 32px; }

.sv__cta {
  position: relative; z-index: 2;
  display: block; margin-top: 16px; padding: 16px 24px; border-radius: var(--r-fld);
  background: #fff; color: var(--ink); text-align: center;
  font-size: 15px; font-weight: 600;
}
.sv__box[data-theme="peach"] .sv__cta,
.sv__box[data-theme="grey"]  .sv__cta { background: var(--accent); color: #fff; }
.sv__cta[hidden] { display: none; }

/* Половины экрана для перелистывания: под текстом, но над фоном. */
.sv__nav { position: absolute; top: 60px; bottom: 90px; width: 45%; border: 0; background: transparent; cursor: pointer; }
.sv__nav--prev { left: 0; }
.sv__nav--next { right: 0; }

@media (max-width: 760px) {
  .st__in { padding: 40px var(--side); }
  .st__row { padding-left: 0; }
  /* На телефоне лента листается пальцем — кнопки только мешали бы. */
  .st__arw { display: none; }
  .st__item { flex: 0 0 150px; }
  .st__card { height: 180px; padding: 12px; }
  .st__label { font-size: 13px; line-height: 17px; }
  .st__roof svg { width: 84px; height: 42px; }
  .st__roof { margin-left: -42px; top: -10px; }
  .st__data { padding: 0 var(--side) 32px; }

  .sv__box { width: 100vw; height: 100dvh; border-radius: 0; }
  .sv__body p { font-size: 19px; line-height: 28px; }
}

/* Уважаем настройку «меньше движения»: полоса не анимируется, кадр
   переключается только по нажатию. */
@media (prefers-reduced-motion: reduce) {
  .sv__bar.is-now i { animation: none; width: 100%; }
}