/* =====================================================
   ZDVAL — /academy (SP1 design refactor §4.1)
   Lavanda claro integral. Carrega DEPOIS de style.css.
   Estratégia: remapear os tokens --az-* (escopados em
   .academy-wrap) de escuro→claro; o resto do CSS legado
   recolore sozinho. Refinamentos pontuais em seguida.
   ===================================================== */

/* ── 1. Remap dos tokens da academy: escuro → claro/índigo ── */
.academy-wrap {
  --az-bg-0: #eef0f7;
  --az-bg-1: #f3f4f8;
  --az-bg-2: #ffffff;
  --az-bg-3: #f9fafb;
  --az-surface: #ffffff;
  --az-surface-hi: #f9fafb;
  --az-grad-surface: linear-gradient(180deg, #ffffff, #f9fafb);
  --az-border: rgba(0, 0, 0, 0.08);
  --az-border-hi: rgba(0, 0, 0, 0.12);
  --az-txt: #000000;
  --az-txt-dim: rgba(0, 0, 0, 0.65);
  --az-txt-sub: rgba(0, 0, 0, 0.45);
  --az-shadow-md: var(--zd-sh-card);
  --az-shadow-lg: 0 28px 70px rgba(15, 15, 30, 0.12);
  --az-radius: var(--zd-r-md);
  --az-radius-sm: var(--zd-r-sm);
  /* vermelho deixa de ser acento → índigo (só destrutivo mantém vermelho) */
  --az-red: #6366f1;
  --az-red-hi: #4f46e5;
  --az-red-soft: rgba(99, 102, 241, 0.10);
  --az-grad-red: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

/* ── 2. Fundo da página ── */
/* !important necessário: style.css:27525 força #000 !important em [id^="page-"] */
#page-academy {
  background: var(--zd-bg-page) !important;
  min-height: calc(100vh - var(--topbar-height) - var(--horizontal-nav-height));
}
.academy-wrap {
  background: var(--zd-bg-page) !important;
}
/* style.css:2431 dá padding:1rem em .page-container abaixo de 480px —
   sangra de volta até a borda pra não sobrar preto visível nas laterais. */
@media (max-width: 480px) {
  #page-academy { margin: -1rem; }
}
.academy-viewport { color: var(--zd-ink); font-family: var(--zd-font); }

/* Cabeçalho de seção em lavanda */
.az-browse-stage {
  background: var(--zd-surface);
  border: 1px solid var(--zd-line);
  box-shadow: var(--zd-sh-card);
}
.az-browse-panel-head h2 { color: var(--zd-ink); font-family: var(--zd-font); }
.az-browse-panel-head p { color: var(--zd-ink-2); }
.az-section-head h2 { color: var(--zd-ink); }

/* ── 3. Sidebar: cards brancos, ativo índigo, sem glow vermelho ── */
.az-browse-sidebar {
  background: transparent;
  border: none;
  box-shadow: none;
}
.az-browse-menu-btn {
  background: var(--zd-surface);
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-r-lg);
  color: var(--zd-ink-2);
  min-height: var(--zd-tap);
}
.az-browse-menu-btn:hover {
  background: var(--zd-surface);
  border-color: var(--zd-line-strong);
  color: var(--zd-ink);
  box-shadow: var(--zd-sh-card);
}
.az-browse-menu-btn.active {
  color: var(--zd-ink);
  background: var(--zd-accent-soft);
  border-color: transparent;
  border-left: 3px solid var(--zd-accent);
  box-shadow: none;
}
.az-browse-menu-icon {
  background: var(--zd-accent-soft);
  color: var(--zd-accent);
}
.az-browse-menu-btn.active .az-browse-menu-icon {
  background: var(--zd-accent-grad);
  color: #fff;
}
.az-browse-menu-copy strong { color: var(--zd-ink); }
.az-browse-menu-copy small { color: var(--zd-ink-3); }
.az-browse-menu-btn.active .az-browse-menu-copy strong { color: var(--zd-accent-deep); }

/* ── 4. Grade responsiva (some o espaço morto em telas largas) ── */
.az-playlist-grid,
.az-browse-lessons-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  justify-content: initial;
  gap: 22px;
}

/* ── 5. Card de curso: superfície branca ── */
.az-playlist-card {
  background: var(--zd-surface);
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-r-lg);
  box-shadow: var(--zd-sh-card);
  overflow: hidden;
  min-height: 0;               /* mata os 560px fixos → card acompanha o conteúdo */
}
.az-plc-accent { display: none; }  /* some a barra ciano com glow */
.az-playlist-card:hover {
  border-color: var(--zd-line-strong);
  box-shadow: var(--zd-accent-lift);
}
.az-plc-art {
  aspect-ratio: 16 / 9;
  background: var(--zd-surface-sub) center/cover no-repeat;
}
/* Some o glow ciano; mantém só o escurecimento inferior p/ ler o título */
.az-plc-shade {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, transparent 30%, rgba(0, 0, 0, 0.72) 100%);
}
/* Categoria: chip índigo sólido, não texto colorido sobre imagem */
.az-plc-cat,
.az-browse-lesson-cat {
  color: #fff !important;
  background: var(--zd-accent);
  padding: 4px 10px;
  border-radius: 999px;
  text-shadow: none !important;
  letter-spacing: 0.06em;
}
/* Título em Inter (some a mistura Rajdhani) */
.az-plc-heading, .az-plc-top-line, .az-plc-bot-line,
.az-browse-lesson-body h3 {
  font-family: var(--zd-font) !important;
}
.az-plc-top-line { font-weight: 400; }
.az-plc-bot-line { font-weight: 800; }
.az-plc-body {
  background: var(--zd-surface);
}
/* CTA "Assistir agora": índigo cheio */
.az-plc-cta,
.az-browse-lesson-cta {
  background: var(--zd-accent-grad);
  border: none;
  color: #fff;
  min-height: var(--zd-tap);
  border-radius: var(--zd-r-md);
  font-family: var(--zd-font);
}
.az-playlist-card:hover .az-plc-cta {
  background: var(--zd-accent-grad);
  color: #fff;
  box-shadow: var(--zd-accent-lift);
}
.az-plc-cta i:last-child, .az-plc-cta i { color: #fff; }

/* ── 6. Card de aula (browse lessons) ── */
.az-browse-lesson-card {
  background: var(--zd-surface);
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-r-lg);
  box-shadow: var(--zd-sh-card);
  overflow: hidden;
}
.az-browse-lesson-cover { aspect-ratio: 16 / 9; }
.az-browse-lesson-body h3 { color: var(--zd-ink); }
.az-browse-lesson-course { color: var(--zd-accent); }
.az-browse-lesson-body p { color: var(--zd-ink-2); }

/* ── 7. Botões genéricos da academy ── */
.az-btn-primary {
  background: var(--zd-accent-grad);
  color: #fff;
  border: none;
}

/* ── 8. Spinner / estados vazios em tema claro ── */
.az-spinner { border-color: rgba(0, 0, 0, 0.10); border-top-color: var(--zd-accent); }
.az-empty i { color: var(--zd-ink-3); }
.az-empty p { color: var(--zd-ink-2); }

/* ── 9. Responsivo ── */
@media (max-width: 768px) {
  .az-playlist-grid,
  .az-browse-lessons-grid { grid-template-columns: 1fr; }
}