/* course-single.css — Detalhe de curso (Tutor LMS)
   Hero réplica de Website/web/src/pages/cursos/[slug].astro (.course-header-section) */

/* Fundo da página: mesmo padrão escuro com gradiente radial usado no catálogo */
body.single-courses {
  background:
    radial-gradient(ellipse 90% 70% at 50% 110%, oklch(35% 0.15 302 / 0.18) 0%, transparent 65%),
    var(--color-bg-dark);
}

.single-courses .tutor-page-wrap,
.single-courses .tutor-course-details-page {
  background: transparent;
}

.single-courses .tutor-course-details-page {
  padding-bottom: var(--space-xl);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.palatine-course-hero {
  position: relative;
  padding-top: 130px;
  padding-bottom: var(--space-xs);
}

/* A imagem e o degradê ficam atrás de todo o conteúdo da página (z-index
   negativo escapa para o contexto de empilhamento raiz, já que o hero não
   define z-index próprio) e se estendem até a metade da tela, sem alterar
   a altura do hero no fluxo do documento */
.palatine-course-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50vh;
  background:
    radial-gradient(circle at center, oklch(22% 0.06 302 / 0.25) 0%, transparent 75%),
    url('../images/cursos-detail-concept.png');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.28;
  pointer-events: none;
  z-index: -2;
}

/* Transição gradual entre a imagem do hero e o fundo da página */
.palatine-course-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50vh;
  background: linear-gradient(to bottom, transparent 50%, var(--color-bg-dark));
  pointer-events: none;
  z-index: -1;
}

.palatine-course-hero-inner {
  position: relative;
  z-index: 2;
}

/* Breadcrumb "Cursos › Categoria" */
.palatine-course-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-text-muted-dark);
}

.palatine-course-breadcrumb a {
  color: var(--color-text-muted-dark);
  transition: color var(--transition-fast);
}

.palatine-course-breadcrumb a:hover {
  color: var(--color-gold);
}

.palatine-course-breadcrumb-sep {
  opacity: 0.4;
}

.palatine-course-breadcrumb-area {
  font-weight: 500;
  color: var(--color-gold);
}

/* Linha do breadcrumb + ações de lista de desejos/compartilhar */
.palatine-course-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}

.palatine-course-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.palatine-course-hero-actions .tutor-btn-ghost {
  background: none;
  border: 1px solid var(--color-border-dark);
  color: var(--color-text-secondary-dark);
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: normal;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius-sm);
}

.palatine-course-hero-actions .tutor-btn-ghost:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
  background: oklch(76% 0.14 80 / 0.04);
}

/* ── Cores de texto: aplica os tokens escuros da Palatine ao markup nativo
   do Tutor (.tutor-color-black/-secondary/-muted), sem alterar estrutura
   ou comportamento ──────────────────────────────────────────────────────── */
.single-courses .tutor-color-black {
  color: var(--color-text-primary-dark) !important;
}

.single-courses .tutor-color-secondary {
  color: var(--color-text-secondary-dark) !important;
}

.single-courses .tutor-color-muted {
  color: var(--color-text-muted-dark) !important;
}

/* ── Tipografia: títulos em Cinzel (mesma identidade do site Astro) ──────── */
.single-courses .tutor-course-details-title,
.single-courses .tutor-course-details-tab h2,
.single-courses .tutor-course-details-tab h3,
.single-courses .tutor-course-details-tab h4,
.single-courses .tutor-course-details-widget-title,
.single-courses .tutor-course-details-instructors h3,
.single-courses .tutor-course-content-title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Cabeçalho do curso (lead-info nativo) ────────────────────────────────
   O cabeçalho vira uma única linha: estrelas de avaliação, título do curso
   e tags lado a lado — sem alterar a estrutura/markup nativos. */
.single-courses .tutor-course-details-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-md);
}

.single-courses .tutor-course-details-ratings {
  order: 1;
}

.single-courses .tutor-course-details-title {
  order: 2;
  margin: 0;
}

.single-courses .palatine-course-tags-chips {
  order: 3;
}

.single-courses .tutor-course-details-ratings .tutor-ratings-stars,
.single-courses .tutor-course-details-ratings .tutor-ratings-average {
  color: var(--color-gold);
}

