/*
  ЧТО ЭТО: закрытые уроки во вкладке «Курс».
  Из макета: размытие 7px, вуаль фоном 45%, замок 44px.

  🔴 Размытие в браузере — только для вида. Настоящая защита в том,
     что с сервера приходит УЖЕ размытая картинка, а чистой в браузере
     нет вообще.
*/

/* Картинка приходит с сервера УЖЕ размытой, поэтому здесь размываем
   совсем чуть-чуть — только чтобы сгладить края. Если поставить больше,
   карточка превращается в однотонное пятно и выглядит как пустая. */
.карточка-превью.закрыто img { filter: blur(2px); }

.карточка-превью.закрыто::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--вуаль-замка);
  backdrop-filter: saturate(.9);
}

.замок {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}

/* 🆕 25.09 — владелец: замок и «Ждёт тебя» «сливаются очень сильно, особенно на блюре,
   когда белый фон… как будто бы не видно». Теперь оба лежат на тёмной полупрозрачной
   подложке (как чёрные плашки с длительностью) и светлого цвета — читаются на любом
   фоне и в обеих темах. Раньше: тонкая обводка и подпись цветом «тусклый текст». */
.замок-значок {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(11, 11, 12, .6);
  border: 1.5px solid rgba(244, 242, 236, .9);
  color: #F4F2EC;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.замок-подпись {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(11, 11, 12, .6);
  font: 600 11px var(--моно);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #F4F2EC;
}

.карточка.закрыта .карточка-название { color: var(--текст-тусклый); }

/* 🆕 25.09, владелец: номер урока на закрытой карточке — «посильнее, поярче…
   а не какие-то тусклые». Раньше он лежал ПОД вуалью замка (::after рисуется
   поверх) и был еле виден; теперь поверх вуали, крупнее и цветом текста. */
.карточка-превью.закрыто .номер-ролика {
  z-index: 2;
  font-size: 44px;
  font-weight: 600;
  color: var(--текст);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
html[data-тема="светлая"] .карточка-превью.закрыто .номер-ролика {
  text-shadow: 0 1px 10px rgba(255, 255, 255, .65);
}

/* Блок-объяснение над закрытым курсом */
.курс-шапка {
  margin: 16px var(--поля) 0;
  background: var(--панель);
  border: 1px solid var(--волосок);
  border-radius: var(--r-панели);
  padding: 16px 18px 18px;
}

.курс-шапка .мета { display: block; margin-bottom: 10px; }

.курс-шапка h2 {
  margin: 0 0 6px;
  font: 700 16px/21px var(--шрифт);
  color: var(--текст);
}

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