/* Наши ученики: видеоотзывы. Макет: фреймы RZCmE (десктоп 1440x758) и
   kxCoO (телефон 390x1971). Разметка - su-video.tpl + su-video-item.tpl.

   Карточка по геометрии и поведению совпадает с hm-deti-item.tpl на
   главной (430/76/208/44/400 - дамп даёт те же числа), но это не повод
   звать чанк главной: hm-* - чужой файл, его нельзя трогать и на него
   нельзя завязываться (см. шапку su-video.tpl). Поэтому числа ниже
   списаны с дампа независимо, а техника (isolation/box-shadow для
   рамки наведения, скрытая по умолчанию раскрывающаяся плашка) та же,
   что в hm-deti.css - это свойство самого макета, не копия чужого
   файла. */

.su-video {
  background: var(--paper);
  padding-block: 100px; /* дамп RZCmE padding=[100,56] */
}

.su-video__wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section); /* 44 в дампе = токену */
}

.su-video__head {
  display: flex;
  flex-direction: column;
  gap: 14px; /* дамп vm2CP */
}

.su-video__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--kicker);  /* 12 */
  line-height: 15px;        /* 12 x 1.21 */
  letter-spacing: var(--kicker-ls);
  color: var(--magenta-text);
}

.su-video__h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--h2-sm);  /* 48 - дамп dA61d */
  line-height: 55px;        /* 48 x 1.14 */
  letter-spacing: var(--h2-sm-ls);
  color: var(--ink);
}

.su-video__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px; /* дамп d56zR */
}

/* ─── Карточка видеоотзыва ───────────────────────────────────── */

.su-video-item {
  position: relative;
  height: 430px; /* дамп gpRBK */
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate; /* фото уходит под всё остальное через z-index -1 */
  /* Тень появляется не скачком, а за то же время, что и обводка. */
  transition: box-shadow .26s ease;
}

/* Раскрытие - по наведению мышью и по переходу клавиатурой, но не по
   простому фокусу. Разница видна после просмотра записи: закрывая окно,
   сайт возвращает фокус на кнопку, с которой запись открыли, и при
   обычном :focus-within карточка так и оставалась раскрытой, пока не
   щёлкнешь мимо. :focus-visible браузер ставит только тогда, когда по
   странице идут с клавиатуры. */
.su-video-item:hover .su-video-item__ramka,
.su-video-item:focus-visible .su-video-item__ramka,
.su-video-item:has(:focus-visible) .su-video-item__ramka {
  opacity: 1;
}

/* Наведённая карточка в макете приподнята мягкой тенью, и сразу за краем
   лежит внешняя половина белой обводки. Замеры по дампу: цвет #16233D,
   прозрачность 27 процентов, смещение вниз 18, размытие 40, вынос 3.
   Первой тенью идёт белое кольцо - оно закрывает собой тот кусок
   размытия, который иначе лёг бы прямо под обводку. */
.su-video-item:hover,
.su-video-item:focus-visible,
.su-video-item:has(:focus-visible) {
  box-shadow: 0 0 0 3px var(--white), 0 18px 40px 3px #16233D45;
}

/* Белая рамка при наведении - отдельный слой поверх всего.
   Внутренней тенью самой карточки её рисовать нельзя: фотография лежит
   слоем ниже (z-index: -1), а по правилам отрисовки такой слой закрывает
   собой и фон карточки, и её внутреннюю тень. Рамка в стилях была, а на
   экране не показывалась ни разу. Этот слой лежит выше и фотографии, и
   плашки - как нарисовано в макете. Появляется плавно: резкий скачок
   рамки в начале выезда читается как рывок всего наведения. */
.su-video-item__ramka {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  /* Обводка в макете нарисована по самому краю карточки: 6 пикселей,
     из которых внутрь попадает ровно половина. Внешняя половина - белое
     кольцо на белой странице, его рисует тень самой карточки. */
  box-shadow: inset 0 0 0 3px var(--white);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease;
}

.su-video-item__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.su-video-item__time {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 3px;
  background: #16233DB3;
  color: var(--white);
  font: 700 11px/1 var(--font-body);
}

.su-video-item__time-icon {
  width: 12px;
  height: 12px;
  color: var(--sun);
}

.su-video-item__quote-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #16233DB3;
  color: var(--sun);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .26s ease, visibility .26s ease;
}

.su-video-item__quote-badge svg {
  width: 18px;
  height: 18px;
}

