/* Обновления страницы урока. Подключается после общего набора компонентов. */

.week-card:not(.week-card--locked) .program-card__num {
  color: var(--color-accent);
}

.lesson-page .lesson-next--compact {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--space-l);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lesson-next__action {
  white-space: nowrap;
}

.lesson-next__action--locked {
  color: var(--color-ink-muted);
}

.lesson-next__action--locked .icon {
  color: var(--color-ink-soft);
}

.lesson-next__hint {
  max-width: 23rem;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  font-size: var(--step--1);
  line-height: 1.4;
}

.lesson-next__last {
  padding-block: var(--space-2xs);
  color: var(--color-ink-muted);
  font-size: var(--step--1);
}

.lesson-description {
  white-space: pre-line;
}

.lesson-video-password {
  margin: 0 0 var(--space-xs);
  max-width: var(--container-text);
  color: var(--color-ink-muted);
  font-size: var(--step--1);
}

/* Уроки без опубликованного видео остаются видимыми в маршруте, но выглядят
   как неактивные элементы без карточной заливки. */
.lesson-card--locked-video {
  background: transparent;
  box-shadow: none;
}

.lesson-card--locked-video .lesson-card__title {
  color: var(--color-ink-muted);
}

.lesson-card--locked-video .lesson-card__description {
  color: var(--color-ink-soft);
}

.timeline-item--locked-video .timeline-item__body {
  background: transparent;
  box-shadow: none;
}

.timeline-item--locked-video .timeline-item__title {
  color: var(--color-ink-muted);
  filter: none;
}

.timeline-item__description {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--step--1);
  line-height: 1.55;
  overflow-wrap: break-word;
}

.lesson-watch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-s);
}

.lesson-watch__button--done {
  background: var(--color-success);
  color: var(--color-text-on-accent);
}

.lesson-watch__button--done:hover:not(:disabled) {
  background: var(--color-success);
  box-shadow: none;
  transform: none;
}

.lesson-watch__error {
  color: var(--color-danger);
  font-size: var(--step--1);
}

.lesson-homework [data-homework-unlocked] {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

.lesson-homework__note a {
  color: var(--color-accent-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.lesson-homework__note a:hover {
  text-decoration: none;
}

[data-homework-unlocked][hidden],
[data-homework-locked][hidden],
[data-next-hint][hidden],
[data-testid="mark-watched-error"][hidden] {
  display: none !important;
}

@media (max-width: 42rem) {
  .lesson-page .player {
    width: 100%;
    min-height: 20rem;
  }

  .lesson-card--locked-video .lesson-card__head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2xs);
    width: 100%;
  }

  .lesson-card--locked-video .lesson-card__head .badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .lesson-page .lesson-next--compact {
    margin-bottom: var(--space-m);
  }

  .lesson-next__action {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }

  .lesson-next__hint {
    max-width: min(23rem, calc(100vw - 2 * var(--gutter)));
  }

  .lesson-watch__button {
    width: 100%;
  }

  .lesson-watch__error {
    width: 100%;
  }
}