/* ─── Lesson Sections — Separate Cards Layout ──────────── */

.lesson-sections-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin: var(--space-xl) 0;
}

.lesson-section-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  animation: fadeInUp 0.4s ease both;
}

.lesson-section-card:nth-child(2) { animation-delay: 0.08s; }
.lesson-section-card:nth-child(3) { animation-delay: 0.16s; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Teal gradient header */
.lesson-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--primary-700, #006b85), var(--primary-500, #008ea8));
  padding: var(--space-md) var(--space-lg);
  color: var(--white);
}

.lesson-section-header.done {
  background: linear-gradient(135deg, var(--success-700, #0f7a4a), var(--success-500, #1fa96a));
}

.lesson-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lesson-section-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.04em;
  flex: 1;
}

.lesson-section-status {
  font-size: var(--text-xs);
  font-weight: 700;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: auto;
}

/* Section body */
.lesson-section-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Placeholder text */
.section-placeholder {
  text-align: center;
  color: var(--gray);
  font-style: italic;
  padding: var(--space-lg) 0;
  margin: 0;
}

/* Material items */
.material-item-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--gray-lighter);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.material-item-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

.material-item-icon { font-size: 1.2rem; flex-shrink: 0; }

.material-item-name {
  font-weight: 600;
  color: var(--dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-item-type {
  font-size: var(--text-xs);
  color: var(--gray);
}

.material-item-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Reward hint */
.material-reward-hint {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gray-dark);
  margin: 0;
  background: rgba(241, 196, 15, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

/* Done badge */
.material-done-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-md);
  background: rgba(39, 174, 96, 0.12);
  border: 1px solid rgba(39, 174, 96, 0.35);
  border-radius: var(--radius-md);
  color: #1e8449;
  font-weight: 700;
  font-size: var(--text-sm);
}

/* Locked exercise hint */
.locked-exercise-hint {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  color: var(--gray-dark);
  background: rgba(0, 142, 168, 0.06);
  border-radius: var(--radius-md);
}

.locked-exercise-hint-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: var(--space-sm);
}

.locked-exercise-hint p { margin: 0 0 var(--space-sm); line-height: 1.5; }

.locked-exercise-reward {
  font-size: var(--text-sm);
  color: #b8860b;
  font-weight: 600;
  margin-top: var(--space-sm) !important;
}

/* Bottom navigation */
.lesson-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--gray-light);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .lesson-sections-container { gap: var(--space-lg); }
  .lesson-section-body { padding: var(--space-md); }
  .lesson-section-header { padding: var(--space-md); }
  .lesson-navigation { flex-direction: column; gap: var(--space-sm); }
  .lesson-navigation .btn { width: 100%; }
  .material-item-row { flex-direction: column; align-items: flex-start; }
  .material-item-actions { width: 100%; }
  .material-item-actions .btn { flex: 1; }
}

/* ─── Video auto-progress bar (§2.8 A3) ───── */
.video-auto-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}

.video-auto-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--gray-light, #e8e0d4);
  overflow: hidden;
}

.video-auto-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary, #008ea8);
  width: 0%;
  transition: width .4s ease;
}

.video-auto-progress-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm, .85rem);
  color: var(--muted, #7f8c8d);
}

/* ─── Modo foco: rail de progresso da aula (ROADMAP §2.8 A1) ─────────────
   Duas colunas: rail sticky à esquerda, palco (os 3 cards) à direita. O rail
   responde "onde estou e quanto falta" sem o aluno rolar a página até o fim.
   ------------------------------------------------------------------------ */

.lesson-focus-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

/* minmax(0,1fr) acima: sem isso o palco não encolhe abaixo do conteúdo
   intrínseco (iframe de vídeo, tabelas) e estoura o grid horizontalmente. */

.lesson-focus-stage { min-width: 0; }

.lesson-focus-stage .lesson-sections-container { margin-top: 0; }

.lesson-rail {
  position: sticky;
  top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-sm);
}

.lesson-rail-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lesson-rail-eyebrow {
  font-size: var(--text-xs, .72rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--primary, #008ea8);
}

.lesson-rail-course {
  font-size: var(--text-sm, .85rem);
  font-weight: 600;
  color: var(--navy, #2c3e50);
  line-height: 1.3;
}

.lesson-rail-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--gray-light, #e8e0d4);
  overflow: hidden;
  margin-top: 4px;
}

.lesson-rail-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary, #008ea8);
  transition: width .3s ease;
}

.lesson-rail-pct {
  font-size: var(--text-xs, .72rem);
  color: var(--muted, #7f8c8d);
}

.lesson-rail-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.lesson-rail-step {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius, 8px);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}

.lesson-rail-step:hover { background: var(--cream, #f7f4ee); }

.lesson-rail-step:focus-visible {
  outline: 2px solid var(--primary, #008ea8);
  outline-offset: 1px;
}

.lesson-rail-step.current {
  background: var(--cream, #f7f4ee);
  border-left-color: var(--primary, #008ea8);
}

.lesson-rail-marker {
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gray-light, #e8e0d4);
  color: var(--muted, #7f8c8d);
  font-size: var(--text-xs, .72rem);
  font-weight: 700;
}

.lesson-rail-step.current .lesson-rail-marker {
  background: var(--primary, #008ea8);
  color: #fff;
}

.lesson-rail-step.done .lesson-rail-marker {
  background: var(--success-500, #1fa96a);
  color: #fff;
}

.lesson-rail-step-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lesson-rail-step-label {
  font-size: var(--text-sm, .85rem);
  font-weight: 600;
  color: var(--navy, #2c3e50);
}

.lesson-rail-step.locked .lesson-rail-step-label { color: var(--muted, #7f8c8d); }

.lesson-rail-step-meta {
  font-size: var(--text-xs, .72rem);
  color: var(--muted, #7f8c8d);
}

.lesson-rail-step.done .lesson-rail-step-meta { color: var(--success-700, #0f7a4a); }

/* "Continuar mais tarde" — a saída explícita que o player não tinha. */
.lesson-rail-later { width: 100%; }

/* Destaque momentâneo do card ao chegar por clique no rail. */
.lesson-section-card--flash {
  box-shadow: 0 0 0 2px var(--primary, #008ea8), var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .lesson-rail-bar-fill,
  .lesson-rail-step { transition: none; }
}

/* Abaixo de 900px o rail não cabe ao lado do palco: vira uma faixa
   horizontal acima do conteúdo, com os passos roláveis (NFR-04: usável em
   360px). Sem sticky — em telas baixas ele roubaria altura útil do vídeo. */
@media (max-width: 900px) {
  .lesson-focus-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .lesson-rail {
    position: static;
    margin-bottom: 0;
  }

  .lesson-rail-steps {
    flex-direction: row;
    gap: var(--space-sm, .5rem);
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .lesson-rail-steps > li { flex: 0 0 auto; }

  .lesson-rail-step {
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .lesson-rail-step.current {
    border-left-color: transparent;
    border-bottom-color: var(--primary, #008ea8);
  }
}