/* stories.css — лента сторис: карточки с роликами и полноэкранный просмотр.
   Отдельным файлом, потому что блок живёт на двух страницах: на главной и на
   лендинге книги. Геометрия секции берётся из layout.css (.section-skz +
   .container-skz — тот же шелл, что и .wrap), поэтому разметка одинакова. */
/* Лента вертикальных роликов между каталогом и манифестом. Карточки крутят
   беззвучную петлю сами (stories.js), звук включается кнопкой на карточке,
   клик по кадру открывает ролик целиком на весь экран.
   Подписей под карточками нет — только видео (решение владельца 24.08.2026). */
/* Заголовок самодостаточен: блок живёт и на главной (там есть .h2), и на
   лендинге книги (там такого класса нет). */
.stories-head{text-align:center;margin:0 0 40px;
  font:800 clamp(26px,2.6vw,32px)/1.25 var(--skz-font-serif,Georgia,serif);
  color:var(--skz-text-light,#232E47);text-wrap:balance}
.stories-rail{position:relative}
.stories{display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:inline proximity;overscroll-behavior-inline:contain;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.stories::-webkit-scrollbar{display:none}
/* Четыре карточки занимают ряд целиком; пятая и дальше выглядывают справа
   и доезжают прокруткой — как только владелец добавит их в админке. */
.story{position:relative;flex:0 0 calc((100% - 72px) / 4);scroll-snap-align:start;
  aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:var(--endpaper);
  box-shadow:var(--shadow-mat)}
.story-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:pointer;-webkit-appearance:none;appearance:none}
.story-media{width:100%;height:100%;object-fit:cover;display:block}
.story-open:focus-visible{outline:2px solid var(--blue-core);outline-offset:-4px}
/* Кнопка звука — поверх кадра, как в сторис соцсетей: включить звук можно,
   не открывая полный экран. */
.story-sound{position:absolute;right:10px;bottom:10px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;padding:0;border:0;
  border-radius:50%;background:rgba(35,46,71,.55);cursor:pointer;
  transition:background .2s ease-out}
.story-sound:hover{background:rgba(35,46,71,.75)}
.story-sound__icon{width:18px;height:18px;display:block;
  background:currentColor;color:#FCF8EE;
  -webkit-mask:var(--icon-muted) center/contain no-repeat;mask:var(--icon-muted) center/contain no-repeat}
.story-sound[aria-pressed="true"] .story-sound__icon{
  -webkit-mask-image:var(--icon-sound);mask-image:var(--icon-sound)}
:root{
  --icon-muted:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5Z'/%3E%3Cpath d='m23 9-6 6M17 9l6 6'/%3E%3C/svg%3E");
  --icon-sound:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
}
/* Стрелки и точки появляются, только когда лента шире экрана (класс ставит stories.js) */
.stories-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);cursor:pointer;box-shadow:var(--shadow-mat);
  transition:border-color .2s ease-out}
.stories-arrow:hover{border-color:var(--brass-soft)}
.stories-arrow::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
  border-right:2px solid var(--brass);border-bottom:2px solid var(--brass)}
.stories-arrow--prev{left:-22px}
.stories-arrow--prev::before{transform:translate(-30%,-50%) rotate(135deg)}
.stories-arrow--next{right:-22px}
.stories-arrow--next::before{transform:translate(-70%,-50%) rotate(-45deg)}
.stories-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
/* hidden — это атрибут, а свой display его перебивает: без этих строк точки
   и стрелки видны даже когда листать нечего. */
.stories-dots[hidden],.stories-arrow[hidden]{display:none}
.stories-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:var(--line-deep);cursor:pointer;transition:background .2s ease-out}
.stories-dot[aria-current="true"]{background:var(--brass)}

/* Полноэкранный просмотр: ролик целиком со звуком, полоски прогресса сверху */
.story-viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
  margin:0;padding:0;border:0;background:#1A2133;overflow:hidden}
