/**
 * Lesweergave: professionele opmaak voor titel, meta, acties en content-omgeving
 * Gebruikt op /cursus/{slug}/les/{id}
 */

/* ----- Breadcrumbs ----- */
.lesson-view .breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}

.lesson-view .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-neutral-400, #94a3b8);
}

.lesson-view .breadcrumb-item a {
  color: var(--color-neutral-500, #64748b);
  text-decoration: none;
  transition: color 0.15s ease;
}

.lesson-view .breadcrumb-item a:hover {
  color: var(--course-accent, #3b82f6);
}

.lesson-view .breadcrumb-item.active {
  color: var(--color-neutral-700, #334155);
}

/* ----- Lesson header (titel + meta + actie) ----- */
.lesson-view__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-neutral-200, #e2e8f0);
}

.lesson-view__title-block {
  flex: 1;
  min-width: 0;
}

.lesson-view__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-neutral-900, #0f172a);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.lesson-view__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--color-neutral-500, #64748b);
}

.lesson-view__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.lesson-view__meta-item i {
  font-size: 1rem;
  opacity: 0.85;
}

.lesson-view__actions {
  flex-shrink: 0;
}

.lesson-view__btn-complete {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.lesson-view__btn-complete.btn-outline-primary {
  border-width: 1.5px;
  color: var(--course-accent, #3b82f6);
}

.lesson-view__btn-complete.btn-outline-primary:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--course-accent);
  color: var(--course-accent);
}

.lesson-view__btn-complete.btn-success {
  background: #059669;
  border-color: #059669;
  color: #fff;
}

.lesson-view__btn-complete.btn-success:hover {
  background: #047857;
  border-color: #047857;
  color: #fff;
}

/* Content area - max width voor leesbaarheid */
.lesson-view__content {
  max-width: 48rem;
}

.lesson-view__content .lesson-content {
  margin-top: 0;
}

/* Divider tussen header en content - optioneel, we gebruiken border-bottom op header */
.lesson-view__content-start {
  margin-top: 0;
}

/* Paginering (Vorige / X van Y / Volgende) */
.lesson-view-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 0;
  margin-top: 2rem;
  border-top: 1px solid var(--color-neutral-200, #e2e8f0);
}

.lesson-view-pagination__page {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-neutral-600, #475569);
}

.lesson-view-pagination .btn {
  font-weight: 500;
  border-radius: 8px;
}

/* Video card in les - eenduidig met content-card */
.lesson-view .card.border-primary .card-header {
  border-radius: 0;
  font-weight: 600;
}

/* AI grading transparency notice (assignment forms) */
.ai-grading-info summary {
  cursor: pointer;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 767.98px) {
  .lesson-view__header {
    flex-direction: column;
    align-items: stretch;
  }

  .lesson-view__title {
    font-size: 1.5rem;
  }

  .lesson-view__actions {
    width: 100%;
  }

  .lesson-view__btn-complete {
    width: 100%;
    justify-content: center;
  }
}