/* Tags do curso — réplica de .palatine-card-badge-categoria/.tag-chip do site Astro */
.single-courses .palatine-course-tags-chips {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.single-courses .palatine-course-tag-chip {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
  white-space: nowrap;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid oklch(76% 0.14 80 / 0.35);
  background: oklch(76% 0.14 80 / 0.08);
  color: var(--color-gold);
}

/* A lista de tags nativa migrou para o cabeçalho (acima); oculta o widget
   duplicado na barra lateral */
.single-courses .tutor-single-course-sidebar-more .tutor-course-details-widget:has(.tutor-course-details-widget-tags) {
  display: none;
}

/* ── Cards (caixa de matrícula, instrutor, widgets da barra lateral,
   avaliações) — réplica de .palatine-card do site Astro ────────────────── */
.single-courses .tutor-card {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
}

.single-courses .tutor-card-body {
  background-color: transparent !important;
}

.single-courses .tutor-card-footer {
  border-top: 1px solid var(--color-border-dark);
}

.single-courses .tutor-single-course-sidebar-more .tutor-course-details-instructors,
.single-courses .tutor-single-course-sidebar-more .tutor-course-details-widget {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}

.single-courses .tutor-icon-bullet-point {
  color: var(--color-gold) !important;
}

/* Card flutuante da matrícula: respeita o header sticky (80px) ao rolar a
   página, sem barra de rolagem própria e sempre abaixo do menu no topo */
.single-courses .tutor-single-course-sidebar {
  top: calc(80px + var(--space-md)) !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 1;
}

/* Ícones de metadados (nível, duração, etc.) na caixa de matrícula */
.single-courses .tutor-sidebar-card .tutor-card-footer [class*="tutor-icon-"] {
  color: var(--color-gold) !important;
}

/* Barra de progresso (curso em andamento) */
.single-courses .tutor-progress-bar {
  background-color: var(--color-border-dark);
}

/* ── Abas (Informações / Conteúdo do Curso / Avaliações) ──────────────────── */
/* A navegação sticky das abas deve ficar abaixo do menu fixo do site (80px),
   nunca sobre ele */
.single-courses .tutor-course-details-tab .tutor-is-sticky {
  top: 80px !important;
  z-index: 1;
}

.single-courses .tutor-course-details-tab .tutor-is-sticky,
.single-courses .tutor-course-details-tab .tutor-nav {
  background-color: transparent !important;
}

.single-courses .tutor-course-details-tab .tutor-nav {
  border-bottom: 1px solid var(--color-border-dark);
}

.single-courses .tutor-course-details-tab .tutor-nav-link {
  font-family: var(--font-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary-dark);
}

.single-courses .tutor-course-details-tab .tutor-nav-link.is-active {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* "O que você vai aprender?" — réplica de .learning-grid/.learning-item do
   site Astro: cada item em um card com check dourado, em grade de 2 colunas.
   O widget "tutor-course-details-widget-col-2" é exclusivo desta seção. */
.single-courses .tutor-course-details-tab .tutor-course-details-widget-col-2 .tutor-course-details-widget-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.single-courses .tutor-course-details-tab .tutor-course-details-widget-col-2 .tutor-course-details-widget-list li {
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  background: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  transition: border-color var(--transition-fast);
}

.single-courses .tutor-course-details-tab .tutor-course-details-widget-col-2 .tutor-course-details-widget-list li:hover {
  border-color: oklch(76% 0.14 80 / 0.25);
}

@media (max-width: 900px) {
  .single-courses .tutor-course-details-tab .tutor-course-details-widget-col-2 .tutor-course-details-widget-list {
    grid-template-columns: 1fr;
  }
}

/* Espaçamento uniforme entre as seções da aba "Informações" (O que você vai
   aprender, Público, Materiais Inclusos, Requisitos), mesma distância usada
   entre "Sobre o curso" e "O que você vai aprender" */
#tutor-course-details-tab-info .tutor-course-details-widget {
  margin-top: var(--space-lg) !important;
}

/* "Exibir Mais" — remove o limite de altura e o degradê, exibindo a
   descrição do curso por completo desde o início */
.single-courses .tutor-toggle-more-collapsed {
  height: auto !important;
  max-height: none !important;
}

.single-courses .tutor-toggle-more-collapsed::after,
.single-courses .tutor-toggle-more-collapsed::before {
  content: none !important;
}

.single-courses .tutor-btn-show-more {
  display: none !important;
}

/* O título "Conteúdo do curso" é redundante com o nome da própria aba */
.single-courses .tutor-course-content-title {
  display: none;
}

/* Currículo (accordion de tópicos) */
.single-courses .tutor-accordion-item,
.single-courses .tutor-accordion-item-header,
.single-courses .tutor-accordion-item-body {
  background-color: var(--color-surface-dark) !important;
  border-color: var(--color-border-dark) !important;
}

.single-courses .tutor-accordion-item {
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.single-courses .tutor-accordion-item-header.is-active {
  color: var(--color-gold);
  background-color: var(--color-surface-dark-hover) !important;
}

/* Itens da lista de aulas dentro do accordion aberto — também têm fundo
   branco próprio no CSS nativo do Tutor */
.single-courses .tutor-accordion-item-body-content,
.single-courses .tutor-course-content-list-item {
  background-color: var(--color-surface-dark) !important;
  border-color: var(--color-border-dark) !important;
}

/* Separador entre os lançamentos (aulas) dentro do accordion — padding
   simétrico (topo/base) em cada item, para o texto não ficar colado a uma
   das bordas */
.single-courses .tutor-course-content-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--color-border-dark);
}

.single-courses .tutor-course-content-list-item .tutor-d-flex {
  align-items: center;
}

.single-courses .tutor-course-content-list-item:last-child {
  border-bottom: none;
}

.single-courses .tutor-course-content-list-item-title,
.single-courses .tutor-course-content-list-item-title a {
  color: var(--color-text-primary-dark) !important;
}

.single-courses .tutor-course-content-list-item-title a:hover {
  color: var(--color-gold);
}

.single-courses .tutor-course-content-list-item-icon {
  color: var(--color-text-muted-dark) !important;
}

/* ── Avaliações ────────────────────────────────────────────────────────── */
.single-courses .tutor-hr {
  border-color: var(--color-border-dark);
}

.single-courses .tutor-ratings-progress-bar {
  background-color: var(--color-border-dark);
}