/*
  ЧТО ЭТО: лента карточек роликов — главный экран.
  Размеры из макета: превью 16:9 со скруглением 16, между карточками 20.
  🆕 25.09 — выбор владельца «А»: «каждый ролик в своей карточке» (было: картинка,
  под ней название и сразу следующая картинка — «разделения нету»). Карточка —
  панель, как блок «Курс · 7 уроков»; превью внутри со скруглением 14.
*/

.сетка {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px var(--поля) 28px;
}

/* На широком экране — две колонки, промежуток 16 (так в макете) */
@media (min-width: 744px) {
  .сетка {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* 🆕 27.09 — плашка предпросмотра нового ролика над лентой (видит только владелец).
   Обводка — акцентом, как линии приложения: заметно, но не тревожно. */
.плашка-предпросмотр {
  margin: 14px var(--поля) 0;
  padding: 10px 14px;
  border: 1px solid var(--акцент);
  border-radius: 12px;
  background: var(--панель);
  color: var(--текст);
  font: 600 14px/19px var(--шрифт);
  text-align: center;
}

.карточка {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--панель);
  border: 1px solid var(--волосок);
  border-radius: 20px;
  padding: 8px 8px 14px;
}

/* У закрытого урока под превью ничего нет — нижний отступ как боковые */
.карточка.закрыта { padding-bottom: 8px; }

.карточка-превью {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--подложка);
}

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

.карточка-превью img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Номер ролика — крупная приглушённая цифра в углу */
.номер-ролика {
  position: absolute;
  top: 10px;
  right: 14px;
  font: 500 34px var(--моно);
  color: var(--номер);
  pointer-events: none;
}

/* Чёрные плашки на превью: «материалы» слева, длительность справа */
.плашка {
  position: absolute;
  bottom: 10px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: #0B0B0C;
  color: #F4F2EC;
  font: 500 10px var(--моно);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.плашка-материалы { left: 10px; padding: 0 10px 0 8px; }

.плашка-время {
  right: 10px;
  padding: 0 9px;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.плашка svg { flex: none; }

.карточка-название {
  padding: 0 6px;
  font: 600 16px/21px var(--шрифт);
  color: var(--текст);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 63px;
}

/* Мерцание, пока грузится превью (1,4 с, как в макете) */
.карточка-превью.грузится::before,
.ролик-превью.грузится::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--подложка) 30%,
    var(--волосок) 50%,
    var(--подложка) 70%
  );
  background-size: 300% 100%;
  animation: мерцание 1.4s linear infinite;
}
@keyframes мерцание { to { background-position: -300% 0; } }

.пусто {
  text-align: center;
  padding: 76px 28px;
}

.пусто-заголовок {
  font: 600 17px/24px var(--шрифт);
  color: var(--текст);
}

.пусто-подпись {
  margin-top: 6px;
  font: 400 14px/20px var(--шрифт);
  color: var(--текст-тусклый);
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}