/* ==========================================================================
   Истории учеников: карточки (библиотека /cases и карусель #b23 на лендинге)
   и попапы с полной историей (#popup:caseN). Обычная вёрстка вместо zero-блоков
   Tilda, но по их размерам: px макета 1200 (десктоп, ≥ 960px) и 320 (мобильный),
   масштаб — через --zoom (js/main.js), как у остальных блоков.
   ========================================================================== */

/* ---------------------------------------------------------------- карточка */
.story-card {
  display: flex;
  flex-direction: column;
  min-height: 570px;
  padding: 4px;                       /* + рамка 1px = фото с отступом 5px */
  border: 1px solid #303132;
  border-radius: 15px;
  background-color: #212326;
  color: #ffffff;
  font-family: var(--font);
}

.story-card__photo {
  position: relative;
  flex: none;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #2b2f33;
}
.story-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
/* затемнение фото (только в карусели лендинга) */
.story-card__dim {
  position: absolute;
  inset: 0;
  background-color: #0c0d0e;
  pointer-events: none;
}

.story-card__chips {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.story-card__chip {
  height: 20px;
  padding: 0 7px;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #f5f5f5;
  font-size: 10px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.story-card__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding: 20px 15px 15px;
}

.story-card__name {
  margin: 0;
  color: #ddd3b2;
  font-size: 18px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: -1px;
}
.story-card__handle {
  min-height: 12px;
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  opacity: .6;
  overflow-wrap: anywhere;
}

.story-card__label {
  margin: 0;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
}
.story-card__handle + .story-card__label { margin-top: 20px; }

.story-card__text {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.4px;
}
.story-card__before { margin-bottom: 20px; }

/* «После курса»: плашка над кнопкой, прижата к низу карточки */
.story-card__after {
  min-height: 103px;
  margin-top: auto;
  padding: 15px 10px 15px 15px;
  border-radius: 10px;
  background-color: #2b2f33;
}

.story-card__more {
  position: relative;
  display: block;
  flex: none;
  height: 54px;
  margin-top: 20px;
  padding: 14px 40px 14px 14px;      /* + рамка 1px = 15px */
  border: 1px solid #303132;
  border-radius: 10px;
  color: #ffffff;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
}
.story-card__more-text { display: block; max-width: 200px; }
.story-card__arrow {
  position: absolute;
  top: 21px;                          /* 22px от края кнопки, с учётом рамки */
  right: 14px;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

@media (max-width: 959px) {
  .story-card { min-height: 0; }
  .story-card__photo { height: 180px; }
  .story-card__name { font-size: 16px; line-height: 16px; }
  .story-card__handle { letter-spacing: -0.3px; }
  /* без ника блок «До курса» поднимается к имени (как в мобильном макете) */
  .story-card__handle--empty { display: none; }
  .story-card__label { letter-spacing: -0.3px; }
  .story-card__text { font-size: 10px; line-height: 12px; }
  .story-card__before { max-width: 240px; }
  .story-card__after { min-height: 0; padding-right: 15px; }
  .story-card__more { letter-spacing: -0.3px; }
  .story-card__more-text { max-width: 190px; }
}

/* ---------------------------------------------------------------- библиотека /cases */
.stories {
  background-color: #0c0d0e;
}
.stories__canvas {
  display: grid;
  grid-template-columns: repeat(3, 320px);
  gap: 20px;
  width: 1200px;
  margin: 0 auto;
  padding: 0 100px 100px;
  zoom: var(--zoom);
}

@media (max-width: 959px) {
  .stories__canvas {
    grid-template-columns: 300px;
    width: 320px;
    padding: 0 10px 60px;
  }
}

/* ---------------------------------------------------------------- карусель лендинга (#b23)
   Лента прокручивается по горизонтали; мышью её можно тянуть (js/drag-scroll.js
   работает с .ab[data-overflow="custom"]). */
.stories-strip.ab {
  display: block;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: #0c0d0e;
}
.stories-strip__track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 0 100px;
  zoom: var(--zoom);
}
.stories-strip__track .story-card { flex: 0 0 320px; }
/* «До тренинга» в карусели шире на 10px (заходит в правое поле карточки): в макете
   лендинга самый широкий такой блок — 290px, и тексты рассчитаны на него */
.stories-strip__track .story-card__before { margin-right: -10px; }

@media (max-width: 959px) {
  .stories-strip__track { gap: 10px; padding: 0 10px; }
  .stories-strip__track .story-card { flex-basis: 300px; }
  .stories-strip__track .story-card__before { margin-right: 0; }
}

/* ---------------------------------------------------------------- попап с полной историей
   Панель выезжает справа (на мобильных — снизу) — анимацию и закрытие даёт
   общая система попапов (.popup--zero, js/main.js). Клик мимо .el закрывает попап,
   поэтому панель помечена классом el. */
.story-popup .popup__bg { background-color: rgba(0, 0, 0, .6); }

.story-popup__canvas {
  display: flex;
  justify-content: flex-end;
  width: 1200px;
  min-height: calc(100vh / var(--zoom));
  margin: 0 auto;
  zoom: var(--zoom);
}

.story-popup__panel.el {
  position: relative;
  display: block;
  width: 600px;
  padding: 60px 65px 60px 40px;
  background-color: #212326;
  color: #ffffff;
  font-family: var(--font);
}

.story-popup__inner { position: relative; }

.story-popup__close {
  position: absolute;
  top: -40px;
  left: -90px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background-color: #434646;
}
.story-popup__close svg { display: block; width: 100%; height: 100%; }

.story-popup__name {
  margin: 0;
  color: #f5f5f5;
  font-size: 30px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -1.2px;
}

.story-popup__intro,
.story-popup__text {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.5px;
}
.story-popup__intro { max-width: 440px; margin-top: 20px; }

.story-popup__box {
  margin-top: 20px;
  padding: 19px;                      /* + рамка 1px = 20px */
  border: 1px solid #303132;
  border-radius: 10px;
}
.story-popup__points {
  display: grid;
  grid-template-columns: 205px 1px 205px;
  column-gap: 22px;
}
.story-popup__divider { background-color: #303132; }

.story-popup__title {
  margin: 0 0 10px;
  color: #ddd3b2;
  font-size: 18px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: -1px;
}

@media (max-width: 959px) {
  .story-popup__canvas {
    display: block;
    width: 320px;
    padding-top: 60px;
  }
  .story-popup__panel.el {
    width: calc(100vw / var(--zoom));
    min-height: calc(100vh / var(--zoom) - 60px);
    margin-left: calc(50% - 50vw / var(--zoom));
    padding: 23px 0 20px;
    border-radius: 15px 15px 0 0;
  }
  .story-popup__inner { width: 280px; margin: 0 auto; }
  .story-popup__close { top: -3px; right: 0; left: auto; width: 32px; height: 32px; }
  .story-popup__name { max-width: 184px; font-size: 26px; line-height: 26px; letter-spacing: -1.5px; }
  .story-popup__intro,
  .story-popup__text { font-size: 10px; line-height: 13px; letter-spacing: -0.4px; }
  .story-popup__intro { max-width: none; }
  .story-popup__box { padding: 14px; }
  .story-popup__points { grid-template-columns: 1fr; row-gap: 15px; }
  .story-popup__divider { height: 1px; }
  .story-popup__title { font-size: 16px; line-height: 16px; }
}