.su-video-item:hover .su-video-item__quote-badge,
.su-video-item:focus-visible .su-video-item__quote-badge,
.su-video-item:has(:focus-visible) .su-video-item__quote-badge {
  opacity: 0;
  visibility: hidden;
}

.su-video-item__name {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  line-height: 26px; /* 19 x 1.36 (метрика Manrope), в дампе не задана */
  letter-spacing: -0.3px;
  color: var(--white);
}

.su-video-item__expand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 208px; /* дамп KxGx3 */
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  /* В покое из-под края карточки торчит только верхняя полоса плашки, и
     её плотность должна быть такой же, как у прежней таблички с именем
     (дамп), а у поднятой плашки - своей (дамп). Поэтому не два слоя, а
     один с переходом по цвету. */
  background: #16233DD9;
  /* Плашка опущена ровно на свою нижнюю часть: 208 - 76 = 132. Видна
     только верхняя полоса, остальное уходит под край карточки (у
     карточки overflow: hidden). При наведении поднимается на место.

     Почему одна плашка, а не две. Прежде карточка держала табличку с
     именем и раскрытую плашку поверх неё, в обеих стояло одно имя; при
     наведении одна гасла, другая проявлялась, и одинаковый текст на миг
     оказывался на экране в двух местах. Глаз читает это как прыжок,
     сколько ни подбирай длительности. Теперь меняется только transform
     и цвет подложки: браузер сдвигает готовый слой, а не перерисовывает
     текст поверх фотографии. */
  transform: translateY(132px);
  /* Слой выделяется заранее: иначе браузер заводит его в первом кадре
     движения, и выезд начинается рывком. */
  will-change: transform;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1),
    background-color .3s ease;
}

.su-video-item:hover .su-video-item__expand,
.su-video-item:focus-visible .su-video-item__expand,
.su-video-item:has(:focus-visible) .su-video-item__expand {
  transform: translateY(0);
  background: #16233DF2;
}

.su-video-item__expand-text {
  /* Текст прижат к верху плашки и стоит на одном и том же месте у всех
     карточек, сколько бы строк ни заняла цитата: свёрнутый вид должен
     быть одинаковый, а в нём из плашки видно только имя. Отступ 19 даёт
     ровно то место, которое получалось выравниванием по середине у
     карточки из макета (дамп z574q). Кружок плей выравнивание по
     середине сохраняет - он в макете посередине плашки. */
  align-self: flex-start;
  margin-top: 19px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  min-width: 0;
}

/* Порядок на компьютере: имя, цитата, тема (дамп WwIFX). На телефоне
   порядок другой - тема, имя, цитата (дамп xd7xS) - переставлен ниже
   в media через flex order. */
.su-video-item__expand-text .su-video-item__name { order: 1; }

/* Имя проезжает не столько же, сколько плашка. В свёрнутом виде оно
   стоит посередине полосы 76 (дамп), в поднятом - первой строкой
   плашки (дамп), и между этими местами 120 точек, а плашка едет на 132.
   Разницу в 12 имя отыгрывает своим сдвигом, и ещё 2 точки вбок: у
   полосы отступ 20, у плашки 18. Это тоже transform, то есть тот же
   даровой сдвиг готового слоя, а не перерисовка. Едут оба слоя по
   одной кривой и за одно время, поэтому движение читается как одно. */
.su-video-item__expand-text .su-video-item__name {
  transform: translate(2px, -12px);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.su-video-item:hover .su-video-item__expand-text .su-video-item__name,
.su-video-item:focus-visible .su-video-item__expand-text .su-video-item__name,
.su-video-item:has(:focus-visible) .su-video-item__expand-text .su-video-item__name {
  transform: translate(0, 0);
}
.su-video-item__quote { order: 2; }
.su-video-item__tag { order: 3; }

.su-video-item__quote {
  margin: 0;
  /* Цитата умещается в три строки, лишнее подрезается многоточием.
     Высота плашки в макете постоянная (208), и на узких экранах
     карточка становится уже, цитата разворачивается на четыре-пять
     строк, и тема с кружком плей вылезали за нижний край карточки.
     Три строки сходятся при любой ширине. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 14px;
  line-height: 23px; /* 14 x 1.65 = 23,1 */
  font-style: italic;
  color: #FFFFFFD9;
}

.su-video-item__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px; /* дамп KH3uO: высота плашки 23 = 5+13+5 */
}

/* Слово-приставка перед темой - видно только на телефоне. На
   компьютере раскрытая плашка показывает только саму тему (дамп
   cKlpH: "MY PASSPORT" без приставки). */
.su-video-item__tag-prefix {
  display: none;
}

