@import url("_shared.css");

.lesson__hero {
  padding-block-end: var(--oa-space-4);
  border-block-end: 1px solid var(--oa-line-soft);
}

.lesson__body {
  max-width: 68ch;
  margin-block-start: clamp(24px, 4vh, 40px);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--oa-ink-soft);
}

.lesson__body p { margin: 0 0 var(--oa-space-4); }
.lesson__body img { border-radius: var(--oa-radius-md); }

.lesson__body h2 {
  margin: var(--oa-space-6) 0 var(--oa-space-3);
  font-size: 1.5rem;
  color: var(--oa-ink);
}

.lesson__further {
  margin-block-start: var(--oa-space-5);
}

.lesson__further a {
  color: var(--oa-accent);
  font-weight: 600;
}

.lesson__locked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--oa-space-3);
  max-width: 52ch;
  margin-block-start: clamp(24px, 4vh, 40px);
  padding: var(--oa-space-5);
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-lg);
  background: var(--oa-surface);
}

.lesson__locked-note {
  margin: 0;
  color: var(--oa-ink-soft);
}

.lesson__locked .join { margin-block-start: 0; }

.lesson__next {
  max-width: 68ch;
  margin-block-start: clamp(32px, 5vh, 56px);
  padding-block-start: var(--oa-space-5);
  border-block-start: 1px solid var(--oa-line-soft);
}

.lesson__next .join { margin-block-start: 0; }

.lesson__next-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--oa-space-4) var(--oa-space-5);
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-lg);
  background: var(--oa-surface);
  color: inherit;
  text-decoration: none;
}

.lesson__next-link:hover { border-color: var(--oa-accent); }

.lesson__next-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oa-muted);
}

.lesson__next-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--oa-accent);
}

.lesson__locked-cta {
  color: var(--oa-accent);
  font-weight: 600;
  text-decoration: none;
}

@import url("quiz.css");