/*
  ЧТО ЭТО: экран одного ролика и список материалов под ним.
  Из макета: кнопки 48 высотой со скруглением 12, первая — чёрная заливка,
  вторая — обводка 1.5px. Список материалов — панель со скруглением 16.
*/

.ролик { padding: 0 0 32px; }

.ролик-превью {
  position: relative;
  width: calc(100% - var(--поля) * 2);
  margin: 0 var(--поля);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-превью);
  overflow: hidden;
  background: var(--подложка);
  cursor: pointer;
}

/* <picture> вокруг обложки (WebP + запасной JPEG, 25.09) — блок во всю превью */
.ролик-превью picture { display: block; width: 100%; height: 100%; }
.ролик-превью img { width: 100%; height: 100%; object-fit: cover; }

.плей {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.плей span {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(11, 11, 12, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}

.ролик-превью:active .плей span { transform: scale(.93); }

.плей svg { margin-left: 3px; }

.ролик-название {
  padding: 14px var(--поля) 0;
  font: 700 20px/26px var(--шрифт);
  letter-spacing: -0.3px;
  color: var(--текст);
}

/* --- Своё описание под роликом ------------------------------------------
   Не то же самое, что описание на YouTube. Сюда владелец пишет инструкции
   и ссылки. Длинное сворачивается. */
.ролик-описание {
  padding: 8px var(--поля) 0;
}

.описание-тело {
  font: 400 14px/20px var(--шрифт);
  color: var(--текст-тусклый);
}

/*
  Свёрнутое состояние: ровно три строки.
  Обрезаем по высоте и добавляем плавное затухание снизу — иначе последняя
  строка выглядит грубо обрубленной пополам.
  Тут НЕ используем -webkit-line-clamp: он не считает строки внутри
  вложенных абзацев и обрезает как попало.
*/
.описание-тело.свёрнуто {
  max-height: 60px;          /* 3 строки по 20px */
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

.описание-абзац { margin: 0 0 10px; }
.описание-абзац:last-child { margin-bottom: 0; }

.описание-ещё {
  margin-top: 4px;
  font: 600 13px var(--шрифт);
  color: var(--акцент-текст);
  padding: 4px 0;
}

/* Ссылка внутри описания */
.ссылка-в-тексте {
  font: inherit;
  color: var(--акцент-текст);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
  display: inline;
  text-align: left;
}

/* --- Две кнопки ---------------------------------------------------------- */
.ролик-кнопки {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px var(--поля) 0;
}

.кнопка-главная,
.кнопка-второстепенная {
  height: 48px;
  border-radius: var(--r-кнопки);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 16px var(--шрифт);
  width: 100%;
}

.кнопка-главная {
  background: var(--тушь);
  color: var(--на-тёмном);
}

.кнопка-второстепенная {
  border: 1.5px solid var(--текст);
  color: var(--текст);
  background: none;
}

.кнопка-главная svg, .кнопка-второстепенная svg { flex: none; }

/* --- Список материалов --------------------------------------------------- */
.ролик-материалы {
  margin: 14px var(--поля) 0;
  background: var(--панель);
  border: 1px solid var(--волосок);
  border-radius: var(--r-панели);
  overflow: hidden;
  animation: раскрыться .25s ease;
}

@keyframes раскрыться {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.материалы-заголовок {
  padding: 14px 16px 10px;
  font: 500 10px var(--моно);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--текст-тусклый);
}

.материал {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--волосок);
  width: 100%;
  text-align: left;
  min-height: 66px;
}

.материал-значок { flex: none; }

.материал-текст { flex: 1; min-width: 0; }

.материал-имя {
  font: 500 14px/18px var(--шрифт);
  color: var(--текст);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.материал-подпись {
  margin-top: 3px;
  font: 500 11px var(--моно);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--текст-тусклый);
}

/* Кружок со стрелкой скачивания */
.материал-скачать {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--волосок);
  background: var(--фон);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Пока сервер выдаёт ссылку — строка приглушается, а стрелка
   в кружке заменяется маленькой крутилкой. Человек видит, что
   нажатие услышано, и не тычет во второй раз. */
.материал.идёт { opacity: .55; }

.крутилка-мелкая {
  width: 16px;
  height: 16px;
  border: 2px solid var(--волосок);
  border-top-color: var(--акцент);
  border-radius: 50%;
  animation: вращение .8s linear infinite;
}