.su-video-item__play {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--magenta);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Кружок - span, пока у карточки не заполнена ссылка на запись, и
     тег <a> с той же разметкой, когда заполнена. Подчёркивание ссылки
     внутри нечего подчёркивать (там только значок), но правило стоит
     явно, чтобы вид кружка не зависел от тега. */
  text-decoration: none;
}

.su-video-item__play svg {
  width: 20px;
  height: 20px;
}

/* ─── Узкий настольный экран (861..1100) ─────────────────────── */

/* Между телефоном и макетной шириной четыре карточки в ряд становятся
   такими узкими, что имя переносится на две строки и плашка перестаёт
   сходиться по высоте. В этой полосе ширин ставим две карточки в ряд:
   на самих макетных ширинах (1440 и 390) ничего не меняется. */
@media (min-width: 861px) and (max-width: 1100px) {
  .su-video__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Телефон (<= 860) ───────────────────────────────────────── */

@media (max-width: 860px) {
  .su-video {
    padding-block: var(--section-y-m); /* 52 = токену */
  }

  .su-video__kicker {
    font-size: 11px;
    line-height: 13px; /* 11 x 1.21 */
  }

  .su-video__h2 {
    font-size: 30px;
    line-height: 34px; /* 30 x 1.14 = 34,2 */
    letter-spacing: -0.9px;
  }

  .su-video__grid {
    grid-template-columns: 1fr;
    gap: 16px; /* дамп UvhhW */
  }

  .su-video-item {
    height: 400px; /* дамп iYA0s */
    border-radius: 8px;
  }

  .su-video-item::before {
    /* Градиент-подложка под текстом - дамп GRPxr: 190..400 по высоте
       карточки, та же конструкция, что у hm-deti-item.css на главной. */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 210px;
    background: linear-gradient(90deg, #16233D00 0%, #16233DF0 100%);
    pointer-events: none;
  }

  .su-video-item__time {
    top: 20px;
    left: 20px;
    padding: 6px 10px;
    font-size: 12px; /* дамп y7ZPR */
  }

  .su-video-item__time-icon {
    display: none; /* дамп y7ZPR: на телефоне бейдж без иконки */
  }

  .su-video-item__quote-badge {
    display: none;
  }

  .su-video-item__expand {
    display: contents;
    opacity: 1;
    visibility: visible;
    /* Выезд - только для наведения на компьютере; тут плашка видна
       всегда, и сдвигать её не от чего. То же про имя: свой сдвиг ему
       нужен только ради свёрнутого вида, которого здесь нет. */
    transform: none;
  }

  .su-video-item__expand-text {
    /* Отступ сверху нужен только компьютеру - там он ставит имя на
       постоянное место в плашке. Здесь блок стоит по месту из макета. */
    margin-top: 0;
    position: absolute;
    top: 242px; /* дамп xd7xS */
    left: 20px;
    right: 20px;
    gap: 10px;
    opacity: 1;
    visibility: visible;
  }

  .su-video-item__expand-text .su-video-item__name { order: 2; }
  .su-video-item__quote { order: 3; }
  .su-video-item__tag { order: 1; }

  .su-video-item__expand-text .su-video-item__name {
    transform: none;
  }

  .su-video-item__name {
    font-size: 20px; /* дамп zIFJJ */
    letter-spacing: -0.4px;
    line-height: 1.2; /* дамп zIFJJ - множитель задан явно */
  }

  .su-video-item__quote {
    /* На телефоне плашки с постоянной высотой нет - цитата видна целиком. */
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    font-style: normal;
    line-height: 22px; /* дамп t8h2vZ: 14 x 1,55 = 21,7 */
    color: #FFFFFFCC;
  }

  .su-video-item__tag {
    background: #FFFFFF1F;
    /* Обводка по середине границы, размазанная на эталоне по двум
       строкам пикселей - две тени по полпикселя вместо inset 1px.
       Тот же приём, что в hm-deti.css/hm-hero.css/hm-okno.css. */
    box-shadow: 0 0 0 0.5px #FFFFFF4D, inset 0 0 0 0.5px #FFFFFF4D;
    color: var(--sun);
    font-size: 10px;
    line-height: 12px; /* 10 x 1.21 */
    letter-spacing: 1.6px;
    padding: 5px 9px; /* дамп OEdE4 */
    border-radius: 3px;
  }

  .su-video-item__tag-prefix {
    display: inline;
  }

  .su-video-item__play {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: #FFFFFFE6;
    color: var(--ink);
  }

  .su-video-item__play svg {
    width: 18px;
    height: 18px;
  }
}