.story-viewer::backdrop{background:rgba(26,33,51,.92)}
.story-viewer__stage{position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center}
.story-viewer__video{max-width:100%;max-height:100%;width:auto;height:100%;
  object-fit:contain;display:block;background:#1A2133}
/* Запасной проигрыватель (в нём качается следующий ролик) не должен занимать
   место: hidden сам по себе слабее правила display:block выше. */
.story-viewer__video[hidden]{display:none}
.story-viewer__bars{position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;gap:4px;padding:12px}
.story-viewer__bar{flex:1;height:3px;border-radius:2px;background:rgba(252,248,238,.28);overflow:hidden}
.story-viewer__bar span{display:block;height:100%;width:0;background:#FCF8EE}
.story-viewer__bar--done span{width:100%}
.story-viewer__close,.story-viewer__nav{position:absolute;z-index:3;padding:0;border:0;
  background:rgba(252,248,238,.16);cursor:pointer;border-radius:50%}
.story-viewer__close{top:28px;right:16px;width:40px;height:40px}
.story-viewer__close::before,.story-viewer__close::after{content:"";position:absolute;
  top:50%;left:50%;width:16px;height:2px;background:#FCF8EE;transform-origin:center}
.story-viewer__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.story-viewer__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.story-viewer__nav{top:50%;transform:translateY(-50%);width:44px;height:44px}
.story-viewer__nav::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;
  border-right:2px solid #FCF8EE;border-bottom:2px solid #FCF8EE}
.story-viewer__nav--prev{left:16px}
.story-viewer__nav--prev::before{transform:translate(-30%,-50%) rotate(135deg)}
.story-viewer__nav--next{right:16px}
.story-viewer__nav--next::before{transform:translate(-70%,-50%) rotate(-45deg)}

@media (max-width:980px){
  /* Лента выходит в края экрана, а активная карточка стоит РОВНО ПО ЦЕНТРУ:
     боковые поля равны половине свободного места, поэтому и первый, и
     последний ролик встают посередине, а соседние выглядывают с обеих сторон
     и подсказывают, что ленту можно листать. */
  .stories{--story-w:62vw;margin:0 -20px;gap:12px;
    padding:0 calc((100vw - var(--story-w)) / 2) 4px;
    scroll-snap-type:inline mandatory}
  .story{flex-basis:var(--story-w);scroll-snap-align:center}
  .stories-arrow{display:none}
}
@media (max-width:640px){
  .stories-head{margin-bottom:28px}
  .stories{--story-w:72vw}
  .story-viewer__nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .stories{scroll-behavior:auto}
}

/* ── Первый экран целиком в сгибе телефона (25.08.2026) ─────────────────────
   Правка по замеру на живом iPhone 13: кнопка «Выбрать сказку» заканчивалась
   на 716-й точке документа, а Safari показывает не 844, а ~669 — экран минус
   строка состояния, адресная строка и нижняя панель. Прежний расчёт в этом
   файле («756 из 844») считал по паспортной высоте устройства и потому давал
   ложное «влезает»: паспортных 844 не видит никто.

   Считать высоту кадра долей ЭКРАНА, а не шириной. Единица svh — это высота
   видимой области при РАЗВЁРНУТЫХ панелях браузера, то есть худший случай;
   поэтому кадр, ограниченный 36svh, помещается в сгиб и когда панели видны,
   и когда пользователь их свернул прокруткой. Пропорция 4:3 остаётся потолком:
   на просторных экранах берётся она, на тесных — доля высоты, кадр обрезается
   по вертикали (object-fit:cover), лица и обложка остаются в кадре благодаря
   object-position:center 42%.

   Ограничено 640px (канон брейкпоинтов ДС), чтобы правило не трогало планшеты: там доля высоты
   вытянула бы кадр в узкую панораму, а места в сгибе и так хватает. */
/* Планшеты (641–980): та же арифметика мягче — кадр не выше 46% видимой
   высоты. При пропорции 4:3 кадр на 768 занимал 576 точек и уводил кнопку
   за сгиб; доля высоты возвращает её в экран, а снимок остаётся крупным. */
@media (max-width:980px){
  .hero-photo{max-height:46vh;max-height:46svh}
}
/* Тот же зазор «от искр» для планшетов. Число искр в ряду меняется с шириной
   (8 → 12 → 18), а с ним и выступ ряда, поэтому делитель у каждой ступени свой:
   выступ равен половине высоты искры, то есть 100vw / (2 × число искр). */
@media (min-width:641px) and (max-width:720px){
  .hero-photo-wrap{margin-bottom:calc(16px + 100vw / 24)}
}
@media (min-width:721px) and (max-width:980px){
  .hero-photo-wrap{margin-bottom:calc(16px + 100vw / 36)}
}
@media (max-width:640px){
  .hero-photo{max-height:32vh;max-height:32svh}
  /* Отступ ОТ ИСКР, а не от кромки кадра. Шов сдвинут вниз на половину своей
     высоты, а высота — доля ширины экрана (100vw / число искр в ряду), значит
     ряд выступает ниже снимка на 50vw/n и съедает зазор. Фиксированные 16px
     этот выступ не покрывали, и заголовок подлезал прямо под лучи. Формула
     держит одинаковый воздух на любой ширине: 16px чистого поля плюс тот
     самый выступ. Кадр ужат с 36 до 32svh, чтобы прибавка зазора не сдвинула
     кнопку за сгиб. */
  .hero-photo-wrap{margin-bottom:calc(16px + 100vw / 16)}
  .hero h1.hero-title--fixed{margin-bottom:12px}
  .hero .lead{margin-bottom:18px}
  .hero-copy .btn-pri{padding:15px 32px}
}
/* С 481px в ряду 12 искр вместо 8 — выступ вдвое меньше, зазор пересчитан. */
@media (min-width:481px) and (max-width:640px){
  .hero-photo-wrap{margin-bottom:calc(16px + 100vw / 24)}
}
/* Низкие экраны (iPhone SE и прочие 4,7″): видимая область ~567 точек — на 100
   меньше, чем у 13-го, и лид там разливается на пять строк вместо четырёх.
   Кадр ужимается до 28svh, лид до 15px, отступы — до минимума, при котором
   блоки ещё читаются как отдельные. Ниже опускаться нельзя: текст слипнется.
   Порог 620, а не 700: при 700 под правило попадал и iPhone 13 (видимых 669),
   кадр у него садился до 200 точек — снимок переставал быть аргументом. */
@media (max-width:640px) and (max-height:620px){
  /* Кадр обрезан сильнее, поэтому окно съезжает ниже (55% против 42%): иначе
     обложка книги сползает к нижней кромке и её накрывает искровый шов —
     фестоны режут название прямо по строке. */
  .hero-photo{max-height:25vh;max-height:25svh;object-position:center 55%}
  .hero-photo-wrap{margin-bottom:calc(10px + 100vw / 16)}
  .hero h1.hero-title--fixed{margin-bottom:8px}
  .hero .lead{font-size:15px;margin-bottom:12px}
}